Rollover Problems (CSS + DIVS)

[Meti]

Hey,
I'm coding a layout. I want to do rollovers on the layout.
But when I sliced the layout, I only sliced 1px width of the navigation, so it could expand 100% on your screen.

But when I want to create a rollover, it rolls-over the whole navigation.
How can I do different rollovers in that navigation?
Like:
Orange = Normal image
Red = Hover image
llllllllllllllllllllllllllllllllllllllllllllllllll lllllllllllllllll

+rep

[Excellent]

.button {
background-image: url(blah);
width: blahpx;
height: blahpx;
}
.button:hover {
background-image: url(blah);
width: blahpx;
height: blahpx;
}

[Meti]

Already sorted this :)

.nav a {
background-image: url(images/nav_normal.png);
background-repeat: repeat-x;
width: 1px;
height: 44px;
}
.nav a:hover {
background-image: url(images/nav_hoverl.png);
background-repeat: repeat-x;
width: 1px;
height: 44px;
}

then
<div class="nav">Then links here</div>

[L?KE]

That works, but then the div will change colour, but they might not be on the actual text link.

It's better to style the actual text so when they hover over the section it is actually an active link not just a div that is changing colour.

[Meti]

Doesn't work for me :(
www.stockholm.se >> They have the same navigation I want, the blue one..

[L?KE]

#nav {
width: whatever px;
height: whatever px;
background: url('whatever.png') repeat-x;
margin: 0;
padding: top 0px bottom 0px;
text-align: center;
}
#nav a {
color: white;
text-decoration: none;
}
#nav a:hover {
color: white;
text-decoration: underline;
}


That it?

[Meti]

I don't want it to roll-over the text. I want image backgrounds of the rollovers.

[Excellent2]

I don't want it to roll-over the text. I want image backgrounds of the rollovers.:S? Just use what I gave you but type inside it..

[L?KE]

You gave me that site as an example and that's what their menu does :S.

But yeah just follow excellent's instructions.

[Meti]

I've tried Excellents instructions. I already knew that code, but it doesn't work. I don't think you understand me.
It's a 1px width navigation, and i added 100% width, so it's the whole screen.
But when i do hover, it hovers the whole navigation..
--
And L?KE, I meant when you click their navigation ;)

[L?KE]

Make the background of the nav just that image all the way across.

Then a normal link will have no background assigned to it, but on hover shows another background, therefore only highlighting that one link.

[Meti]

I don't understand. Can you give me code? Or is it something like.


nav a {
background-image: url(images/image.png);
width: 100%;
height: 44px;
}
nav a:hover {
background-image: url(images/image_hover.png);
width: somepx;
height: 44px;
}


<div class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

[L?KE]

I mean like this:



#nav {
width: 100%;
height: duno px;
margin: duno;
padding: duno;
background: url("folder/yourimage.ext") repeat-x;
}

#nav a {
height: /* same as nav bar */
margin: duno;
padding: duno;
/* no background */
}

#nav a:hover {
height: /* same as nav bar */
margin: duno;
padding: duno;
background: url("folder/yourimage.ext") repeat-x;
}


If that makes sense? Cos it only changes the background of each link upon hover.

[Meti]

Thanks. I'm on my laptop right now, so I'll try that when I'm on my PC ;)

[Meti]

I mean like this:



#nav {
width: 100%;
height: duno px;
margin: duno;
padding: duno;
background: url("folder/yourimage.ext") repeat-x;
}

#nav a {
height: /* same as nav bar */
margin: duno;
padding: duno;
/* no background */
}

#nav a:hover {
height: /* same as nav bar */
margin: duno;
padding: duno;
background: url("folder/yourimage.ext") repeat-x;
}


If that makes sense? Cos it only changes the background of each link upon hover.
That works :)
I love you :P
Not rly. but thanks :D
Gahh. How do i make like 6 spaces between every link?
I can't press the space button on DW :S

And, how to I make the links white? :S They're blue :(

[Coldplay]

Try a_color=

in CSS.

[Meti]

Already fixed it :D
How do i remove the Underline of links now?
And when i press the link, a border of dots comes around it. How do i remove that?

EDIT:
Fixed everything except from the dot border.

[Coldplay]

Border-style; None?

If not, then your code is goosed, and you need to look for what's causing the prob.

[L?KE]

Yeah coldplay's got it.

Also if you haven't solved the 6 spaces, either do

6x "&nbsp;" (silly way)
or do:


a {
/* whatever you other code is here */
margin-right: 10px;
}


Obviously, 10px can be anything.

[Meti]

thanks again :)