Grow your CSS skills. Land your dream job.

Nested Divs and CSS

  • # May 20, 2013 at 10:48 pm

    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?

    # May 20, 2013 at 11:33 pm

    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/

    # May 21, 2013 at 5:18 am

    >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

    # May 21, 2013 at 8:09 am

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

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

    # May 21, 2013 at 12:22 pm

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

    # May 21, 2013 at 12:49 pm

    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?

    # May 21, 2013 at 1:07 pm

    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/

    # May 21, 2013 at 4:00 pm

    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.

    # May 21, 2013 at 7:14 pm

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".