I am trying to add text "Post" in the center of Div on top of image , but it adds next to the image:
HTML:
<div id="Post">
<span class="Post">Post
<img src="images/ask_post.png" />
</span>
</div>
CSS:
#Post {
position:absolute;
background-image:url('../images/ask_post.png') no-repeat;
left:741px;
top:157px;
}
First remove the image from the div element, the text wont go on top of that image, only the background. Second, play around with the background properties until it looks like you want it to.
My guess is that you need to adjust the background-size or background-position.
<div id="Post">
<span class="Post">Post</span>
</span>
See if background-size:cover; is what you need. You'll probably also have to adjust the height and width of the div to get what you want.
It looks like you are calling the image twice. Once in the css and again in the div. Remove
Related
I have an image and one div.I want "text2" to come under "text1" .WHen I add clearfix the "text2" come under image .
I know that I can use "br" but is possible to have same effects without"<br>"
DEMO
Do you want text over image ?
if so you could use something position relative on div and position absolute on text, if text is still under image you can use z-index: 999 if you want to force text over image
Just add float: left to your child div element, like this:
<div>
<img src="http://lorempixel.com/100/80/" style="float:left">
<div style="float:left">
<span>TEXT1</span>
<div class="clear"></div>
<span>TEXT2</span>
</div>
</div>
Online example
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
So i have one div and inside i have img tag. SO what i would like to do is put that div background on top of img, i know i could use another div with absolute position to do that but maybe it's possible to do it with only 1 div?
This is my code:
<div id="container">
<img src="image.jpg" />
</div>
EDIT Sorry for explaining it all wrong, but i want to background over the image, and from what i can see right now it's not possible without extra div.
Simply put, you can't with that code.
The best you could do is use some positioning and z-index properties within a single div.
<div id="container">
<div id="cover"></div>
<img src="image.jpg" />
</div>
Then use CSS to move the cover div above the image.
You can use css to attach the background for div like
background: url(images/myimage.png) no-repeat center top;
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/
I would like to vertically align some text and an image in a CSS box.
I tried several methods, here is the code for the last one I tried called "display:table-cell-method"
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img src="images/stopwatch-button-play.png">
</div>
Here is a screenshot of the result in the newest version of Firefox: http://screencast.com/t/Yzg2MzAzNW
The image is centered correctly, the text is only centered nearly correctly. It sits at the baseline of the image. Why?
vertical alignment is thoroughly misunderstood. Have you read this?
as for why the text sites at the baseline of the image, it is because the image and the text are both in the flow of the div. they will not overlap. to have the text centered too (implying it lies over the image), you will have to put the text into a div or a span and adjust its positioning (set it to relative and experiment with left and top).
Cheers
change the following
<div style="border-color:blue; height:200px; display:table-cell; vertical-align:middle;">
2:38<img style="vertical-align:middle" src="images/stopwatch-button-play.png">
</div>
You can use the background-position property.
it looks like this.
background: url(path/to/image.whatever) top; //aligns it to the top.
you can even do something like top left or top right etc.
w3schools has everything you need to know about backgrounds.
If your text is only one line high, you can set line-height to the height of your image. It will center the text vertically. Then position:absolute on your image will prevent it from disturbing the positioning of the text in the div:
<div style="border-color:blue; height:200px; ">
<div style="line-height:30px;margin-top:85px">2:38<img style="position:absolute" src="images/stopwatch-button-play.png"></div>
</div>