making link same size as controlling div

[city_coder]

Hi guys, this should be simple

an example of what i want to do is exactly what the bbc have on their site once you go past the front page.

http://news.bbc.co.uk/sport1/hi/football/default.stm

The navigation on the right is where i want to focus your attention, being able to make the div that the link sits in, change to a different colour when you hover over it, but it is also the same size as the div that it sits in, not the size of the link.

Its also like the front page of dynamic drive and the navigation on the left...surely someone can help.

Any ideas?

[Medyman]

Hey city_coder...

I haven't looked at the code of the BBC site, but what I suspect is that the links aren't in different divs. You should use an unordered list for this, like so:


<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
</ul>


Then, use some CSS:

li a {
display:block;
background:gray;
}

li a:hover {
background:blue;
}


You might need more CSS to get the exact look you want but those are the basics.

[city_coder]

ok good call, cos thats what iv got working so far, iv also figured that i have to use



li:hover {
background:blue;
}


to get the background of the li to change

but that doesnt mean that when i click on the li, that i can get the a href to work. i need some way of stretching it to the size of the li.

i mean it cant be that hard, the bbc can do it, the people who built the dynamic drive front page can do it, anyone?

[josephhamilton1]

By setting the css for li a display property to block, this will cause the anchor tag to stretch to the horizontal size of its container



li a {
display:block;
}


Block elements such as tables and divs always fill their containers horizontally when no width is specified. Anchors, imgs, and all other inline elements do not, they must be converted to block elements using the display property to emulate this behavior.

Note also that block elements do not stretch or fill their container vertically unless told to do so.