[resolved] CSS z-index (?) Want the 'entry-title' on top of the access div (see link) (8 posts)

  1. AardvarkGirl
    Posted 4 years ago #

    You can see the very bottom of the 'entry-title' (light blue font) going under the blue bar (#access). I tried all kinds of stuff, z-indexes, display:block, position:relative... blah blah blah.


    It's just time to ask for help.

    Why is it I can get the logo/site-title to go DOWN on top of the branding img, but I can't get the title to go UP?

    Did I read wrong, thought that content as it went down was 'closer' (z index) to the viewer - and from there position elements were closer (etc)?

  2. tiofelix
    Posted 4 years ago #

    I've found it. =)

    The problem it's because the "#main" div has an overflow: hidden; on it.

    When you input overflow: hidden; to any div, it doesn't matter if you have floated, positioned or whatever element inside of it, nothing, absolutely nothing will wander outside the div space. Imagine that like a big chainsaw running around the border of the div in infinite loop, hehe.

    If you take it off, it'll work. =)


    Yeah, i noticed that too. It happens because you have floated elements inside the #main div, and they don't add "content-generated-height" to it, thus in this case, creating no height at all.

    It was working with overflow: hidden; because when you apply overflow rule to a div, the browser understands that you'll need a rule to any elements that wander outside, so it somehow wraps up the whole thing.

    Yeah, cool, but how do i solve this?

    Analizing your code, i noticed that the "#content" div ocuppies the same bodyspace as the #main div, so, just put the background on it, and there you go, problem solved. ;)

  3. AardvarkGirl
    Posted 4 years ago #

    I will take a look at this tonight, but let me give you a pre- OMG THANK YOU THANK YOU THANK YOU! :)



  4. tiofelix
    Posted 4 years ago #

    YAY! Cheers! I'm glad i could help ;)

    And chainsaws are always pure fun. Except on web markup languages =(

  5. AardvarkGirl
    Posted 4 years ago #

    overflow:hidden = chainsaw

    I'm thinking I won't forget that css rule any time soon.

    It worked, thanks!

  6. AardvarkGirl
    Posted 4 years ago #

    One more question... mouse over the two drop down items. The first one (riding lessons) is being very finicky. The drop down for 'At The Farm' is working fine.

    Came back to say, figured it out. ;-) The div for the 'entry title' was overlapping it.

  7. tiofelix
    Posted 4 years ago #

    Ahaha yes. And i'm sorry that i didn't had time to come back here =( Things have been quite a storm here in my company.

    Anyway, i'm glad i helped ya. =) Don't forget to change the topic to "resolved" on the right sidebar on this same page.

  8. IceyD
    Posted 4 years ago #

    I'm not sure if this thread is still open, but I ran into the problem where when I take off the overflow:hidden, my background (just plain white) disappears.

    If I add a background to my #content area, it only covers the width of the content, not the sidebar area.

    Here's a link to my site: http://www.iceydesigns.com/blog/

    And help will be greatly appreciated! Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic