•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,915 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,324 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1275 | Replies: 1
 |
•
•
Join Date: Oct 2006
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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>
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>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
Woah... if you're gonna post the HTML you may aswell include the CSS aswell so I can have a proper look 
In general though, if you class something, you can write a CSS block that matches and affects only objects of that class, class and tag, or class and tag and id.
instead of using tag id=mainnav and having CSS like:
tag#mainnav{} or
#mainnav{}
use class=mainnav and have CSS like:
tag.mainnav{} or
.mainnav{} if tag-name is irrelevant
Validitors shoudn't spit that back at you.
But it IS invalid (and restritive) to have objects with the same ID. Why do you say it will only work if they have the same ID?
In general though, if you class something, you can write a CSS block that matches and affects only objects of that class, class and tag, or class and tag and id.
instead of using tag id=mainnav and having CSS like:
tag#mainnav{} or
#mainnav{}
use class=mainnav and have CSS like:
tag.mainnav{} or
.mainnav{} if tag-name is irrelevant
Validitors shoudn't spit that back at you.
But it IS invalid (and restritive) to have objects with the same ID. Why do you say it will only work if they have the same ID?
If it only works in Internet Explorer; it doesn't work.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Part time PHP+HTML/CSS working at home (Web Development Job Offers)
- Where's the HTML and CSS forum? (DaniWeb Community Feedback)
- Web Designer HTML/CSS (Web Development Job Offers)
- Learning web design, HTML, CSS, etc... (HTML and CSS)
- Totally new to html, css questions (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: link color
- Next Thread: HELP! With Small Java Code....
