Fluid List Item Background

HTML & CSS
1

Hi Guys,

Can anybody tell me how to vary the background width for
individual list items in the navigation. For example; instead
of having a fixed width for all items I would like to have a
more fluid background to accommodate for both items with
large and small titles? I’m trying to achieve a more jagged
vertical navigation…

Thanks,

M.

2

I’m no good at CSS tricks, but this might be something like what you want:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
ul {list-style: none; margin: 0; padding: 0;}
li {margin: 4px 0; line-height: 1.5;}
li a {background: black; color: white; padding: 4px; text-decoration: none;}
li a:hover {text-decoration: none; background: red;}
</style>
	
</head>

<body>
<ul>
<li><a href="#">Some text</a></li>
<li><a href="#">Some more text</a></li>
<li><a href="#">Less</a></li>
</ul>

</body>
</html>

Of course, the original you linked to is done in Flash, so you won’t replicate that entire functionality in current CSS. You would need some JS.

3

I think you might need to clarify your request somewhat. I can’t really picture what you are describing.

4

Yeah after I read it back I couldn’t understand my own post :slight_smile: I guess
I’m trying to achieve something like the vertical navigation seen here;
http://www.channel4.com/ -> notice how each nav li has a different
background width. I’m not after the animation…just the (non fixed)
background width sizes…

M.

5

Nice one brother, that’s done the trick perfectly. Cheers,

M.