Lists - Getting the hover to fill

[Sliight]

I've reworked the site completely, and I'd like to know if anyone can tell me how to get the hover function to fill the entire list bar with a solid block background color. Please see my site to see what I mean... www.usejeff.com

The content and everything is jacked for now, gonna deal with reducing it a ton later.

Another thing I'm wondering... is if anyone can tell me how to round out the bottom of these lists, and also round out the main white content window. Kinda like in this picture...

http://www.usejeff.com/rounded.html

Image doesn't show up inbedded in this message in preview, here's a link to it.... http:..www.usejeff.com/rounded.html

Thank you in advance!!! :)

[alexjewell]

I would make the links in the sidebar block:



#sidenav a{
display: block;
padding: 4px;}


_____________________________________

To round out the divs, make a background image the width of the div and do the following:



#divname{
background: rgb(250,219,183) url(imgs/roundcorn1.gif) no-repeat bottom center;}

[mwinter]

Another thing I'm wondering... is if anyone can tell me how to round out the bottom of these lists, and also round out the main white content window.

There are various ways of doing it. It can be achieved using purely CSS without a single modification to the mark-up (other than including the style sheet, of course), but it has relatively limited support. Scripting can be used which reduces the messiness somewhat, allowing fairly clean mark-up, though obvious the effect won't appear if scripting is disabled. Finally, there's the add-lots-of-elements method, which always works (unless CSS is disabled), but involves adding a fair few content-less elements (usually div). It also depends if you want a border or just rounded background colours.



To round out the divs, make a background image the width of the div [...]

No, please don't. This requires using pixel dimensions which isn't suitable for text containers. The methods I mention above can all be used to create perfectly fluid corners and edges.

[alexjewell]

Well, there's interesting CSS corners out there:

http://www.html.it/articoli/nifty/index.html
http://www.smileycat.com/miaow/archives/000044.php
http://www.spiffycorners.com/
http://www.albin.net/css/roundedcorners

Now, the way I would do it if the div wasn't an exact width would be with 4 different divs, each with one background image:



<div id="r_one">
<div id="r_two">
<div id="r_three">
<div id="r_four">
<div id="r_content">

<!-- DIV CONTENT HERE -->

</div>
</div>
</div>
</div>
</div>


With CSS along these lines:



#r_one, #r_two, #r_three, #r_four{
width: 20&#37;;
height: 10%;}

#r_one{
background: red url(imgs/r_top_left.gif) no-repeat top left;}

#r_two, #r_three, #r_four, #r_content{
background: transparent;}

#r_two{
background: url(imgs/r_top_right.gif) no-repeat top right;}

#r_three{
background: url(imgs/r_bot_left.gif) no-repeat bottom left;}

#r_four{
background: url(imgs/r_bot_right.gif) no-repeat bottom right;}

#r_content{
margin: 5px;}

[Sliight]

Thanks for all your help on this... I used one of the links and found a "corner rounder" site that just generates the code, css, and graphics for me. Quite nice :) I also was able to figure out how to make the hover background take up the entire width of the list.

Thanks!

[tech_support]

Mind giving us the link? ;)