Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hover menu bar invisible then moves when rolled over

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #24332
    amber
    Participant

    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:[email protected]" title="contact by email">Contact</a> |
    </ul><style="clear:both" />
    </div>



    Thanks for the help.

    -Amber

    #54906
    Chris Coyier
    Keymaster

    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.

    #54909
    amber
    Participant

    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!

    #54917
    amber
    Participant

    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

    #54555
    amber
    Participant

    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 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.