Css Question

**command** · 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">

<head>

<title>Parrotlets Plus!</title>

</head>

<body>

<p id="tagline">The World's Most Gorgeous Parrotlets!</p>

</div>

</div>

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

</div>

<h2>Features</h2>

<li>

<h3><a href="photoalbum.html">Members' Photo Gallery</a></h3>

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

<h3><a href="photocontest.html">Photo Contest Winners</a></h3>

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

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

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

</div>

<h3>On-Site Navigation</h3>

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

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

</div>

</div>

<ul>

<li><a href="http://pets.groups.yahoo.com/group/ParrotletsPlus/">Join Parrotlets Plus Yahoo Group</a> |</li>

<li><a href="mailto:webmaster@commandobirdies.net">Contact Us</a></li>

</ul>

</div>

</div>

</body>

</html>

**TCH-Don** · October 24, 2006

You can't use an id in more than one place

use class for the menu instead

**TCH-Bruce** · 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 "."

**command** · 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

**TCH-Don** · October 24, 2006

Did you try just changing the two ul's

to

And then in the style sheet change

#mainnav{

to

.mainnav{

**command** · 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

**TCH-Don** · October 25, 2006

Its hard to help without seeing the page.

Can you provide a link?

**TCH-JimE** · October 25, 2006

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

JimE

**command** · 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

**command** · 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

**TCH-Bruce** · 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.

**command** · 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

**TCH-Don** · October 25, 2006

Glad to hear you have it working.

**TCH-JimE** · October 26, 2006

Hey glad it works!

JimE

Sign In

Css Question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation