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.
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/
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.
I have a div and I want to align in the center of that div multiple images. All of the images have the same height and width of 16px. The problem is that I can either center them and have the extra space below but when I use the display:block to remove it, they are aligned to the left again. Here's my code:
div which I want to contain the images:
.cell{
position: relative;
float: left;
width: 300px;
min-height: 22px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
line-height: 22px;
font-family: Arial, Verdana;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: center;
margin-bottom: 2px;
margin-right: 2px;
}
The above class has the properties needed in general.
So I want to create a class for the img elements so that they can be aligned one next to each other and all together aligned horizontally.
Any working suggestions?! :)
Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.
http://jsfiddle.net/B6Jsy/
I used a div as a fake img but it should work the same.
<div class="Image">FIRST</div>
<div class="Image">SECOND</div>
.ImageHolder{
text-align:center;
}
.Image{
display:inline-block;
}
I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this:
To position it, I've used these properties:
#search-form input[type="text"] {
background: url('../images/icons.png') no-repeat left center;
background-position: 0px -30px;
border: 1px solid #a9e2ff;
padding: 3px;
width: 200px;
font-size: 1em;
padding-left: 20px;
}
But the background still appears at the top of the input box rather than aligned in the vertical middle and to the left. I've also tried doing:
background: url('../images/icons.png') no-repeat left middle;
but that doesn't work either.
If it matters, although I'm guessing it doesn't, here's my form markup:
<form action="/search" method="get" id="search-form">
<input type="text" placeholder="Search..." name="s">
</form>
Thanks for any help.
You declared background-position two times. The first one at the end of the background short-hand property, the second one on the next line. Solution: Split all single background rules like this (additionally, 0 -24px is the correct value):
#search-form input[type="text"] {
background-image: url('http://i.stack.imgur.com/MFpLm.png');
background-repeat: no-repeat;
background-position: 0 -24px;
border: 1px solid #a9e2ff;
padding: 3px;
width: 200px;
font-size: 1em;
padding-left: 20px;
}
And now you can face the real problem with your design: other sprites will be visible in the input area if there are no sufficient space between them.
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;