rollovers

[Emmanize]

What is the best way to do CSS rollovers? The only way I can get the buttons line up correctly is to do it as follows:



<div class="home"><img src="home.jpg" /></div>

<div class="about"><img src="about.jpg" /></div>

<div class="team"><img src="team.jpg" /></div>

<div class="portfolio"><img src="portfolio.jpg" /></div>

<div class="entrepreneurs"><img src="entr.jpg" /></div>

<div class="investors"><img src="investors.jpg" /></div>

<div class="news"> <img src="news.jpg" /> </div>

<div class="contact"><img src="contact.jpg" /></div>



But I am not sure if you can do it like that. Any other way leaves a gap batween each button.

[chris_bcn]

use an unordered list and then use the :hover on the a element

Quick and simple example - you don't nec. need the navcontainer div

<div id="navcontainer">
<ul id="navlist">
<li><a href="" title="link">link</a></li>
<li><a href="" title="link">link</a></li>
<li><a href="" title="link">link</a></li>
<li><a href="" title="link">link</a></li>
<li><a href="" title="link">link</a></li>
</ul>
</div>

#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}

[Neballer]

^what chris said

try here for more examples
http://css.maxdesign.com.au/listamatic/

[EC]

^ A required bookmark.

[xplod_ldg]

They are right. You can do this easy with list items.