CODEWITHSUNDEEP
htmlcss
bodger
bodger

Reputation: 1182

Positioning several text items over an image

What is the easiest way (using css) to position several separate text items over the top of a single image?

I've got the following:-

<div>
    <img src="image.jpg"/>
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

with the CSS:-

div {
    position: relative;
}

div p {
    position: absolute;
    top: 0;
    left: 0;
}

But that doesn't work because all of the text items are on top of one another. Is the best way to do it with a list? Or is there another way?

Upvotes: 1

Views: 51

Answers (2)

kei
kei

Reputation: 20491

DEMO

div { 
    position: relative;
}

div img { 
    position:absolute
}

div p {
    position: relative;
    top: 0;
    left: 0;
    color:#fff;
}

UPDATE

OK, that seems to work - but how do I make sure the text items are all contained within the confines of the image? Is that even possible? Ideally, I'd like to make the text items appear in two parallel lists.

DEMO

You'd need to set the size of the container div to that of the img. From then, you can control how you want to handle the overflow.

You can use float:left; width:50%; on your p so they display in two columns.

Upvotes: 1

drip
drip

Reputation: 12943

Something like this:

div { position:relative; }
div img { position:absolute; top: 0; left: 0; }  
div p { position:relative; z-index: 2; }

But this way the div will take the height of the text, not the image.

Upvotes: 1

Related Questions