Jump to content

need help with a nav menu...


Alith7

Recommended Posts

sorry.

didn't know if it was needed.

Here is what I have for my html

<body id="color">
<div id="wrapper">
<div id="branding">
<p>Branding content here</p>
  </div>
<div id="content">
<div id="mainContent">
	<p>MainContent content here</p>
</div>
<div id="secondaryContent">
	<p>SecondaryContent content here</p>
</div>
  </div>
<div id="mainNav">
<a href="page1.php" class="color">Color Copies</a>
<a href="page2.php">B & W Copies</a>
<a href="page3.php">Banners</a>
<a href="page4.php">Blueprints</a>
<a href="page5.php">Business Cards</a>
<a href="page6.php">Letterheads</a>
<a href="page7.php">Envelopes</a>
<a href="page8.php">Forms</a> </div>
<div id="footer">
<p>Footer content here</p>
  </div>
</div>
</body>

 

And here is what my css is set up as.  right now, it set up the way one of my books had it done, but it doesn't seem to be working.

 

#wrapper {
width: 800px;
}

#content {
width: 620px;
float: right;
background-color: #0000FF;
}

#mainContent {
width: 420px;
float: left;
}

#secondaryContent {
width: 180px;
height: 600px;
float: right;
padding-top: 20px;
padding-bottom: 20px;
background-color: #FF0000;
}

#mainNav {
width: 180px;
height: 600px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
}

#mainNav a:link, a:visited {
display: block;
float: right;
width: 170px;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
line-height: 2;
background-color: #CCCCCC;
background-image: url(../images/end-grey.jpg);
background-position: left;
background-repeat: no-repeat;
border: 0;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}

#mainNav a:hover {
background-color: #000000;
background-image: url(../images/end-black.jpg);
background-position: left;
background-repeat: no-repeat;
}

#color #wrapper #mainNav .color a {
background-color: #E21D24;
background-image: url(../images/end-red.jpg);
background-position: left;
background-repeat: no-repeat;
cursor: default;
}

#mainNav li {
padding-left: 20px;
padding-right: 20px;
}

#footer {
clear: both;
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.