multiple lists and css help needed

**five04** · Jul 31, 2004 18:00

Code:

<div id="navigation">
<ul id="navlist">
<li id="active"></li>
</ul>
</div>

that's the code for my list in xhtml. for css i've got this:

Code:

#navigation {
	width: 138px;
	}

#navigation ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	}

#navigation li {
	display: inline;
	/* for IE5 and IE6 */
	}


#navigation a {
	display: block;
	padding: 2px;
	width: 138px;
	background-color: #7896AE;
	border-bottom: 0px dotted #eee;
	}

#navigation a:link, #navlist a:visited {
	color: #fff;
	text-decoration: none;
	}

#navigation a:hover {
	background-color: #4A7292;
	color: #fff;
	}

now that works great but because i have multiple lists using the same code my page doesn't validate because i'm using the same id more than once. i've been trying to create a class for all of this but nothing i do seems to work. if anybody can switch around my stuff into a class i'd be most grateful as i've almost given up on it. thanks for the help.

**polvero** · Jul 31, 2004 18:13

just make the entire thing a class.

**five04** · Jul 31, 2004 19:53

that's what i'm trying to do. i don't know how to get it to work though.

**Heimidal** · Aug 1, 2004 03:57

Try the following:

Code:

<ul class="nav-list">
<li id="active"></li>
</ul>

Note that I've removed the div. Now CSS:

Code:

ul.nav-list {
	width: 138px;
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	}

ul.nav-list li {
	display: inline;
	/* for IE5 and IE6 */
	}


ul.nav-list a {
	display: block;
	padding: 2px;
	width: 138px;
	background-color: #7896AE;
	border-bottom: 0px dotted #eee;
	}

ul.nav-list a:link, #navlist a:visited {
	color: #fff;
	text-decoration: none;
	}

ul.nav-list a:hover {
	background-color: #4A7292;
	color: #fff;
	}

This should work well.

**polvero** · Aug 1, 2004 10:02

that still leaves in the multiple id's.

you know, for your original one you can just have one id, and assign it to different attributes, this way you don't need to bother assigning them inside the tags themselves everytime

Code:

<div id="navigation">
<ul>
<li></li>
</ul>
</div>

what you have is fine...except I never saw this "active" id in your code to begin with.

**five04** · Aug 1, 2004 16:09

i don't know how to incorporate all of that into one class. even then the div id wouldn't work because i want to use that same div multiple times. sorry for being stupid, but i need to see some code so i can understand what to do.

**ethanp** · Aug 2, 2004 04:31

Just make it:

ul {
properties
}

li {
properties
}

**five04** · Aug 2, 2004 09:47

Originally Posted by charmedlover

Just make it:

ul {
properties
}

li {
properties
}

tried that but it doesn't make my lists actual blocks.

**Paul O'B** · Aug 2, 2004 10:02

Hi,

Perhaps you could restate your current problem as it looked like you had answers to most of your questions

What are the problems you need to overcome now? Do you have some revised code or are we still working on your original post?

Hopefully we can solve your problem with a bit more info

Paul

**five04** · Aug 2, 2004 10:04

http://css.maxdesign.com.au/listamatic/vertical08.htm

that's essentially what i started out with so that's what my lists look like. i want all of that in a class so instead of calling id's i just call a class or classes. i want the look to be the same but the ability to use it multiple times.

**Paul O'B** · Aug 2, 2004 11:05

Hi,

Well most of the answers have been given above so I must have missed something somewhere

Try this anyway:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul.navlist {
 margin-left: 0;
 padding-left: 0;
 list-style-type: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: x-small;
 width: 138px;}
ul.navlist li {
 display: inline;
 /* for IE5 and IE6 */
 }

ul.navlist a {
 display: block;
 padding: 2px;
 background-color: #7896AE;
 border-bottom: 0px dotted #eee;
 }
* html ul.navlist a {height:1%}/* for ie */
ul.navlist a:link, ul.navlist a:visited {
 color: #fff;
 text-decoration: none;
 }
ul.navlist a:hover {
 background-color: #4A7292;
 color: #fff;
 }
</style>
</head>
<body>
<ul class="navlist">
<li class="active"><a href="#" class="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
<ul class="navlist">
<li class="active"><a href="#" class="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
<ul class="navlist">
<li class="active"><a href="#" class="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
 
</body>
</html>

Hope that helps.

Paul

**five04** · Aug 2, 2004 14:19

thank you so much! i'm sorry for sounding so ignorant but i honestly did try to get things working but i was having no luck. it seems every css tutorial i find doesn't really go in depth enough or is specific enough for what i want to do. you've helped me before and i really appreciate that.

**polvero** · Aug 3, 2004 10:01

i'm glad you got this worked out

User Tag List

Thread: multiple lists and css help needed

Thread Tools

Display

multiple lists and css help needed

Bookmarks

Bookmarks

Posting Permissions