command Posted October 24, 2006 Share Posted October 24, 2006 I'm having a LOT of trouble coding the navigation section of a page. I want one navigation menu, a break, and then a second navigation menu. If I give them the same ID, the page looks as it should - but the html validator tells me I can't do that. I can't seem to figure out how to properly do this as either separate ID's or by putting them in a class. The first menu always looks as it should but the second menu always loses the format. The HTML follows if anybody can help. 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="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="http://pets.groups.yahoo.com/group/ParrotletsPlus/">ParrotletsPlus Yahoo Group</a></li> <li><a href="http://groups.yahoo.com/group/ParrotletandotherParrotlovers2007convention/?yguid=231505383">2007 ParrotletsPlus Reunion</a></li> <li><a href="http://www.commandobirdies.net/">Commando Birdies!</a></li> <li><a href="http://www.aviannetwork.com/">Avian Network</a></li> </ul> <p><a href="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="http://pets.groups.yahoo.com/group/ParrotletsPlus/">Join Parrotlets Plus Yahoo Group</a> |</li> <li>©2006 Commando Birdies |</li> <li><a href="mailto:webmaster@commandobirdies.net">Contact Us</a></li> </ul> </div> <!-- siteinfo --> </div> <!-- wrapper?--> </body> </html> Quote Link to comment Share on other sites More sharing options...
TCH-Don Posted October 24, 2006 Share Posted October 24, 2006 You can't use an id in more than one place use class for the menu instead <ul class="mainnav"> Quote Link to comment Share on other sites More sharing options...
TCH-Bruce Posted October 24, 2006 Share Posted October 24, 2006 The W3 spec is "id=" should only be used once. You should be able to use "class=". In your CSS file define your menu style beginning with a "." Quote Link to comment Share on other sites More sharing options...
command Posted October 24, 2006 Author Share Posted October 24, 2006 The W3 spec is "id=" should only be used once. You should be able to use "class=". In your CSS file define your menu style beginning with a "." I guess I'm not very smart <sigh> When I change the ID to "class", the first section of the navigation menu behaves properly but not the second section. As it is now, with "id=", the css reads: #sidebar h3 { font-size: 150%; font-weight: bold; display: block; text-align:center; margin: 0; padding: 0.2em 0 0.2em 10px; } ul#mainnav { list-style: none; margin: 0 0 10px 0; padding: 0; background-color: #0561A5; color: white; } If I change BOTH "id=" to "div class=", how will the CSS read? Seems like I've tried every possible combination - but obviously I haven't tried the RIGHT one. Thanks! Colette Quote Link to comment Share on other sites More sharing options...
TCH-Don Posted October 24, 2006 Share Posted October 24, 2006 Did you try just changing the two ul's <ul id="mainnav"> to <ul class="mainnav"> And then in the style sheet change #mainnav{ to .mainnav{ Quote Link to comment Share on other sites More sharing options...
command Posted October 24, 2006 Author Share Posted October 24, 2006 Did you try just changing the two ul's <ul id="mainnav"> to <ul class="mainnav"> And then in the style sheet change #mainnav{ to .mainnav{ In the html, I changed "ID=" to "div class=" In the css, I changed: #sidebar { #ul#mainnav { TO .mainnav { or #sidebar .ul .mainnav { or #sidebar ul .mainnav { or #sidebar .ul mainnav { or #sidebar ul mainnav { #ul mainnav { or ul.mainnav { or #ul.mainnav The closest anything got to working was ul.mainnav { which at least produced the background color - though nothing else I can't seem to get anything to work. Thanks! Colette Quote Link to comment Share on other sites More sharing options...
TCH-Don Posted October 25, 2006 Share Posted October 25, 2006 Its hard to help without seeing the page. Can you provide a link? Quote Link to comment Share on other sites More sharing options...
TCH-JimE Posted October 25, 2006 Share Posted October 25, 2006 A link would be handy, even its just a simple mock up page JimE Quote Link to comment Share on other sites More sharing options...
command Posted October 25, 2006 Author Share Posted October 25, 2006 A link would be handy, even its just a simple mock up page JimE Fair enough :-) It isn't finished but here you are: http://www.parrotletsplus.com/ I appreciate you all taking a look at it. I think I've bitten off more than I can chew. The very bottom box "Site Info" seems to change back and forth as well, undoubtedly an I.E. "thing" that I haven't figured out yet. Thanks! Colette Quote Link to comment Share on other sites More sharing options...
command Posted October 25, 2006 Author Share Posted October 25, 2006 I'm not certain what exactly changed (since I've been dinking with this for three days <sigh>), but changing to <ul-class="mainnav"> in the html and changing #ul.mainnav to #sidebar ul.mainnav in the css gives me two separate lists in the navigation bar that both are working properly. And the html validates! So I'm going to quite whilst I am ahead. (They really ought to keep people like me off the internet :-) Thank you for your patience! I really appreciate it. Colette Quote Link to comment Share on other sites More sharing options...
TCH-Bruce Posted October 25, 2006 Share Posted October 25, 2006 Maybe your browser cache was not cleared and you were not seeing the changes that you were making. This happens frequently in IE and is another reason to use Firefox. Quote Link to comment Share on other sites More sharing options...
command Posted October 25, 2006 Author Share Posted October 25, 2006 Maybe your browser cache was not cleared and you were not seeing the changes that you were making. This happens frequently in IE and is another reason to use Firefox. Normally I'd agree with you but I only loaded up the page for you to see. I spent a LONG time blasting that sidebar all over creation before finally giving it the same ID. What I probably did was hit upon the right combination yet fail to properly close a tag - or some other equally brilliant move :-) Thanks a bunch for your time! Colette Quote Link to comment Share on other sites More sharing options...
TCH-Don Posted October 25, 2006 Share Posted October 25, 2006 Glad to hear you have it working. Quote Link to comment Share on other sites More sharing options...
TCH-JimE Posted October 26, 2006 Share Posted October 26, 2006 Hey glad it works! JimE Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.