Horizontal shifting on hover inside DIV

metalseb

Hi folks

I want to implement a full CSS navbar on the top of my page. Basically, this
is a DIV with links on <li> tags shown in inline display.

Things are going right, but if I want to show a dashed border around the
links on hover, the li elements move horizontally. Hovering on the first
element shift the two remaining ones to the right, hovering on the middle
element shit the left one to the left, the right one to the right.

I cannot find a solution to stick them in place.

Cut & paste of the CSS and the HTML code :

div#navbar2
{
height:40px;
width:100%;
background-color:#336699;
text-align:center;
vertical-align:center;
padding-top:4px;
}
div#navbar2 ul
{
margin:0px;
padding:0px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:small;
color:#fff;
line-height:30px;
white-space:nowrap;
}
div#navbar2 li
{
margin-left:50px;
margin-right:50px;
border:1px solid #336699;
list-style-type:none;
display:inline;
}
div#navbar2 li a
{
text-decoration:none;
padding:7px 10px;
color:#fff
}
div#navbar2 li a:link
{
color:#fff;
}
div#navbar2 li a:visited
{
color:#ccc;
}
div#navbar2 li a:hover
{
color:#fff;
background-color:#3366ff;
border:1px dashed #ff0000;
}

<div id=navbar2>
<ul>
<li><a href="#">bouton 1</a></li>
<li><a href="#">bouton 2</a></li>
<li><a href="#">bouton 3</a></li>
</ul>
</div>

Any help for this issue would be greatly appreciated.

Regards

--
Seb

Jul 20 '05 #1

Lee K. Seitz

In article <40*********************@news.free.fr>,
metalseb <me******@free.fr> wrote:

Hi folks

I want to implement a full CSS navbar on the top of my page. Basically, this
is a DIV with links on <li> tags shown in inline display.

Things are going right, but if I want to show a dashed border around the
links on hover, the li elements move horizontally. Hovering on the first
element shift the two remaining ones to the right, hovering on the middle
element shit the left one to the left, the right one to the right.

I cannot find a solution to stick them in place.

[Code snipped.]

Simple. Add "border:1px solid #336699;" to your "div#navbar2 li a"
selector. Since the border matches your background, it's the same
effect as if it was transparent (which you can't actually use as a
border color).

div#navbar2 li a
{
text-decoration:none;
padding:7px 10px;
color:#fff;
border: 1px solid #336699;
}

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
"You may say I'm a dreamer, / but I'm not the only one,
I hope some day you'll join us, / And the world will live as one."
-- John Lennon, _Imagine_

Jul 20 '05 #2

metalseb

Thanks a lot Lee

I was trying to do the same on the <li> style and it was not working.

Regards

--
Seb
Metal extrême, gothique et atmosphérique
http://www.metal-extreme.com
The Unholy Black Metal Songtitle-O-Matic
http://metalseb.free.fr

Jul 20 '05 #3

metalseb

Thanks a lot Lee

I was trying to do the same on the <li> style and it was not working.

Regards

--
Seb
Metal extrême, gothique et atmosphérique
http://www.metal-extreme.com
The Unholy Black Metal Songtitle-O-Matic
http://metalseb.free.fr

Jul 20 '05 #4

Lee K. Seitz

In article <40***********************@news.free.fr>,
metalseb <me******@free.fr> wrote:

Lee K. Seitz wrote:

Simple. Add "border:1px solid #336699;" to your "div#navbar2 li a"
selector.

Thanks a lot Lee

I was trying to do the same on the <li> style and it was not working.

Keep in mind that the style always applies to the last item of the
selector. So "div#navbar2 li a:hover," "div#navbar2 li a:visited,"
etc. all style the anchor (<a>) tag, which is different (and inside)
the list item (<li>) tag. Styling the list items wouldn't be a bad
way to go (assuming you style them all instead of the anchors), except
for one little thing: IE doesn't implement ":hover" on anything but
anchor tags.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
Please don't feel the trolls.

Jul 20 '05 #5

Lee K. Seitz

In article <40***********************@news.free.fr>,
metalseb <me******@free.fr> wrote:

Lee K. Seitz wrote:

Simple. Add "border:1px solid #336699;" to your "div#navbar2 li a"
selector.

Thanks a lot Lee

I was trying to do the same on the <li> style and it was not working.

Keep in mind that the style always applies to the last item of the
selector. So "div#navbar2 li a:hover," "div#navbar2 li a:visited,"
etc. all style the anchor (<a>) tag, which is different (and inside)
the list item (<li>) tag. Styling the list items wouldn't be a bad
way to go (assuming you style them all instead of the anchors), except
for one little thing: IE doesn't implement ":hover" on anything but
anchor tags.

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
Please don't feel the trolls.

Jul 20 '05 #6