Re: [css-d] adjust position of hover nav tab
On 2011-01-20 19:39, Rory Bernstein wrote:
On this site:
http://mcgivney.ehclients.com/
I cannot for the life of me figure out how to get the positioning of the dark green tab
that appears behind the nav items when you hover on them. For example, if you hover over
practices in the nav, that box is not quite the same distance from the left
and right divider lines. There is more space between the dark green box and the line on
the right side; I'd like to have this spacing on the left too but I cannot figure out how
to do that.
Thanks, Rory
Hi there!
Since you're using bgd image (separator.gif) as those separation bars:
...
#nav li{
display:inline-block;
background: url(../images/global/separator.gif) no-repeat 0 10px;
padding:0 5px 0 5px;
position:relative;
...
try increasing left pading to say 10px:
padding: 0 5px 0 10px;
I've only quickly tried it on Firefox 3.6 PC and it worked
Hope it helps...
Good Luck!
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navbar problem
Alex!
Thank you very much for your time and help.
Much appreciated.
Jakub
- Original Message -
From: Alex Mitchell
To: Jakub
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, August 18, 2010 6:27 PM
Subject: Re: [css-d] Horizontal navbar problem
On Tue, Aug 17, 2010 at 5:07 PM, Jakub kuba.off...@gmail.com wrote:
Hello all!
This is my first post here, be merciful please...
Anyway, I am trying to create a horizontal navbar, widely known from
http://css.maxdesign.com.au/listamatic/horizontal03.htm; all looks good,
except that when zooming in (Opera, Firefox, Safari, Chrome - those I've
checked) list items are dropping down. It doesn't happen in IE6, IE7
though... Is there any way to prevent this happening?
li are display:inline, and a is floated as well as ul
Here is the link... http://www.jakub.zxq.net/
I would greatly appreciate any help.
Thank you all in advance
Jakub
The issue lies within the width:100%;
This command says that the content will expand as far as the width of its
container, then it will wrap. When a user zooms, since 100% in your case is the
width of the viewport, The size of the viewport doesn't change, and all the
content gets too big to fit in that 100%.
This problem can be easily fixed. Since it's working fine in IE6/7, we can
use the min-width property.
#menu ul {
list-style-type: none;
float: left;
min-width:700px; /* if the viewport gets smaller than 700px then the content
won't wrap and it will create a bottom scrollbar. */
width: 100%;
background-color: #036;
}
You may want to play with the actual number of pixels, this is just a rough
draft. I've posted it at http://gumware.com/cssd/onyourfeet.html
Hope this helps,
Alex Mitchell
In addition, you may want to change
html, body {
margin: 0;
padding: 0;
}
to
html, body, ul, li {
margin: 0;
padding: 0;
}
Because, right now you are getting a bottom scrollbar, caused by the
padding/margin browsers set on an unordered list by default. If you reset them
like this, it will get rid of the bottom scrollbar and you will be able to more
effectively style your lists.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Horizontal navbar problem
Hello all! This is my first post here, be merciful please... Anyway, I am trying to create a horizontal navbar, widely known from http://css.maxdesign.com.au/listamatic/horizontal03.htm; all looks good, except that when zooming in (Opera, Firefox, Safari, Chrome - those I've checked) list items are dropping down. It doesn't happen in IE6, IE7 though... Is there any way to prevent this happening? li are display:inline, and a is floated as well as ul Here is the link... http://www.jakub.zxq.net/ I would greatly appreciate any help. Thank you all in advance Jakub __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
