Grow your CSS skills. Land your dream job.

Hover menu bar invisible then moves when rolled over

  • # March 11, 2009 at 11:22 pm

    Hi, I like the look of this site’s navigation. Its invisible, until you roll over the (hidden) horizontal
    bar, and then all buttons show up at once.

    http://textism.com/

    My version is not working so good. The buttons are hidden until the bar they are on
    is rolled over, but the roll over makes the whole page move down.

    http://synchronicitysandbox.com/divination___.php

    This is what I did.



    #hover {
    padding: 5px 30px 5px 30px;
    margin:0px auto;
    font-size:9pt;
    width: 70%;
    background: #fff;
    color: #000;
    font-family: ‘Helvetica’, ‘Lucinda Grande’, ‘Helvetica Neue’, ‘Arial’, ‘Tahoma’, ‘Sans’;
    }

    #tnav {display:none;
    padding: 5px 30px 5px 30px;
    }

    #tnav {list-style:none;margin:0px auto;
    }
    #tnav li {float:left;margin:0px auto;
    }

    #hover:hover #tnav{display:block;}


    and then further down



    <div id="hover">
    <ul id="tnav">
    <a href="http://synchronicitysandbox.com&quot; title="about this site">what’s this?</a> |
    <a href="http://synchronicitysandbox.com&quot; title="get updates in your feed reader">feed</a> |
    <a href="http://synchronicitysandbox.com&quot; title="check it">check. check.</a> |

    <a href="http://twitter.com/adecelle&quot; title="friends with a box">twitter</a> |
    <a href="http://synchronicitysandbox.com&quot; title="things to know">faq</a> |
    <a href="mailto:myemail@gmail.com" title="contact by email">Contact</a> |
    </ul><style="clear:both" />
    </div>



    Thanks for the help.

    -Amber

    # March 12, 2009 at 9:37 am

    The code on the example you linked to:

    Your code:

    Spot the differences?
    FYI. An unordered list should have list items inside it.
    Add the line break with its clear:both style and make it a self closing tag.

    # March 12, 2009 at 11:21 am

    You are going to have to account for that space somehow when that div is display: none; and then remove it when it is displayed. So there is no shift in layout. Try adding some extra top padding to your #hover div, and then removing that padding on the same rollover that reveals the nav.

    # March 12, 2009 at 12:08 pm

    Hi chriscroyier -
    I completely agree, extra padding needs to be added somewhere, …

    "chriscoyier" wrote:
    Try adding some extra top padding to your #hover div, and then removing that padding on the same rollover that reveals the nav.

    but where would that be?? I’ve tried adding extra padding to the #hover (in the first block of code) and all it does is make the space between the header and the content bigger, same jump when the hover over happens. Did you mean a change like this? (It makes absolutely no affect on the outcome btw)

    <div id="hover" padding="30px 30px 30px 30px">

    Unfortunately apostrophe’s recommendation to add the <li> back in, and fix the clear didn’t work. Thank you both for the advice, this has been stumping me for days!

    # March 12, 2009 at 2:36 pm

    Strip all the top and bottom padding from the #hover div and give it a fixed height of around 22px.
    It works in firefox.

    # March 12, 2009 at 6:16 pm

    Apostrophe,
    that’s encouraging that you got it to work. I’m also in Firefox, but without the added benefit of
    getting this to work, yet. When you say give it a fixed width do you mean like this?

    #hover {
    padding: 22px;
    }
    Hopefully not, because this does not fix the problem for me.

    ?
    It doesn’t make sense to do a ‘fixed’ padding like above, because that means its adding the 22px
    top, left, bottom and right. Also, when the top and bottom padding is removed, it makes the rollover stop working completely. – so it doesn’t work to do this: padding: 0px 22px 0px 0px for instance.

    Thank you,
    Amber

    # March 12, 2009 at 11:43 pm

    I said give it a fixed height not width.

    Code:
    #hover {
    height: 22px;
    }
    # March 13, 2009 at 10:47 am

    Yay it works!!!!
    Apostrophe, you’re fantastic!!
    Thank you for your help.

    I had been so used to adding ‘height’ with the padding, thank you for setting
    me straight, and for working out this problem.

    -Amber

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

You must be logged in to reply to this topic.

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