CSS - horizontal suckerfish problem

Discussion in 'HTML' started by z, Nov 3, 2006.

  1. z

    z Guest

    I'm trying to make a horizontal dropdown menu in CSS something like this:
    http://www.weblens.org/templates/sample_menu.html

    The difference is that I want the secondary menu items to always be flush
    with the left side, not starting under the parent list item.

    Instead of:

    Item1....Item2....Item3
    ...................Item3-sub1....item3-sub2

    I want it like this:

    Item1....Item2....Item3
    Item3-sub1....item3-sub2

    (Periods added in the above example to make sure that the spacing is correct
    if you are viewing it in a monospace font.)

    Is there a way to do this in CSS?
    z, Nov 3, 2006
    #1
    1. Advertising

  2. z

    dorayme Guest

    In article <>,
    z <> wrote:

    > I'm trying to make a horizontal dropdown menu in CSS something like this:
    > http://www.weblens.org/templates/sample_menu.html
    >
    > The difference is that I want the secondary menu items to always be flush
    > with the left side, not starting under the parent list item.
    >
    > Instead of:
    >
    > Item1....Item2....Item3
    > ..................Item3-sub1....item3-sub2
    >
    > I want it like this:
    >
    > Item1....Item2....Item3
    > Item3-sub1....item3-sub2
    >
    > (Periods added in the above example to make sure that the spacing is correct
    > if you are viewing it in a monospace font.)
    >
    > Is there a way to do this in CSS?


    I took a quick look, could not find any css for your class
    "inner" and then noticed that the sub menus were disappearing
    unexpectedly in Safari while the mouse was over them... and gave
    up for now.

    --
    dorayme
    dorayme, Nov 3, 2006
    #2
    1. Advertising

  3. z

    Ben C Guest

    On 2006-11-03, z <> wrote:
    > I'm trying to make a horizontal dropdown menu in CSS something like this:
    > http://www.weblens.org/templates/sample_menu.html
    >
    > The difference is that I want the secondary menu items to always be flush
    > with the left side, not starting under the parent list item.
    >
    > Instead of:
    >
    > Item1....Item2....Item3
    > ..................Item3-sub1....item3-sub2
    >
    > I want it like this:
    >
    > Item1....Item2....Item3
    > Item3-sub1....item3-sub2
    >
    > (Periods added in the above example to make sure that the spacing is correct
    > if you are viewing it in a monospace font.)
    >
    > Is there a way to do this in CSS?


    Of course, there are many ways.

    It can be achieved with two small changes to the example you posted.

    1. Get rid of position: relative from the selector for #mainMenu li

    This changes the containing block of the ul.inner from the li above it
    to what is now the nearest positioned ancestor which looks like
    #mainMenu. #mainMenu is a normal block-level element with its outer
    margin edge aligned to the left of its container (the body), not a float
    some distance across the page, so this gives us a suitable reference
    point for positioning the pop-ups to the left side.

    2. Change left: auto in the selector #mainMenu li>ul to left: 0

    left: auto here means "go roughly where you would have gone if you'd
    been normal flow rather than positioned", which is aligned to the left
    of the parent list item since, if we'd been normal flow, the parent list
    item would have been our containing block. That's not where we want to
    be though, we want to be 0px from the left of our container (now that
    we've made our container #mainMenu). So we just change auto to 0.
    Ben C, Nov 3, 2006
    #3
  4. z

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2006-11-03, z <> wrote:
    > > I'm trying to make a horizontal dropdown menu in CSS something like this:
    > > http://www.weblens.org/templates/sample_menu.html
    > >
    > > The difference is that I want the secondary menu items to always be flush
    > > with the left side, not starting under the parent list item.
    > >
    > > Instead of:
    > >
    > > Item1....Item2....Item3
    > > ..................Item3-sub1....item3-sub2
    > >
    > > I want it like this:
    > >
    > > Item1....Item2....Item3
    > > Item3-sub1....item3-sub2
    > >


    > > Is there a way to do this in CSS?

    >
    > Of course, there are many ways.
    >
    > It can be achieved with two small changes to the example you posted.
    >
    > 1. Get rid of position: relative from the selector for #mainMenu li
    >


    > 2. Change left: auto in the selector #mainMenu li>ul to left: 0
    >



    Well done Ben.

    There is a most amusing effect (unaffected by Ben's fix for the
    submenu) to be seen from
    <http://www.weblens.org/templates/sample_menu.html> in iCab. For
    all you Mac users, take a look and see if you can keep up with
    the marching-down-the-page-menu-bar! Now this is something I
    don't think I have ever seen before. Very dynamic!

    --
    dorayme
    dorayme, Nov 3, 2006
    #4
  5. z

    z Guest

    Ben C wrote:

    > On 2006-11-03, z <z> wrote:


    >> Is there a way to do this in CSS?

    >
    > Of course, there are many ways.
    >
    > It can be achieved with two small changes to the example you posted.
    >
    > 1. Get rid of position: relative from the selector for #mainMenu li
    >
    > This changes the containing block of the ul.inner from the li above it
    > to what is now the nearest positioned ancestor which looks like
    > #mainMenu. #mainMenu is a normal block-level element with its outer
    > margin edge aligned to the left of its container (the body), not a float
    > some distance across the page, so this gives us a suitable reference
    > point for positioning the pop-ups to the left side.
    >
    > 2. Change left: auto in the selector #mainMenu li>ul to left: 0
    >
    > left: auto here means "go roughly where you would have gone if you'd
    > been normal flow rather than positioned", which is aligned to the left
    > of the parent list item since, if we'd been normal flow, the parent list
    > item would have been our containing block. That's not where we want to
    > be though, we want to be 0px from the left of our container (now that
    > we've made our container #mainMenu). So we just change auto to 0.


    That worked perfectly. Thanks.
    z, Nov 6, 2006
    #5
  6. z

    z Guest

    Ben C wrote:



    >> Is there a way to do this in CSS?

    >
    > Of course, there are many ways.


    One more question... is there a way to put a green line below the top part
    of the menu, and have the lower dropdowns appear below the green line?
    z, Nov 6, 2006
    #6
  7. z

    Ben C Guest

    On 2006-11-06, z <> wrote:
    > Ben C wrote:
    >
    >
    >
    >>> Is there a way to do this in CSS?

    >>
    >> Of course, there are many ways.

    >
    > One more question... is there a way to put a green line below the top part
    > of the menu, and have the lower dropdowns appear below the green line?


    Of course, there are many ways.

    I've lost track of your original example, but couldn't you just put
    something like border-bottom: 2px solid green on the top part?
    Ben C, Nov 6, 2006
    #7
  8. z

    z Guest

    Ben C wrote:

    > On 2006-11-06, z <> wrote:
    >> Ben C wrote:
    >>
    >>
    >>
    >>>> Is there a way to do this in CSS?
    >>>
    >>> Of course, there are many ways.

    >>
    >> One more question... is there a way to put a green line below the top
    >> part of the menu, and have the lower dropdowns appear below the green
    >> line?

    >
    > Of course, there are many ways.
    >
    > I've lost track of your original example, but couldn't you just put
    > something like border-bottom: 2px solid green on the top part?



    I was trying something like this but it isn't working. The border appears
    to the right of everything.
    ul#nav {
    border-bottom: 3px solid green;
    }

    My version has all the borders removed, with grey on white text for
    everything.

    Complicated... I'm also trying to put a list-style-image next to only the
    top-level items. Haven't been successful with that either.
    z, Nov 6, 2006
    #8
  9. z

    Ben C Guest

    On 2006-11-06, z <> wrote:
    > Ben C wrote:
    >
    >> On 2006-11-06, z <> wrote:

    [snip]
    >>> One more question... is there a way to put a green line below the top
    >>> part of the menu, and have the lower dropdowns appear below the green
    >>> line?

    >>
    >> Of course, there are many ways.
    >>
    >> I've lost track of your original example, but couldn't you just put
    >> something like border-bottom: 2px solid green on the top part?

    >
    >
    > I was trying something like this but it isn't working. The border appears
    > to the right of everything.
    > ul#nav {
    > border-bottom: 3px solid green;
    > }


    It's because the <li>s inside the <ul> are floats, so they don't
    contribute to the <ul>'s height, which is auto and computes as zero. The
    border sticks out a bit at the right, for the rest of its length it's
    obscured by the "Menu Option" boxes.

    If you make ul#nav also float: left, it becomes the "block formatting
    context root" for the <li>s and so grows in height to fit them, resulting
    in the border being in the right place.

    This may not be the best solution in your case though. You'll need to
    post a link to your current version.

    > My version has all the borders removed, with grey on white text for
    > everything.
    >
    > Complicated... I'm also trying to put a list-style-image next to only the
    > top-level items. Haven't been successful with that either.


    It should work, but it's up to browser exactly where the list item image
    goes. Usually a few pixels off to the left.
    Ben C, Nov 6, 2006
    #9
  10. z

    z Guest

    Ben C wrote:

    > On 2006-11-06, z <z> wrote:


    >> I was trying something like this but it isn't working. The border
    >> appears to the right of everything.
    >> ul#nav {
    >> border-bottom: 3px solid green;
    >> }

    >
    > It's because the <li>s inside the <ul> are floats, so they don't
    > contribute to the <ul>'s height, which is auto and computes as zero. The
    > border sticks out a bit at the right, for the rest of its length it's
    > obscured by the "Menu Option" boxes.
    >
    > If you make ul#nav also float: left, it becomes the "block formatting
    > context root" for the <li>s and so grows in height to fit them, resulting
    > in the border being in the right place.
    >
    > This may not be the best solution in your case though. You'll need to
    > post a link to your current version.
    >
    >> My version has all the borders removed, with grey on white text for
    >> everything.
    >>
    >> Complicated... I'm also trying to put a list-style-image next to only
    >> the
    >> top-level items. Haven't been successful with that either.

    >
    > It should work, but it's up to browser exactly where the list item image
    > goes. Usually a few pixels off to the left.


    You are a CSS genius. The float:left works -- although the rollovers cover
    up the border. I am getting inspired to study more advanced CSS.

    I'll put a working version online and post the link.

    Thanks
    z, Nov 6, 2006
    #10
  11. z

    z Guest

    Ben C wrote:

    > On 2006-11-06, z <> wrote:
    >> Ben C wrote:
    >>
    >>> On 2006-11-06, z <> wrote:

    > [snip]
    >>>> One more question... is there a way to put a green line below the top
    >>>> part of the menu, and have the lower dropdowns appear below the green
    >>>> line?
    >>>
    >>> Of course, there are many ways.
    >>>
    >>> I've lost track of your original example, but couldn't you just put
    >>> something like border-bottom: 2px solid green on the top part?

    >>
    >>
    >> I was trying something like this but it isn't working. The border
    >> appears to the right of everything.
    >> ul#nav {
    >> border-bottom: 3px solid green;
    >> }

    >
    > It's because the <li>s inside the <ul> are floats, so they don't
    > contribute to the <ul>'s height, which is auto and computes as zero. The
    > border sticks out a bit at the right, for the rest of its length it's
    > obscured by the "Menu Option" boxes.
    >
    > If you make ul#nav also float: left, it becomes the "block formatting
    > context root" for the <li>s and so grows in height to fit them, resulting
    > in the border being in the right place.
    >
    > This may not be the best solution in your case though. You'll need to
    > post a link to your current version.


    I don't have a server that I can post it on at the moment. Here is the
    entire file though: http://pastebin.ca/raw/241965

    Unfortunately the green line gets obscured by the dropdowns. I don't know
    if there is a way around that. The list-style-image that I added didn't
    seem to work either.

    Other than that, it almost looks exactly right. Also need to look into how
    to make a delay for the dropdowns with JavaScript if that is possible. So
    that when the mouse leaves the sub-menus, there is a momentary delay before
    they disappear.
    z, Nov 6, 2006
    #11
  12. z

    Ben C Guest

    On 2006-11-06, z <> wrote:
    [snip]
    > I don't have a server that I can post it on at the moment. Here is the
    > entire file though: http://pastebin.ca/raw/241965
    >
    > Unfortunately the green line gets obscured by the dropdowns. I don't know
    > if there is a way around that.


    Just add a margin-top to #mainMenu li ul.

    > The list-style-image that I added didn't seem to work either.


    You don't see the bullets at all, or you see them, but they're in the
    wrong place?

    > Other than that, it almost looks exactly right. Also need to look
    > into how to make a delay for the dropdowns with JavaScript if that is
    > possible. So that when the mouse leaves the sub-menus, there is a
    > momentary delay before they disappear.


    Should be able to do that with onmouseout and setTimeout.

    A quite nice way to do that kind of thing is rather than set individual
    styles in the JS, just change classes.

    So where you've now got descendent selectors involving :hover, instead
    have

    ul.visible
    {
    display: block;
    etc.
    }

    ul.invisible
    {
    display: none;
    }

    Then use onmouseover and onmouseout to change the class attributes of
    the elements you're controlling to visible or invisible.

    I think it's something like node.setAttribute("class", "visible");

    This way all the styling information stays in the CSS, the JS just turns
    it on and off.
    Ben C, Nov 7, 2006
    #12
  13. z

    z Guest

    Ben C wrote:

    > On 2006-11-06, z <> wrote:
    > [snip]
    >> I don't have a server that I can post it on at the moment. Here is the
    >> entire file though: http://pastebin.ca/raw/241965
    >>
    >> Unfortunately the green line gets obscured by the dropdowns. I don't
    >> know if there is a way around that.

    >
    > Just add a margin-top to #mainMenu li ul.


    I had tried that, but I think I put it in the wrong place. I went with
    padding-top in the end to keep the menu from disappearing.


    >> The list-style-image that I added didn't seem to work either.

    >
    > You don't see the bullets at all, or you see them, but they're in the
    > wrong place?


    I see the bullets, but they are too far to the left of the list items, and
    overlapping with the <li>s to the left. I tried list-style-position:
    inside;, but that just put the list items on a line below the bullets.
    I'm reading about another way to remove the list-style-image and use a
    background image, but haven't tried it yet.


    >> Other than that, it almost looks exactly right. Also need to look
    >> into how to make a delay for the dropdowns with JavaScript if that is
    >> possible. So that when the mouse leaves the sub-menus, there is a
    >> momentary delay before they disappear.

    >
    > Should be able to do that with onmouseout and setTimeout.
    >
    > A quite nice way to do that kind of thing is rather than set individual
    > styles in the JS, just change classes.


    I'll look into that.

    Thanks for your help. This is the most difficult thing I've ever tried to
    do in CSS. I wouldn't have thought it possible. I am impressed with your
    knowledge of CSS. Is there a book on CSS that you could recommend that
    would explain these things clearly? I have a couple of CSS books already,
    but not impressed with them. I like computer books that get to the point
    really fast.
    z, Nov 7, 2006
    #13
  14. z

    Ben C Guest

    On 2006-11-07, z <> wrote:
    > Ben C wrote:
    >
    >> On 2006-11-06, z <> wrote:

    [snip]
    >>> The list-style-image that I added didn't seem to work either.

    >>
    >> You don't see the bullets at all, or you see them, but they're in the
    >> wrong place?

    >
    > I see the bullets, but they are too far to the left of the list items, and
    > overlapping with the <li>s to the left.


    Understandable-- the browser just offsets the bullets to the left of the
    list items. This works OK most of the time, but not if the list items
    are floated.

    > I tried list-style-position: inside;, but that just put the list items
    > on a line below the bullets.


    Interesting, I suppose it didn't float them. One way to implement
    list-style-position: inside is for the browser to pretend the bullets
    were display: inline and insert them before the list item content. That
    might account for the behaviour you're seeing. Anyway, it's not
    something you can control precisely.

    > I'm reading about another way to remove the list-style-image and use a
    > background image, but haven't tried it yet.


    That sounds like a better approach. You could give them a bit of left
    padding and a background image positioned at the left.

    [snip]
    > Thanks for your help. This is the most difficult thing I've ever
    > tried to do in CSS. I wouldn't have thought it possible. I am
    > impressed with your knowledge of CSS. Is there a book on CSS that you
    > could recommend that would explain these things clearly? I have a
    > couple of CSS books already, but not impressed with them. I like
    > computer books that get to the point really fast.


    I don't know of any, but I'm sure there are good books. I just read the
    CSS 2.1 spec, which is clear, comes from the horse's mouth and certainly
    gets to the point fast. But it's not always the most readable thing. You
    can get it from here: http://www.w3.org/TR/CSS21/
    Ben C, Nov 7, 2006
    #14
  15. z

    z Guest

    "Ben C" <> wrote in message
    news:<>...

    > On 2006-11-07, z <> wrote:


    > > I'm reading about another way to remove the list-style-image and use a


    > > background image, but haven't tried it yet.


    >


    > That sounds like a better approach. You could give them a bit of left


    > padding and a background image positioned at the left.


    The background-image solution worked well.



    > I don't know of any, but I'm sure there are good books. I just read the


    > CSS 2.1 spec, which is clear, comes from the horse's mouth and certainly


    > gets to the point fast. But it's not always the most readable thing. You


    > can get it from here: http://www.w3.org/TR/CSS21/


    Thanks, I bookmarked it for later.
    z, Nov 9, 2006
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Neo Geshel
    Replies:
    81
    Views:
    2,868
    diecleartype
    Jul 10, 2006
  2. Victoria Clare
    Replies:
    1
    Views:
    1,701
    Peter Mount
    Aug 16, 2004
  3. Neo Geshel
    Replies:
    6
    Views:
    477
    Neo Geshel
    Oct 24, 2004
  4. Richard
    Replies:
    10
    Views:
    853
    Steve Pugh
    Mar 4, 2005
  5. Chris
    Replies:
    1
    Views:
    1,056
    Neredbojias
    Aug 24, 2006
Loading...

Share This Page