This is a jsfiddle
http://jsfiddle.net/2GpmW/
when I set the css, I did this:
.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
border: none;
color: #525252;
height: 30px;
line-height: 15px;
margin-bottom: 10px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 2px 0px 2px 5px;
width: 400px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
font-family: inherit;
font-size: inherit;
}
so as you see the css show be applied to both input text and text area but for some reasons, the label beside the text area becomes down and place holder inside the text area is not centered vertically as it is in the input text
please :
1- why is that happening?
2- how to solve it
Many thanks
You have to use this:
textarea{
vertical-align: top;
}
fiddle
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell element.
You have to add vertical-align:middle to both textarea and label.
label, textarea{
vertical-align: middle;
}
Related
I'm trying to increase the size of this textarea evenly. But when I change it from 100% width to higher than that, it increases only to the right. I tried margin auto and display block but doesnt work.
Here is my css:
textarea[form="chform"] {
width: 100%;
height: 230px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: grey;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
margin-top: 10px;
resize:none;
}
.profile__form{
padding: 15px;
margin: auto;
border-radius: 50%;
}
.profile_container {
width: 400px;
margin: 120px auto 120px;
/*background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), #f0f0f0, rgba(223,190,106,0.7));*/
padding: 0 20px 20px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.075);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.075);
text-align: center;
}
jade:
extends layout
block content
body(style='background-color:black')
link(href='http://fonts.googleapis.com/css?family=Great+Vibes', rel='stylesheet', type='text/css')
div.right
if(user)
a Welcome #{user.name}
|  
a(href='/main') Home
|  
a(href='/profile') Profile
|  
a(href='/logout') Logout
else
a(href='/main') Home
|  
a(href='/register') Register
|  
a(href='/login') Login
div.profile_container
form.profile__form(role='form', action="/add-chapters",id="chform" method="post", style='max-width: 800px;')
.profile__form-heading Add Chapter
input.form-control(type='number', min="1" name="chapterNumber", id="inputChapterNumber" placeholder='Chapter Number')
br
input.form-control(type='text', name="chapterTitle", id="inputChapterTitle", placeholder='Title')
textarea(name='chapterStory', cols='30', rows='5', form="chform", placeholder="Enter Story")
br
button.chform(type='submit') Save
HERE IS IMAGE of what I see so far after increasing width. I just want a bigger textarea and centered:
https://i.stack.imgur.com/xSBdL.jpg
Edit: ok added parent css
IMAGE NOW FIXED:
https://i.stack.imgur.com/dbtiY.jpg
So I fixed it by increasing width of parent container the profile form and profile container. Then position relative, display block, and margin auto. Simple!
textarea[form="chform"] {
width: 70%;
height: 500px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: grey;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
resize:none;
position: relative;
display:block;
margin:auto;
margin-top: 10px;
}
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
I am trying to create a <kbd> tag for myself. I was trying with this image like below,
CSS:
kbd {
font-family: Courier;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:10px;
background: url('kbd.png');
background-repeat:no-repeat;
}
HTML:
<p>Open Terminal <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>T</kbd> </p>
But images are not showing completely unless the text is large enough to cover the image. see the screen shot below.
Also I could not able to bring the text at center, I tried align but could not succeeded.
Any help including any better way to have <kbd> tag will be appreciated.
It's very worth noting that this could be done pretty much entirely without the need of an image. It would be more flexible without it; a long <kbd> text would break if it were an image, but wouldn't if it was done entirely in CSS.
So I propose:
http://jsfiddle.net/TLV4a/1/
kbd {
display: inline-block;
min-width: 45px;
text-align: center;
font-family: Courier;
margin: 0 5px;
padding: 0 5px;
background-color: #f7f7f7;
border-width: 1px 1px 3px;
border-style: solid;
border-color: #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 4px 1px #fff;
box-shadow: inset 0 0 4px 1px #fff;
line-height: 1.75;
}
If you have even padding, instead of different left vs. right padding, as well as utilise a min-width along with text-align: center;, you can get it to display nicely.
http://jsfiddle.net/TLV4a/
kbd {
display: inline-block;
min-width: 50px;
text-align: center;
font-family: Courier;
padding: 6px 5px 8px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png') no-repeat 50% 0;
}
Have a look at this jsFiddle
kbd {
font-family: Courier;
padding-top:6px;
padding-bottom:6px;
background: url('https://dl.dropboxusercontent.com/u/61772690/kbd.png');
display: inline-block;
width: 54px;
text-align: center;
background-repeat:no-repeat;
}
You can use this code to get your desire resutl:
kbd {
background: url("kbd.png") no-repeat;
display: inline-block;
font-family: Courier;
min-height: 31px;
min-width: 54px;
font-size: 0.75em;
padding: 6px 0 0;
text-align: center;
}
/*use font size to adjust with the key image and use padding 0px for the left and right after that use text-align to obtain your best result .I have attached an image look it*/
Adding background-size may be your best solution.
background-size:100% 100%;
You can use text-align:center for align your text and on the background image you can use a z-index Property.
have a look here for z-index examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have submit buttons or normal buttons of varying width depending upon their values wrapped inside fixed divs. Now the buttons won't center inside the div even after having margin: 0 auto; and display:block; because of the missing width property. How to have them centered without explicitly setting the width for each button ?
input[type="submit"], .button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
cursor: pointer;
margin: 0 auto !important;
clear: both;
padding: 5px 7px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
Set the input[type="submit"], .button {}
to display: inline-block;. Then set the parent div to text-align: center;.
Buttons are inline elements. Is the display:block necessary for other reasons or does anything speak against generally centering all text/inline-elements within the div?
If not, you could assign text-align:center to the div instead and remove display:block from the button.
As a side note, your current style centers the button in FF12. What browser are you using? Edit: Also works in IE9 (jsfiddle).
http://jsfiddle.net/gSaBj/1/
check out this url....
This css code has troubles for ie7. In ie6 is a total absolute mess.
The problem is that the input textbox gets bellow label.
Only work around is to float the div left but has problems then with sizing..
fieldset.label_side > label {
width: 100px;
position: relative;
float: left;
left: 0;
padding: 18px 20px 8px;
border-right: 1px solid #eee;
clear: left;
line-height: normal;
}
fieldset label{
font-size: 13px;
font-weight: bold;
padding: 15px 20px 10px;
margin-right: 10px;
display: inline-block;
color: #333;
}
fieldset.label_side > div {
width: auto;
margin-left: 140px;
padding: 15px 20px;
border-left: 1px solid #eee;
clear: right;
display: block;
}
.box-block fieldset input{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
input.text{
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border : solid #eee 1px;
background-color: #fbfbfb;
line-height: 32px;
display: inline;
height: 32px;
padding: 0px 0 0 5px;
}
UPDATE
I found that the problem is because of the input width 100%.. I am looking how to fix it.
IE6 and IE7 don't play nice when the display is set to "inline-block";
Try adding the following to your label's CSS rule:
fieldset label{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I would probably have a conditional sheet for IE browsers (usually how I deal with this problem). Here's a site that exlains the problem in better details than I ever could: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
May be you have to write vertical-align:top in your label & input . Write like this:
label, input{
vertical-align:top;
}
One solution that may work (it works for me) is to apply negative margin at input (textbox)... or fixed width for ie7 or to drop ie7 support.
I had the same problem and i hated to have extra divs for border etc!
So here is my solution which seems to work!
You should use a ie7 only stylesheet to avoid the starhacks.
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}