I'm having trouble coding the navigation portion of my web page. It is my intent to have a navigation menu on the left-hand side of the page and in a different color than the rest of the section. I also want a SECOND navigation menu, separate from the first but looking and acting identical to the first. The only way I can manage to get things to look and behave properly is to assign each the same ID. But the html validators say I can't do that. If I give them separate names, the second navigation menu looks different from the first. The same occurs if I give them both the same "class" ID. Can anyone help? (Everybody's got to be better at this than I am :-) Coding follows below. (The coding in question is ID="mainnav")
Thanks!
Colette
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Parrotlets Plus!</title>
<link rel="stylesheet" href="NewPPlusIndexa.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img class="displayed" src="images/logo1a.jpg" alt="ParrotletsPlus" height="191" width="700" />
<div id="header-bottom">
<p id="tagline">The World's Most Gorgeous Parrotlets!</p>
</div><!-- header-bottom -->
</div><!-- header -->
<div id="main">
<div id="content">
<div id="mainfeature">
<h3>Parrotlets Plus</h3>
<p>The companion site to the Yahoo Chat Group "ParrotletsPlus", dedicated to the tiny 4" parrot commonly known as the "Parrotlet" - a place hundreds of us call HOME.</p>
<p class="more"><a href="<A href="http://pets.groups.yahoo.com/group/ParrotletsPlus/">Come">http://pets.groups.yahoo.com/group/ParrotletsPlus/">Come Join Us!</a></p>
</div>
<!-- mainfeature -->
<div class="inner">
<h2>Features</h2>
<ul class="features">
<li>
<h3><a href="photoalbum.html">Members' Photo Gallery</a></h3>
<a href="images/twiglet.jpg"><img border="0" vspace="10" hspace="10" src="images/twiglet1.jpg" alt="Twiglet" width="85" height="99"/></a>
<p class="describe">Visit our members and their birds.</p>
<p>Our members and their feathered families say "Hello"!</p>
<p class="more"><a href="photoalbum.html">Album</a></p>
</li>
<li>
<br />
<br />
<h3><a href="photocontest.html">Photo Contest Winners</a></h3>
<a href="images/2003pippin.jpg"><img border="0" vspace="10" hspace="10" src="images/2003pippin1.jpg" alt="Pippin" width="85" height="98"/></a>
<p class="describe">Winners through the years.</p>
<p>View the winning photos of our yearly photo contest, this year and through the past.</p>
<p class="more"><a href="photocontest.html">Album</a></p><br />
</li>
<li>
<h3><a href="memorial.html">Memorial Page</a></h3>
<a href="images/mariah.jpg"><img border="0" vspace="10" hspace="10" src="images/mariahsmall.jpg" alt="Mariah" width="85" height="99"/></a>
<p class="describe">To our departed feathered loves.</p>
<p>Members pay tribute to their birds that have crossed the Rainbow Bridge.<br /><br /><br /><br /><br /></p>
<p class="more"><a href="memorial.html">Album</a></p>
</li>
<li>
<h3><a href="memberlinks.html">Members' Links</a></h3>
<a href="images/2004chipper.jpg"><img border="0" vspace="10" hspace="10" src="images/2004chipper1.jpg" alt="Chipper" width="85" height="99"/></a>
<p class="describe">Members' Web Sites.</p>
<p>Visit the web sites of members who breed parrotlets and sell bird-related items.<br /><br /><br /><br /></p>
<p class="more"><a href="memberlinks.html">Links</a></p>
</li>
</ul>
</div> <!-- inner -->
</div> <!-- content -->
<div id="sidebar">
<h3>On-Site Navigation</h3>
<ul id="mainnav">
<li><a href="index.html">Home</a></li>
<li><a href="photoalbum.html">Member Photo Album</a></li>
<li><a href="photocontest.html">Photo Contest Winners</a></li>
<li><a href="special.html">Special Somebirdies</a></li>
<li><a href="memorial.html">Memorial Pages</a></li>
<li><a href="memberlinks.html">Member Links</a></li>
</ul>
<h3>Off-Site Navigation</h3>
<ul id="mainnav">
<li><a href="<A href="http://pets.groups.yahoo.com/group/ParrotletsPlus/">ParrotletsPlus">http://pets.groups.yahoo.com/group/ParrotletsPlus/">ParrotletsPlus Yahoo Group</a></li>
<li><a href="<A href="http://groups.yahoo.com/group/ParrotletandotherParrotlovers2007convention/?yguid=231505383">2007">http://groups.yahoo.com/group/ParrotletandotherParrotlovers2007convention/?yguid=231505383">2007 ParrotletsPlus Reunion</a></li>
<li><a href="<A href="http://www.commandobirdies.net/">Commando">http://www.commandobirdies.net/">Commando Birdies!</a></li>
<li><a href="<A href="http://www.aviannetwork.com/">Avian">http://www.aviannetwork.com/">Avian Network</a></li>
</ul>
<p><a href="<A href="http://www.stoppdd.org/"><img">http://www.stoppdd.org/"><img border="0" vspace="40" hspace="10" img class="displayed" src="images/pdd.gif" alt="Stop PDD" width="98" height="181"/></a></p>
</div> <!-- sidebar -->
</div> <!-- main -->
<div id="siteinfo">
<ul>
<li><a href="<A href="http://pets.groups.yahoo.com/group/ParrotletsPlus/">Join">http://pets.groups.yahoo.com/group/ParrotletsPlus/">Join Parrotlets Plus Yahoo Group</a> |</li>
<li>©2006 Commando Birdies |</li>
<li><a href="<A href="mailto:webmaster@commandobirdies.net">Contact">mailto:webmaster@commandobirdies.net">Contact Us</a></li>
</ul>
</div> <!-- siteinfo -->
</div> <!-- wrapper?-->
</body>
</html>
