Jump to content

Css Question


Recommended Posts

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.






<!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">


<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" />




<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>


<!-- mainfeature -->

<div class="inner">


<ul class="features">


<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>



<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 />



<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>



<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>



</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>


<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>


<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">


<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>



</div> <!-- siteinfo -->

</div> <!-- wrapper?-->




Link to comment
Share on other sites

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;


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.




Link to comment
Share on other sites

Did you try just changing the two ul's


<ul id="mainnav">


<ul class="mainnav">


And then in the style sheet change






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



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.




Link to comment
Share on other sites

A link would be handy, even its just a simple mock up page




Fair enough :-) It isn't finished but here you are:




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.




Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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!


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...