I am trying to line up an icon with a DIV. I have the following code. This code makes the icon appear to the right of the input which is what I want. But it is just too high. I need to shift the icon down.
<div>
<input name="Password" type="password">
<span style="display: inline-block; margin-top: 9px;" class="ui-icon"></span>
</div>
The ui-icon css looks like this:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
I tried with margin-top but it doesn't work. What I just need is some way to make the icon go down about 5 pixels. Is there something I am missing?
background-position:right center;
remove margin-top: 9px;
You may do it with CSS like this: (use img instead of background span)
vertical-align:middle;
or another way could be to set
position:relative;
float:left;
top:10px;
you may adjust top accordingly.
You want to use the CSS background-position property, you can specify co-ordinates. See:
http://www.w3schools.com/cssref/pr_background-position.asp
Related
I would like to use these picture as a corner for a button. The buttons name is Test with background "#F1F2F2"
How should I create by using CSS?
Please remember that the css code need to adapt to older web browser.
Thanks!
Why not just use css? Border radius would be half the size of the parent element and is supported by IE 9 and above.
<span>hello</span>
span {
display: inline-block;
background: grey;
border-radius: 15px;
height: 30px;
line-height: 30px;
padding: 0 30px;
}
http://jsfiddle.net/dbwL117m/
Otherwise do something like the code below and apply the appropriate css styles.
<span>
<span class="left-image">image here</span>
<span>Text</span>
<span class="right-image>image here</span>
</span>
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
I have a problem with my webpage. I placed a button on top of an image inside a scrollable <div></div>, and this <div></div> is inside the <td></td> of the table. The button on top of image has the following CSS styles:
border:none;
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;
Now the problem is when I scroll down, the button stays on the same position. What I want is when I scroll down the button hides on top together with the image at the same position. How can I make this? Any help would be so much appreciated.
jsFiddle: jsFiddle
The issue that you might be facing is something like positioning. You are position the image position: relative to the div, Not the image. If you wrap the image in a div and then set the position then it will go up too.
However, that is only the issue, try using something like:
<div class="image-div>
<img src="src_to_file.png" alt="photo" />
<button class="button">Button</button>
</div>
You can use this as the css:
.image-div {
position: relative;
}
.button {
position: absolute;
}
Also make sure that .image-div is not the main or parent div, as if it is! The button will float over it, but if the div .image-div is the child, it will slide (scroll).
I have an input field that looks like this:
<input type="submit" value="CONTINUE" name="submit" class="submitButton">
There is a background image on the input that gives it a texture already, so I want to add another background image without overriding the original one.
I have a png of an arrow that needs to display after "CONTINUE" and have tried a few methods to get it on the page including adding an after property in the CSS:
input.submitButton:after{.....}
as well as trying to put a div inside the value (worth a try) and I can't get it to show.
Is there any way to do this without using absolute positioning?
just use the <button> tag
Fiddled here
HTML :
<button type="submit" name="submit" class="submitButton">
Text inside button <span class="spanner">→</span>
</button>
CSS :
.spanner {
background-color:red;
border-left:4px solid green;
}
You may have to set a background with arrow + continue
input.submitButton{
/*background-color: transparent;*/
background-image: url(arrow.png);
background-position: 50% 100%;
/*border: none;
width: ;
height: ;*/
display: inline-block;
padding-right: ;
}
or you can use a position:absolute element with an arrow.
That should do a trick:
input.submitButton{
background: url(arrow.png) 50% 100%;
}
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp