Forum Moderators: not2easy
I'm having a difficult time wrapping my head around classes and ids for ul / li items. I got some help with some code, which I got working to fit my needs. The problem is, when I integrated it into my site, it conflicted with some ul / li code from a different menu. So I gave the ul and id, and tried giving each li a class, but it doesn't seem to work since I've modified it. Could anyone tell me what I might be doing wrong? Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#diagramPosition {
width: 1024px;
height: 325px;
overflow: hidden;
}
#diagram ul, #diagram ul li a, #diagram ul li a i {
background: url(myBackgroundImage.jpg) no-repeat 0 0;
}
#diagram ul li a span, #diagram ul li a i {display: none;}
#diagram ul {
margin: 0; padding: 0;
list-style: none;
width:1024px;
height: 325px;
padding-top: 16px;
position: relative;
}
#diagram ul li a {
float: left;
clear: left;
height: 27px;
width: 215px;
}
#diagram ul li a i {background-position: 100% 0;}
#diagram ul li a:hover i {
cursor: pointer;
display: block;
position: absolute;
width: 794px;
height: 325px;
left: 230px;
top: 0;
}
#diagram li.a a {background-position: 0 -16px;}
#diagram li.a a:hover {background-position: 0px -341px;}
#diagram li.a a:hover i {background-position: -230px -325px}
#diagram li.b a {background-position: 0 -43px;}
#diagram li.b a:hover {background-position: 0px -693px;}
#diagram li.b a:hover i {background-position: -230px -650px;}
#diagram li.c a {background-position: 0 -70px;}
#diagram li.c a:hover {background-position: 0px -1045px;}
#diagram li.c a:hover i {background-position: -230px -975px;}
#diagram li.d a {background-position: 0 -97px;}
#diagram li.d a:hover {background-position: 0px -1397px;}
#diagram li.d a:hover i {background-position: -230px -1300px;}
#diagram li.e a {background-position: 0 -124px;}
#diagram li.e a:hover {background-position: 0px -1749px;}
#diagram li.e a:hover i {background-position: -230px -1625px;}
#diagram li.f a {background-position: 0 -151px;}
#diagram li.f a:hover {background-position: 0px -2101px;}
#diagram li.f a:hover i {background-position: -230px -1950px;}
</style>
</head>
<body>
<div id="diagramPosition">
<ul id="diagram">
<li class="a"><a href="#"><span>portfolio</span><i></i></a></li>
<li class="b"><a href="#"><span>multimedia</span><i></i></a></li>
<li class="c"><a href="#"><span>environment</span><i></i></a></li>
<li class="d"><a href="#"><span>security & fire</span><i></i></a></li>
<li class="e"><a href="#"><span>communication</span><i></i></a></li>
<li class="f"><a href="#"><span>complete control</span><i></i></a></li>
</ul>
</div>
</body>
</html>
So, I have a ul, and within it, I have several li's with their own id. As soon as I give the ul a name (#diagram is what I have below), everything stops working... the ul's background breaks, all the li's break. So if I place #diagram in front of every single css style code, it still doesn't work. I even tried changing the li ids to li classes in case you aren't allow to have an id within an id.
Can anyone point me to a good resource for ul / li naming methods? I can't seem to find anything that helps on Google, and when I try to replicate what I see on other people's pages, it break. The post below this is the actual code I'm trying to use, but for whatever reason, it stopped working as soon as I named the ul.
Any help would be way cool...
