PDA

Click to See Complete Forum and Search --> : horizontal lists on more than one line

jbw
03-18-2005, 06:33 AM
I'm trying to get my horizontal lists to work so if the window is scaled horizontally and the list items drop to another line the image that seperates each list item will still appear at the beginning of the item.
My code is below so you can see what I'm talking about and I've attached the image. Is this possible to correct or perhaps there is a better way of doing this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Graphics Content</title>
<style type="text/css">
<!--
body {
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
h3 {
font-size: 14px;
font-weight: bold;
color: #FFF;
padding: 4px;
background-color: #282282;
border-bottom: 2px solid #100A5E;
text-align: left;
}
#navtabs {
font-size: 10px;
margin: 0;
padding: 0px 0px 4px 0px;
}
#navtabs li {
margin: 0;
padding: 0;
display: inline;
background: url(navlist.gif) no-repeat 0px 50%;
list-style-type: none;
}
#navtabs a{
float: inherit;
font-weight: normal;
margin: 0px 0px 0px 6px;
text-decoration:none;
color: #282282;

}
#navtabs a.active, #navtabs a:hover{
text-decoration: underline;
color: #E10008;

}
ul {
list-style: none;
}
-->
</style>
</head>

<body>
<div>
<h3>Required reading </h3>
<ul id="navtabs">
<li><a href="#">Processing graphics for Director</a></li>
<li><a href="#">Processing graphics for Flash</a></li>
<li><a href="#">Creating icons for PC and Mac</a></li>
</ul>
<h3>References &amp; Resources</h3>
<ul id="navtabs">
<li><a href="#">Photoshop tutorials</a></li>
<li><a href="#">Flash tutorials</a></li>
<li><a href="#">Animation Tutorials</a></li>
<li><a href="#">Anatomy and figure drawing techniques</a></li>
<li><a href="#">Texture References</a></li>
</ul><h3>Inspiration</h3>
<p><a href="#">Various artist gallery website</a> | <a href="#">Various artist gallery website</a> | <a href="#">Various artist gallery website</a> | </p>
<h3>Software Support </h3>
<p><a href="#">Graphics app developer site or forum</a> | <a href="#">Graphics app developer site or forum</a> | <a href="#">Graphics app developer site or forum</a> | </p>
<h3>Latest Software Updates</h3>
<p><a href="#">Latest versions of common apps </a> | <a href="#">Latest versions of common apps</a> |<span class="style1"> <a href="#">Latest versions of common apps</a> | </span></p>
</div>
<p>&nbsp;</p>
</body>
</html>
Fang
03-18-2005, 09:30 AM
Add white-space:nowrap; to .navtabs a
navtabs should be a class not an id; you have two of them.
jbw
03-18-2005, 09:54 AM
Thanks Fang,
I've changed it to class rather than id, can't quite believe I missed that.
Anyway I've added the white space attribute to the css, as you suggested, but it hasn't worked. Firefox renders it fine but I.E 6 still butchers the image position when i scale the page in. The first line of listings looks fine but on subsequent lines the image sit over the text for the first list entry? Any suggestions? Would a list style image work any better in these situations?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Graphics Content</title>
<style type="text/css">
<!--
body {
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
h3 {
font-size: 14px;
font-weight: bold;
color: #FFF;
padding: 4px;
background-color: #282282;
border-bottom: 2px solid #100A5E;
text-align: left;
}
.navtabs {
font-size: 10px;
margin: 0;
padding: 0px 0px 4px 0px;
}
.navtabs li {
margin: 0;
padding: 0;
display: inline;
background: url(navlist.gif) no-repeat 0px 50%;
list-style-type: none;
}
.navtabs a{
float: inherit;
font-weight: normal;
margin: 0px 0px 0px 4px;
text-decoration:none;
color: #282282;
white-space: nowrap;
}
.navtabs a.active, .navtabs a:hover{
text-decoration: underline;
color: #E10008;

}
ul {
list-style: none;
}
-->
</style>
</head>

<body>
<div>
<h3>Required reading </h3>
<ul class="navtabs">
<li><a href="#">Processing graphics for Director</a></li>
<li><a href="#">Processing graphics for Flash</a></li>
<li><a href="#">Creating icons for PC and Mac</a></li>
</ul>
<h3>References &amp; Resources</h3>
<ul class="navtabs">
<li><a href="#">General graphics info</a></li>
<li><a href="#">Photoshop tutorials</a></li>
<li><a href="#">Flash tutorials</a></li>
<li><a href="#">Animation tutorials</a></li>
<li><a href="#">Anatomy and figure drawing techniques</a></li>
<li><a href="#">Texture references</a></li>
<li><a href="#">Creative commons search</a></li>
</ul>
<h3>Inspiration</h3>
<p><a href="#">Various artist gallery website</a> | <a href="#">Various artist gallery website</a> | <a href="#">Various artist gallery website</a> | </p>
<h3>Software Support </h3>
<p><a href="#">Graphics app developer site or forum</a> | <a href="#">Graphics app developer site or forum</a> | <a href="#">Graphics app developer site or forum</a> | </p>
<h3>Latest Software Updates</h3>
<p><a href="#">Latest versions of common apps </a> | <a href="#">Latest versions of common apps</a> |<span class="style1"> <a href="#">Latest versions of common apps</a> | </span></p>
<h3>Downloads</h3>
<p><a href="#">Irfanview</a> | <a href="#">XnView</a> |<span class="style1"> <a href="#">ImageSEE Viewer</a> | <a href="#">Picasa 2</a> | <a href="#">Mozilla Firefox</a> | <a href="#">Colourzilla</a> | <a href="#">Scriptspot</a> |</span></p>
</div>
<p>&nbsp;</p>
</body>
</html>



ta,
jbw
Fang
03-18-2005, 11:25 AM
This sort of works in IE, the first image on each subsequent line disappears.
.navtabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
background: url(navlist.gif) no-repeat 0 0;
padding-left:0.5em;
}

style image does not work with inline lists :(