SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question nested ul navigation with image replacement problem

    Hello,

    I'd like to get some tips/advice on a nested unordered list navigation I'm working on.

    I'm using replacement images and rollovers (without preload), this works perfectly but I get into problems when the subnav shows up. I've been busting my brain on a way to handle this.

    Please take a look to the following page.

    http://socket-error.com/navprobs/

    The first page shows a working nav without subnav.
    Clicking on one of the links takes you to the page where an image is shown of how it should look with a subnav.

    Any tips/pointers on how I should handle this would be greatly appreciated.

    Thank you,
    Bert

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

    I'm not sure I see what the problem is. Surely you just add all the submneus to the main list and then reveal them on the relavent page (display:block etc). Just give each submenu an id so that you can reveal the relevant one on the correct page.

    You could give the body an id on each sub mneu page so that you don't need to change any other html.
    e.g.
    Code:
    body#active1 #mainnav ul ul#id1 {display:block}
    body#active2 #mainnav ul ul#id2 {display:block}
    html
    Code:
    <body id="active1">
    Or something like that

    You will of course style the sumbmenu as you see fit and place them accordingly where you want them.

    I'm not sure if thats what you were asking anyway

    Paul

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I'm not sure I see what the problem is. Surely you just add all the submneus to the main list and then reveal them on the relavent page (display:block etc). Just give each submenu an id so that you can reveal the relevant one on the correct page.

    You could give the body an id on each sub mneu page so that you don't need to change any other html.
    ...
    Thanks for the reply Paul.
    The UL is created with included PHP, so subnavs only appear when needed.
    My problem is that IF there is a submenu on a page, I don't know how to style it so it will show as in the picture I put on the site.
    All my efforts so far have had very different results on different browsers and NOT ONE comes close to what I'd like it to do. (As long as no submenus are involved the menu renders perfectly in all browsers I've tested it in, PC and Mac)

    This is the best I've gotten so far:
    http://socket-error.com/navprobs/3.html
    This doesn't work AT ALL in ie 5.01 PC. On ie 5.2 Mac there's an very big gap after the subnav,etc.
    To get this far I also had to dump
    Code:
    body#info #minfo, body#info #minfo a {background: transparent url(images/nav/info.gif) 0 -25px no-repeat;}
    this made sure the active item was in the rollover-state and change it into
    Code:
    body#info #minfo {background: transparent url(images/nav/info.gif) 0 -25px no-repeat;}
    So now the item seems to have the rollover as a background but the normal state (darker color) is on top.

    It's really bothering me... it's bothering me so hard that I'm actually thinking on putting the navigation in a table (in a complete tableless CSS website )

    I hope I made myself a bit clearer now.
    Thanks,
    Bert
    Last edited by bertalizer; May 27, 2004 at 14:13.

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

    I've only had a quick look but for ie if you set height 5px it won't obey it as it will render the line-hight at the current font-size. Therefore you need to add overflow hidden.

    In ie5 you have to take account of the broken box model so any padding will need to be added to the height for ie5 and 5.5. and hidden from ie6 and other browsers in the usual way.

    here are few changes that make it render a bit better:
    Code:
    body#info #minfo {background: transparent url(http://socket-error.com/navprobs/images/nav/info.gif) 0 -25px no-repeat; }
    ul#subnav {margin: 0;padding:0;display:block;z-index:99;}
    ul#subnav li {margin:0;padding:1px 0 5px 0;height:5px;width: 155px;list-style: none;overflow:hidden}
    * html ul#subnav li {height:11px;he\ight:5px}
    ul#subnav li a {height: 5px;display: block;overflow:hidden}
    html>body #mcontact {margin-top:33px}

    Heres all the css in case you cant see where to put them.:
    Code:
    <style type="text/css">
    #mainnav {background:#efc;}
    ul#nav {margin: 0;padding:0; display:block;}
    ul#nav li {margin: 0;padding: 0;height: 24px;width: 155px;list-style: none;}
    ul#nav li a {height: 24px;display: block;}
    ul#nav li a {text-indent: -9999px;text-decoration: none;}
    /* hide subnav for now */
    ul#subnav {margin: 0;padding:0;display:block;position:relative;z-index:99;}
    ul#subnav li {margin:0;padding:1px 0 5px 0;height:5px;width: 155px;list-style: none;overflow:hidden}
    * html ul#subnav li {height:11px;he\ight:5px}
    ul#subnav li a {height: 5px;display: block;overflow:hidden}
    ul#subnav a {text-indent: -9999px;text-decoration: none;}
    /* navigationbuttons */
    #mhome a {background: transparent url(http://socket-error.com/navprobs/images/nav/home.gif) no-repeat top right;}
    #mnieuws a {background: transparent url(http://socket-error.com/navprobs/images/nav/nieuws.gif) no-repeat top right;}
    #mprog a {background: transparent url(http://socket-error.com/navprobs/images/nav/prog.gif) no-repeat top right;}
    #minfo a {background: transparent url(http://socket-error.com/navprobs/images/nav/info.gif) no-repeat top right;}
    #mcontact a {background: transparent url(http://socket-error.com/navprobs/images/nav/contact.gif) no-repeat top right;}
    #mlinks a {background: transparent url(http://socket-error.com/navprobs/images/nav/links.gif) no-repeat top right;}
    #mtickets a {background: transparent url(http://socket-error.com/navprobs/images/nav/tickets.gif) no-repeat top right;}
    #mpers a {background: transparent url(http://socket-error.com/navprobs/images/nav/pers.gif) no-repeat top right;}
    #minfrastr a {background: transparent url(http://socket-error.com/navprobs/images/nav/infra.gif) no-repeat top right;}
    /*subnavbuttons*/
    #smprijs a {background: transparent url(http://socket-error.com/navprobs/ima.../s/prijzen.gif) no-repeat top right;}
    #smpublieksw a {background: transparent url(http://socket-error.com/navprobs/ima.../publieksw.gif) no-repeat top right;}
    #smarrang a {background: transparent url(http://socket-error.com/navprobs/ima...v/s/arrang.gif) no-repeat top right;}
    /* rollovers */
    #mhome a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/home.gif) 0 -25px no-repeat;}
    #mnieuws a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/nieuws.gif) 0 -25px no-repeat;}
    #mprog a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/prog.gif) 0px -25px no-repeat;}
    #minfo a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/info.gif) 0 -25px no-repeat;}
    #mcontact a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/contact.gif) 0 -25px no-repeat;}
    #mlinks a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/links.gif) 0 -25px no-repeat;}
    #mtickets a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/tickets.gif) 0 -25px no-repeat;}
    #mpers a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/pers.gif) 0 -25px no-repeat;}
    #minfrastr a:hover {background: transparent url(http://socket-error.com/navprobs/images/nav/infra.gif) 0 -25px no-repeat;}
    /*subnav rollovers*/
    #smprijs a:hover {background: transparent url(http://socket-error.com/navprobs/ima.../s/prijzen.gif) 0 -6px no-repeat;}
    #smpublieksw a:hover {background: transparent url(http://socket-error.com/navprobs/ima.../publieksw.gif) 0 -6px no-repeat;}
    #smarrang a:hover {background: transparent url(http://socket-error.com/navprobs/ima...v/s/arrang.gif) 0 -6px no-repeat;}
    /* active nav-item via body id */ 
    /* double rule otherwhise ie5.01 PC f#cks up */
    body#home #mhome {background: transparent url(http://socket-error.com/navprobs/images/nav/home.gif) 0 -25px no-repeat;}
    body#nieuws #mnieuws {background: transparent url(http://socket-error.com/navprobs/images/nav/nieuws.gif) 0 -25px no-repeat;}
    body#programma #mprog {background: transparent url(http://socket-error.com/navprobs/images/nav/prog.gif) 0px -25px no-repeat;}
    body#info #minfo {background: transparent url(http://socket-error.com/navprobs/images/nav/info.gif) 0 -25px no-repeat; }
    body#contact #mcontact {background: transparent url(http://socket-error.com/navprobs/images/nav/contact.gif) 0 -25px no-repeat;}
    html>body #mcontact {margin-top:33px}
    body#links #mlinks {background: transparent url(http://socket-error.com/navprobs/images/nav/links.gif) 0 -25px no-repeat;}
    body#tickets #mtickets {background: transparent url(http://socket-error.com/navprobs/images/nav/tickets.gif) 0 -25px no-repeat;}
    body#pers #mpers {background: transparent url(http://socket-error.com/navprobs/images/nav/pers.gif) 0 -25px no-repeat;}
    body#infrastructuur #minfrastr {background: transparent url(http://socket-error.com/navprobs/images/nav/infra.gif) 0 -25px no-repeat;}
    </style>
    It might help you along a bit

    Paul

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks soooooo much Paul!
    I knew I was missing something. We are finally getting somewhere!

    http://socket-error.com/navprobs/5.html

    Only 2 problems left:

    Ie 5.01 PC doesn't show the active state images. It looks like Ie 5 only wants to show positioned background images on HOVER...

    Subnav doesn't work in Internet Explorer on Mac. (does not show the subnav images, but leaves the space)... Strange.

    Thanks again!
    B.
    Last edited by bertalizer; May 28, 2004 at 06:28.

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

    I heven't got my mac running at the moment so I can't check it out for you.

    Regarding active links in ie5 I've read that it is better not to style active links for explorer for various reasons and this is probably one of them.

    http://www.ericmeyeroncss.com/bonus/proj04-excerpt.html

    Paul

  7. #7
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Regarding active links in ie5 I've read that it is better not to style active links for explorer for various reasons and this is probably one of them.
    I'm not realy styling a:active, I'm just creating a visual hint to where the visitor of the site is. Current page gets class "active".

    Thanks again for your help,
    Bert

  8. #8
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ve fixed the image problem by using a separate (unpositioned) image for the "active" state.

    Only problem I ve got now is that the subnav isnt showing on MAC IE5.1/5.2....

    Hint/tips are appreciated!
    Thanks,
    B.

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

    I think the overflow:hidden may be having something to do with mac hiding the submenu.

    Try adding this code and see if it makes any difference.

    Code:
    ul#subnav li {margin:0;padding:1px 0 5px 0;height:5px;width:155px;list-style: none;overflow:hidden}
    *html ul#subnav li {height:11px;he\ight:5px}
    *>html ul#subnav li {overflow:visible}
    ul#subnav li a {height: 5px;display: block;overflow:hidden}
    *>html ul#subnav li a {overflow:visible}
    
    Paul

  10. #10
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I think the overflow:hidden may be having something to do with mac hiding the submenu.
    Thank you thank you thank you Paul! You really made my day. That navigation was bugging me for a couple of days now...

    Overflow:hidden it was!
    I've removed it, that gave me some problems in IE on PC, but I solved that by changing the font-size for the subnav to 4px (text not visible, so who cares )

    But IE 5 on Mac still isn't my friend as there is a serious gap under the subnav (I'm guessing its the html>body#info #minfo {margin-bottom:50px} that get's measured from the wrong position)
    [EDIT] Changing
    html>body#info #minfo {margin-bottom:50px} to
    html>body#info #mcontact {margin-top:50px}
    doesn't help either


    Thanks again!
    Bert
    Last edited by bertalizer; May 30, 2004 at 02:19.

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

    Use the commented bckslash as follows to hide the margin from ie5 mac.
    Code:
    /* commented backslash hack  \*/ 
    html>body#info #minfo {margin-bottom:50px}
    /* end hack */
    That should get rid of the gap.

    Paul

  12. #12
    SitePoint Member
    Join Date
    May 2004
    Location
    Ghent- Belgium
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU Paul!
    The hack did the trick!
    Your help is GREATLY appreciated, I've learned alot!

    thanks,
    Bert


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
  •