stfc_boy
10-29-2007, 02:28 PM
Hi Guys,
I have a menu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#menu1 {
width: 130px;
}
#menu1 h3 {
background:#FFF url(../furniture/drop_arrow.jpg) no-repeat 0 11px;
padding-top:9px;
padding-left: 10px;
text-transform: uppercase;
font-size: 11px;
color: #666666;
font-weight:bold;
border: 1px solid #ccc;
border-width: 4px 0 1px 0;
height:20px;
}
</style>
</head>
<body>
<div id="menu1">
<h3>Options</h3>
<ul>
<li><a href="#">Running</a></li>
<li><a href="#">Jumping</a></li>
<li><a href="#">Skipping</a></li>
<li><a href="#">Notices</a></li>
</ul>
</div>
<div id="menu1">
<h3>opinion</h3>
<ul>
<li><a href="#">Blogs</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Letters</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
</body>
</html>
However, when I try and validate it the validator says it can't have the same name for each div id menu1 so how do I get around this? As you can see I have about eight of the same menus. Do I have to replicate a style for each one?
Thanks
Chris
I have a menu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#menu1 {
width: 130px;
}
#menu1 h3 {
background:#FFF url(../furniture/drop_arrow.jpg) no-repeat 0 11px;
padding-top:9px;
padding-left: 10px;
text-transform: uppercase;
font-size: 11px;
color: #666666;
font-weight:bold;
border: 1px solid #ccc;
border-width: 4px 0 1px 0;
height:20px;
}
</style>
</head>
<body>
<div id="menu1">
<h3>Options</h3>
<ul>
<li><a href="#">Running</a></li>
<li><a href="#">Jumping</a></li>
<li><a href="#">Skipping</a></li>
<li><a href="#">Notices</a></li>
</ul>
</div>
<div id="menu1">
<h3>opinion</h3>
<ul>
<li><a href="#">Blogs</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">Letters</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
<div id="menu1">
<h3>Misc</h3>
<ul>
<li><a href="#">Music One</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tunes</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Dogs</a></li>
</ul>
</div>
</body>
</html>
However, when I try and validate it the validator says it can't have the same name for each div id menu1 so how do I get around this? As you can see I have about eight of the same menus. Do I have to replicate a style for each one?
Thanks
Chris