Nested Divs and CSS

[camdixon]

Hi, I have a div, which I linked an image in. It’s a large image and feature of the site.
I wanted to make some text overlay, and have a background color that is different.

I am using nested Divs here to try and make the effect, the text and the background color that fills the second div is overlaying on top of the image. How can I use css to make sure my div with text in it sits on top of the first div containing the image?

[iDev]

From what I understood, Id make a span tag for the text and set it to absolute while the parent element has a position of relative.

jsfiddle example here: http://jsfiddle.net/iDev/nCfbe/

[Paulie_D]

>I am using nested Divs here to try and make the effect

To be honest this sounds more like a structure problem than anything else.

Is there a reason you couldn’t make the large image a background image instead of being inline. I think this would simplify things greatly.

I’d like to see an link to the site or a reduced case in Codepen

[Paulie_D]

However, here’s one way using `figure` & `figcaption` elements and positioning as mentioned by iDev

http://codepen.io/anon/pen/Jbasj

[camdixon]

Awesome, thanks guys. That’s exactly what I meant.

[camdixon]

Ok, second question, which shouldn’t be hard but it doesn’t seem to be working.

You linked : [http://jsfiddle.net/nCfbe/5/](http://jsfiddle.net/nCfbe/5/ “”)

In your example you had only one span, and it worked. I want to style my lines of text differently within the span. So I thought, Ok, make multiple spans. But when I added a second span to that code you linked on jsfiddle it would only show 1 span at a time. How can I get it to show multiple ones so I can style the text differently?

[wolfcry911]

Only one shows because they’re being stacked on one another with the absolute positioning. A simple fix is to position a container and use spans within the container to style the different text.
http://jsfiddle.net/BpGQp/

[camdixon]

http://firetree.dyndns-server.com/cam/pic/cssTricks.JPG

This is what I’m trying to achieve. It’s just an image in photo shop of the specific section of what we are talking about.

So, I checked out your example, and I see how you did it. I have my code setup that way now, but I noticed in practice your max width is important. It is important because it moves the text to the next line. Since I need mine to be on a new line and I need width to be 100% should I use [p] tags instead of [span] tags inside the structure you sent me wolfcry911?

note: wouldn’t let me use <> tags like in html because it interprets them.

[wolfcry911]

It wasn’t my example, it was just a fork of iDev. If you had shown your image to begin with we could have saved some time…

http://codepen.io/wolfcry911/pen/yIGou

[Author]

Posts