- This topic is empty.
-
AuthorPosts
-
March 11, 2009 at 11:22 pm #24332amberParticipant
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.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" title="about this site">what’s this?</a> |
<a href="http://synchronicitysandbox.com" title="get updates in your feed reader">feed</a> |
<a href="http://synchronicitysandbox.com" title="check it">check. check.</a> |<a href="http://twitter.com/adecelle" title="friends with a box">twitter</a> |
<a href="http://synchronicitysandbox.com" 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
March 12, 2009 at 11:21 am #54906Chris CoyierKeymasterYou 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 #54909amberParticipantHi 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 6:16 pm #54917amberParticipantApostrophe,
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,
AmberMarch 13, 2009 at 10:47 am #54555amberParticipantYay 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.