box rollovers - help!

[nevdev]

Can anyone help me? I'm going mad trying to do this. I'm trying to make a horizontal box, with a ridged border, 650px wide and about 20px high, with six rectangular areas inside it, adjacent to each other, each of which are to be 'link areas'.

The idea is that when the mouse hovers over one of these "sub-boxes", its background color changes, to highlight the link being hovered-over. The "sub-box" links should be spaced equally and centred vertically in the ridged container box.

I had the idea that there should be one div as a "container" for the items, 650px wide, and then six separate "sub-divs" 108px wide (to accommodate the 1px ridge border), and then to set the hover on these "sub-divs". But it's just not working. I'd be really grateful for some help!

[Matty21]

ok i think this what you want

html

<div id="links">
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
</div>

css

div#links a{
width: 108px;
height: 20px;
background: Red;
border: ridge;
text-align: center;
text-decoration: none;
font-weight: bold;
color: White;
display: table-cell;
}
div#links a:hover{
background: #8B0000;
color: #F0E68C;
}

obviosly you will need to change the colors and things but this works in both ie and ff

[nevdev]

That's fantastic! (I actually wanted the ridge to be in an enclosing box, but that was easy to change) My mind was stuck in a loop and I just couldn't think! (Will I *ever* get CSS right?!) But thank you very much for that clear and extremely helpful example!

[nevdev]

A couple of things :) When I do enclose it into a container and make that ridged, ie like this:

#container {
width: 650px;
border: ridge;
}

div#links a{
width: 108px;
height: 20px;
background: Red;
text-align: center;
text-decoration: none;
font-weight: bold;
color: White;
display: table-cell;
}
div#links a:hover{
background: #8B0000;
color: #F0E68C;
}

...the text isn't vertically centred - is that rectifiable?

Also I notice in IE5 Mac the link boxes are all bunched together in the middle (..but I guess I shouldn't worry about MacIE5 when most Mac users will be using Safari or FireFox..?)

[Matty21]

try this

html (same as before)

css

div#links {
width: 650px;
border: ridge;
text-align: center;
}
div#links a{
width: 102px;
height: 20px;
background: Red;
text-decoration: none;
font-weight: bold;
color: White;
display: table-cell;
}
div#links a:hover{
background: #8B0000;
color: #F0E68C;
}

notice that i have changed th width of the anchor and moved the text align to the parent element

sorry i dont have a mac to test on right now

hope this helps

[nevdev]

Well I find that the following css code works OK in Mozilla Firefox and Safari, but not in IE6/WinXP (or IE5/Mac). Specifically, in IE6/WinXP or IE5/Mac, the links are all bunched up next to each other, without any 107px spacing, whereas on Mozilla Firefox/Safari they appear correctly spaced apart. How can I re-write it so it works on both types of browser?

CSS:

<style type="text/css">

#NavWrapper {
margin-top: 20px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 646px;
height: 20px;
vertical-align: middle }

#NavContainer {
border: ridge 2px #fc0;
background-image: url("images/contentfill.gif");
vertical-align: middle;
}

div#NavLinks {
width: 646px;
height: 20px;
text-align: center;
vertical-align: middle;
}

div#NavLinks a {
width: 107px;
height: 20px;
text-decoration: none;
color: #000;
display: table-cell;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
}

div#NavLinks a:hover {
background: #fc0;
color: #00f;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
}

</style>

HTML:

<div id="NavWrapper">
<div id="NavContainer">
<div id="NavLinks">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
</div>

(P.S. The "NavWrapper" is there separate from the "NavContainer" to separate a div which specifies the width from a div which specifies the border, to avoid the IE box model problems)

[Span]

IE does not support the table-cell property does it? And why not use a list? Lists are so much fun. I couldn't check this one on Win/IE, but it looks good in all Mac browsers on OSX, including IE5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="all">
html,body,ul,li {
margin:0;
padding:0;
}
ul#NavContainer {
position:relative;
width:646px;
margin:20px auto 0 auto;
background-image:url(images/contentfill.gif);
text-align:center;
font:11px verdana,arial,helvetica,sans-serif;
}
ul#NavContainer:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
ul#NavContainer li {
width:107px;
float:left;
border-top:2px ridge #fc0;
border-bottom:2px ridge #fc0;
list-style:none;
}
ul#NavContainer li.start {
border-left:2px ridge #fc0;
}
ul#NavContainer li.end {
border-right:2px ridge #fc0;
}
ul#NavContainer li a {
display:block;
line-height:200%;
color:#000;
text-decoration:none;
}
ul#NavContainer a:hover {
background:#fc0;
color:#00f;
}
</style>
</head>
<body>
<ul id="NavContainer">
<li class="start"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li class="end"><a href="#">Link 6</a></li></ul>
<p>Hello world</p>
</body>
</html>