SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    pls help with collapsing container element.....

    http://mayacove.com/dev/rd/nav/nav_sony_sub.html

    how can I prevent my header (top of pg, blue border) to not collapse? this is because nav, inside header, is positioned absolute... I can't stand this.. even if an element is positioned absolute, it still occupies space, no? this is very annoying... ;-)

    (I tried all possible settings for overflow property, none worked.. usu. overflow:hidden works if element inside is floated, but I can't get this to work with element inside being positioned.. it would work if nav were positioned relative; but I can't do that, because then other content gets pushed down when sub-nav items show... oh brother.....)


    thank you....

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you trying to get the blue border around the mobile nav to go away? If so, it's the header that has the border, not the nav. So you can just remove that and take off the margin-top for the regular nav.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    the blue border is just for testing....

    I want the header to NOT COLLAPSE... to WRAP around the nav.... i.e., to CONTAIN the nav.. right now the nav is OUTSIDE the <header>....

    thank you for your response......

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    look at #wrapper (red border) it has a top margin of 20px... but since the <header> collapses... the wrapper is still on top of <header>

    (now it looks slightly different from before... I applied top margin of 20px to <header> instead of to <nav>... to illustrate problem more clearly...)

    :-(


    thank you....

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh i see. Sorry about that.
    Is there a reason for giving it an absolute positioning? It wraps when it you turn it off and the overflow:visible. If you need to move it around, you can just use margins.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes there is.... if I don't set it to absolute, then the main content of the page shifs down when the sub-items show...

    I did take out overflow:visible (that was to set it back to the default, since I have overflow:hidden for the phones...)

    but the <header> (blue border) is still collapsed.....


    (just a note that might be of interest.... this nav was loosely "inspired" from the nav in sony.com... that has been touted in some tutorials as a very good example of responsive design... I wanted to see if I could create a responsive nav without a plugin.. I wanted my own JS code.. the JS code for the nav in sony.com is insane... I think it's this one... http://www.sony.com/static/js/scripts-header.js)

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    position: absolute is pretty miserable to work with for page layout. Other elements don't see the element, so act as if it's not there. You could set a height on the <header>, but I'd just remove the positioning, which is not needed anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes, Ralph, the positioning is needed... if I don't position the <nav> absolute then the content of the rest of the page shifts down when the items in sub-menu show.... i..e, the nav needs to sit "on top" of the rest of the page at all times..... (mouse over any of the elements, you'll see... (this is on desktop version, not phones...) positioning relative makes the <header> behave how I want, but then again, the content of the rest of the page slides down when sub-items appear...

    thank you for your response....

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    first of all , you have a typo:

    Code:
    <div class"clear"></div>
    it should be
    Code:
    <div class="clear"></div>
    it's odd that you would need use a clearing element.. and on a container that holds only one other element?

    Also you have clearing div as the FIRST element in the HEADER, that makes no sense. Clearing elements must be AFTER the element they clear, so that one is superflous

    However what causing teh mess here is your use of AP... ( and some cascading issues)

    AP'ed elements are taken out of the normal flow.

    Code:
    @media only screen 
    and (min-width : 640px){
    ...
    	nav {display:block; width:100%; position:static; /*overflow:visible;*/ margin:0;}
    ...
    }
    this should fix your collapsing issue. If nav was serving in some positioning context, you could also use position:relative instead of position:static.


    hope that helps

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    I don't position the <nav> absolute then the content of the rest of the page shifts down when the items in sub-menu show...
    In that case, the set the top level links or list items to position: relative and set the dropdown ULs to position: absolute to position them in relation to those top level links. That's the standard drowpdown setup. You don't need or want pos: absolute on the main menu itself.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh -- I used to have two elements there..;-) forgot to remove the "clear" div...
    thanks for pointing out error in that tag, though....
    (I once read that when you forget a "=" in a tag like that FF autom. adds it (not sure about other browsers...;-)

    position:static doesn't work..... again, main content of page shifts down when you mouse over links in nav..

    thank you for your help, Ralph.. I gotta check out for the night.......

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said you need to do this:

    Code:
    nav{overflow:visible}
    nav ul#top li{position:relative}
    nav ul#top ul {position:absolute;top:100%;}
    nav ul#top ul ul{top:0}
    Just paste that code after your nav code and you will see it works without pushing the content down and your sub sub menus will also fly out in the correct place.

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you... that worked!!! :-)

    now I have these two versions....

    http://mayacove.com/dev/rd/nav/nav_sony_sub.html
    http://mayacove.com/dev/rd/nav/nav_sony_sub2.html

    :-)

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you still having problems or just testing as things seem to have changed since I gave the fix?

    You seem to have two versions running in that last page (sub2.html); one js and one css version. It looks like you have removed the code to hide the menu initially so you will need this:

    Code:
    nav ul li ul,nav ul li ul ul {margin-left:-999em}
    nav ul li:hover > ul{margin-left:0}

  15. #15
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Paul...

    I exposed the sub-menus just so you can see.....;-)

    this just a learning exercise.... I just wanted to show the two versions I have now...;-)
    I wanted to continue playing around with this over the weekend, but I got a last minute job for the weekend and I had to put this on the back burner...

    thank you very much Paul, you've been very helpful.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •