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
Related
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
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)
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 have some trouble putting just simple text over an image in IE. The image has a lower z-index than the text so I am not sure what it can be. I also tried to give the text a relative position rather than a absolute one. But it’s still not working. Has anybody please any ideas??
Thanks
IE doesn't handle z-index as the standard states. The best solution is to put the image as a background-image property to a container (for example a div) and the text inside that div. This way all the browsers recognize the correct order.
The second solution is to place both the img and the span (containing the text) in a div with the following properties:
<div style="position:relative">
<img src="a.jpg" style="position:absolute;" />
<span style="position:absolute">your text here</span>
</div>
Put the image and text in a div container set to 'relative' position.
Set the image to position 'absolute'
The text will appear ontop of the image
To control the text put it in another div and use the margin property to move it.
<div id="container" style="position: relative;">
<img style="position: absolute;" src="#" />
<div id="textcontainer" style="margin: 10px 10px 10px 10px">
Text to float on image here
</div>
</div>
No need for z-index :) Different versions of IE don't like it anyway.
<img src="myimage.jpg" title="Text over image here">
I have a square div that is housing a javascript image slideshow. I incorporated a caption into the slideshow which requires the containing div to be position:relative. I then want text to wrap around this slideshow... is this possible?
My pseudo structure:
<div position:relative>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
How can I wrap text around this?
Damn, it's always AFTER I post for help that I figure it out. Doh.
For those interested, this is my solution (again in pseudo code):
<div position:relative float:left margin-left/bottom:20px>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
<div>this text now wraps</div>`
You need to float the div if you want to wrap text around it.