Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Styling Large List of Links

looks horrible

     
8:32 pm on Apr 3, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 15, 2005
posts:102
votes: 0


I'm having a difficult time trying to use lists to horizontally style a large list of links. I can't seem to get proper spacing vertically. All the link boxes seem to overlap a bit. Somehow I just feel I'm going about this all the wrong way.

Here's the sample code:

Doctype = HTML 4.01 Transitional

css

ul#newlist { margin-left: 0px; padding-left: 0; }

#active a:link, #active a:visited, #active a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}

#newlist a { padding: 3px 10px; white-space: nowrap; }

#newlist a:link, #newlist a:visited {
color: #fff;
background-color: #036;
text-decoration: none;
}

#newlist a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}

#newlist li { display: inline; list-style-type: none; }

html

<div id="newlistcontainer">
<ul id="newlist">
<li id="active"><a href="#">Red Steel &amp; Plastic Widgets</a></li>
<li><a href="#">Blue Round Steel Widgets</a></li>
<li><a href="#">Square Yellow Widgets</a></li>
<li><a href="#">Bags Paper Shopping Bags</a></li>
<li><a href="#">Red Plastic Widgets</a></li>
<li><a href="#">Widgets in Red Plastic</a></li>
<li><a href="#">Plastic Blue Widgets</a></li>
<li><a href="#">Steel Widget Closeouts</a></li>
<li><a href="#">Widgets Blue &amp; Plastic</a></li>
<li><a href="#">Blue Yellow - Red Widgets</a></li>
<li><a href="#">Widgets Factory Direct</a></li>
<li><a href="#">Plastic Widgets</a></li>
<li><a href="#">Red &amp; Steel Widgets</a></li>
<li><a href="#">Steel &amp; Yellow Widgets</a></li>
</ul>
</div>

TIA for any help

10:31 am on Apr 4, 2009 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


Hi there techstyled,

try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

<style type="text/css">
#newlist {
width:360px; [blue] /* you can try widths of 540px, 720px, 900px, 1080px or 1260px */[/blue]
margin:0 auto;
padding:0;
list-style-type:none;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
}

#newlist li {
float:left;
width:180px;
}

#newlist #active a,#newlist #active a:visited,#newlist #active a:hover {
color:#fff;
background-color:#369;
text-decoration:none;
}

#newlist a {
display:block;
line-height:22px;
text-align:center;
}

#newlist a,#newlist a:visited {
color:#fff;
background-color:#036;
text-decoration:none;
}

#newlist a:hover {
background-color:#369;
}
</style>

</head>
<body>

<ul id="newlist">
<li id="active"><a href="#">Red Steel &amp; Plastic Widgets</a></li>
<li><a href="#">Blue Round Steel Widgets</a></li>
<li><a href="#">Square Yellow Widgets</a></li>
<li><a href="#">Bags Paper Shopping Bags</a></li>
<li><a href="#">Red Plastic Widgets</a></li>
<li><a href="#">Widgets in Red Plastic</a></li>
<li><a href="#">Plastic Blue Widgets</a></li>
<li><a href="#">Steel Widget Closeouts</a></li>
<li><a href="#">Widgets Blue &amp; Plastic</a></li>
<li><a href="#">Blue Yellow - Red Widgets</a></li>
<li><a href="#">Widgets Factory Direct</a></li>
<li><a href="#">Plastic Widgets</a></li>
<li><a href="#">Red &amp; Steel Widgets</a></li>
<li><a href="#">Steel &amp; Yellow Widgets</a></li>
</ul>

</body>
</html>


birdbrain
12:23 am on Apr 5, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 15, 2005
posts:102
votes: 0


birdbrain, thanks. I was hoping for a fluid solution but the solution you've provided is _much_ cleaner than what I had.
12:47 am on Apr 5, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Why not just remove the width of #newlist if you want it fluid ?
(It won't center anymore)

Maybe add some background on #newlist to fill the open space to the right.

And as an alternative you could set the <li> to be display:inline-block and then you could even center it by setting text-align: center on the <ul>.

3:23 am on Apr 6, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 15, 2005
posts:102
votes: 0


swa66 - thanks for that too. I'm a backend systems guy and I'm still finding it hard to _think_ CSS. I can understand it, just difficult coming up with my own solutions, if that makes sense.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members