Grow your CSS skills. Land your dream job.

Z-Index ? And Absolute Positioning

  • # November 4, 2012 at 3:23 pm

    So I have two issues:

    (1) You’ll notice a little flag at the top of the site, but when I resize the browser window or change the resolution the flag moves. I want it to stay in one spot.

    (2) The Content-Wrapper (where the photo is) , seems to be taking on the opacity of the layer below it.

    http://www.thesocialdiner.com/guapos_sandbox/guapos_8/main.html

    Any help would be huge !

    Thanks,
    Andrew

    # November 4, 2012 at 5:03 pm

    add position: relative; to #wrapper. That will establish a new formatting context that the absolute positioning of #surf will be relative to (you’ll need to adjust the margins and left settings of #surf). For the second issue, opacity affects all children – there’s no workaround. Remove the opacity from #page-wrap and use a transparent background instead – background-color: rgba (105, 37, 36, 0.9);

    Why are calling the same stylesheet twice? And where’s your doctype?

    # November 4, 2012 at 7:46 pm

    Wolfcry911 That worked perfectly!!! This is great. I can finally move on to my other pages.

    Thanks for noticing the 2nd call, I removed that, and as for doctype (seems my novice shows) I added a doc type too. Any other suggestions I’ll take.

    AND Again thanks you were such a huge help.

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

You must be logged in to reply to this topic.

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