i have a simple form with css, and there is a select with this style:
.mysub_item select {
height: 29px;
width: 142px;
background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
border: 0;
font-size: 12px;
font-weight: bold;
color: #4B4B4D;
}
and the text inside that select is always align to the top and left; is there a way that i can move that text?
surprise that IE7, IE8 and IE9 set that text center vertically.
You will just need to add padding to the style and then adjust the height and width accordingly.
e.g.
padding: 5px;
Height now equals your original height - 10px ( 5px padding on the top and bottom )
Width now equals your original width - 10px ( 5px padding on the left and right )
Also as #peduarte suggested, you can add line-height which actually gives the same sort of results as padding.
Add this property to the CSS
text-align:center
try this, may help you
.mysub_item select {
height: 29px;
width: 142px;
background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
border: 0;
font-size: 12px;
font-weight: bold;
color: #4B4B4D;
vertical-align:middle;
line-height:1.8;
}
Change height to height: 22px;
Related
I have an input with a height and width more than regular. And the text starts at the center vertically and overflows to the right when I type in it. How do I make it so the text starts at the top-right corner and doesn't overflow past the width of the input without using JavaScript? I also don't want to use a textarea. Here is my code:
.notesheet {
background-color: rgb(224, 214, 67);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 300px;
border: none;
outline: none;
box-shadow: 0 0 10px #9c9898;
border-radius: 15px;
height: 300px;
width: 500px;
}
<input class="notesheet"></input>
Why not use the <textarea> tag?
you can use attribute resize: none; to prevent user change width and height
eg:
<textarea class="notesheet" rows="30" cols="50"></textarea>
if you are insisted to use input element there is a workaround for that like below:
.notesheet {
... your css goes here
background-color: rgb(224, 214, 67);
position: absolute;
border: none;
outline: none;
box-shadow: 0 0 10px #9c9898;
border-radius: 15px;
width: 500px;
/* the point that i want to make */
padding: 5px 5px 280px 5px;
text-align: right;
}
instead of using height property, you can remove it and use padding to give input padding bottom of something like 280px for making your text aligned to top section of the input. also for aligning it to stick it to the right, you can use text-align: right;.
but overall there is no clear solution in css for input element to act like textarea and wrap your words in it's boundary, or if there is, i don't know it yet!
Here is the code snippet that i tested and modified your code:
http://jsfiddle.net/4xw6urjz/7/
Here is my jsfiddle (without design)
Not able to put space between the search form and menu.
I need, as in the home link have some space before the menu.. the search form need to put some space after the menu.
#search-ams {
background: #FFF none repeat scroll 0% 0%;
border: 1px solid #CACACA;
width: 213px;
height: 24px;
float: right;
padding: 0px;
}
I tried to put padding value.. but if I add padding-right:5px; .. search form moved down in the menu.
Can anyone help me to fix this.
Thanks in advance.
Unfortunately I can't be 100% sure I understand exactly what you're asking, but assuming you just want to put some distance between the menu and the search box, wouldn't simply adding something like:
margin-top: 10px;
To #search-ams do the trick?
Though if this was all you needed, I'm guessing you'd probably have figured that out yourself :)
You can use margin.
margin clears the area around element. We can give top, right, bottom, and left margin to the element.
we can give different margins from different side as:
element{
margin-top: 10px;
margin-bottom: 12px;
margin-right: 15px;
margin-left: 20px;
}
we can use shorthand property:
element{
margin: 10px 15px 12px 20px; <!-- Top,Right,Bottom, Left respectively -->
}
If margin is same from all sides, we can simply give as:
element{
margin: 10px;
}
You can simply use margin to space elements out:
#search-ams {
float: right;
background: #FFF none repeat scroll 0% 0%;
width: 213px;
height: 24px;
border: 1px solid #CACACA;
margin-top: 20px;
margin-right: 20px;
}
JSFiddle
I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.
I have aligned the image to the left of the input box but the writing is overlapping the image. How do I get around this? The image has been aligned to the left just fine, I just need the input text to be aligned to the right of the image now instead of overlapping
CSS
input {
background: url(../../core/images/search.png) no-repeat center left 5px #FFF;
text-align: left;
padding: 5px;
font-family: 'Raleway', sans-serif;
color: #444;
border: 3px solid #FFF;
outline: none;
border-radius: 3px;
margin: -4px 20px;
position: absolute;
width: 270px;
}
HTML
<input type="text" autocomplete="off" name="name">
give padding-left to input according to width of image
Why not to use padding ? Have a look:
padding-left: 65px;
JSFiddle: http://jsfiddle.net/8JLXj/9/
Or text-indent :
text-indent: 65px;
JSFiddle: http://jsfiddle.net/8JLXj/10/
use text-index property:
text-index:(pic\'s width+gap between pics and first letter)px;
or you can also use padding-left:10px; to create the distance from pic.
I am trying to use CSS to position text of a label in the exact center of a control. The CSS below still leaves the text at the top of the label. Any ideas please?
JSFIDDLE
CSS
.plate_well {
float: left;
margin: 0;
padding: 0;
height: 30px;
width: 30px;
text-align: center;
vertical-align: 15px; /* this doesnt do anything ?? */
font-size: 7pt;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
border: 1px solid #AAAAAA;
}
HTML
<label class="plate_well" id="foo">bar</label>
(I also have the issue of IE being unable to render curves but that's a separate question)
You can use line-height: 30px; to center a single line of text instead. The 30px needs to be the same value as the height of the element you wish to vertically center text in.
Note: The fiddle has height:40px whereas the code in question has height:30px. Just choose the line-height to match the height.
vertical-align would actually moving the entire <label> (and text) down but only applies to inline-level and table-cell elements. It is not applying in your case as the <label> is floated.