Sorry that it took me so long to get back to you about this. I have had no luck.... I just can't seem to be able to pick which lines of code are causing the menu not to work. I used both of your suggestions, and just can't make it work. I would appreciate any help.
I like the simplicity of the suckerfish menu, but I couldn't even get that to work with that menu script I used.
HTML Navigation Menu Code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>West Thurston</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<table cellspacing="0" cellpadding="0" border="2" class="background">
<tr>
<td>
<div id="banner"> <img src="images/WestThurstonHeader.jpg" alt="Serving Better Together"> </div>
</center>
<ul class="glossymenu">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>News</b></a></li>
<li><a href="#"><b>Services</b></a></li>
<li><a href="#"><b>Public Education</b></a></li>
<li><a href="#"><b>Employees</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>
<center>
<div id="content">
<div id="left"> <span class="flt-lft"><img src="images/thumbnail-1.jpg" alt="Thumbnail"></span>
<p class="date">January 1 - New Website:</p>
<p>Well, this is part of it. The website is not complete just yet. There's a few background images that I want to add for the titles in the boxes to the right. The header is a major disaster and is only temporary. What I had in mind for the header is the the two Rochester and Littlerock stations, blended together. The footer is pretty much what I had in mind, although I may alter the colors a bit so that the footer can match the rest of the website.</p>
<p>All graphics are made by me, except for the two images to the left.</p>
<p class="flt-rgt"><a href="#">MORE</a></p>
<span class="flt-lft"><img src="images/thumbnail-2.jpg" alt="Thumbnail"></span>
<p class="date">December 31: - CSS Menu</p>
<p>Just a heads up that the navigation menu will have "drop down" selections when you move the mouse over a navigation category. This makes navigating through the website easier and faster.</p>
<p>I would like to talk to several people at the station to find out what the main links and sub links should be on the navigation menu.</p>
<p class="flt-rgt"><a href="#">MORE</a></p>
</div>
<div id="right">
<div id="headlines"> <span class="heading1">LIST
OF EVENTS</span>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<p class="date">Events Scheduled</p>
<p>Tue Dec 2 04:00 PM <br>
- WTFD Advisory Council Monthly Meeting of Advisory Council regarding
the Capital Compaign.</p>
<span class="flt-rgt"><a href="#">MORE</a></span>
</div>
<div id="stats">
<span class="heading2">Just A Box</span>
<p>I really can't think of anything to put here. Maybe popular links or "leave feedback" link.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer"> <a href="#">Home</a> | <a href="#">News</a> | <a href="#">Services</a> |
<a href="#">Public Education</a>
| <a href="#">Employees</a>
| <a href="#">About Us</a>
| <a href="#">Contact Us</a>
<br>
<br>
<p>© West Thurston Fire District #1. All rights reserved.</p>
</div>
</td>
</tr>
</table>
</center>
</body></html>
Entire CSS File
Code:
body {
background: #dfdbc2 url(images/barbg.gif) repeat-x;
color: #00000;
font-family: tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: left;
}
* html body {
}
img {
border: 0px;
}
a:link {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #611b1d;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
a:hover, a:active {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
#footer a:link {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}
#footer a:visited {
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
}
#footer a:hover, #footer a:active {
color: #000000;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
text-decoration: underline;
}
#banner {
clear: both;
height: 290px;
width: 800px;
}
#container {
margin: 0px auto;
text-align: left;
width: 800px;
}
#content {
display: left;
clear: both;
width: 800px;
background: #a09c7f;
background-repeat: repeat;
}
#footer {
background: url(images/footer-bg.gif) no-repeat;
clear: both;
color: #FFFFFF;
display: block;
font-size: 11px;
height: 108px;
padding-top: 20px;
text-align: center;
width: 800px;
}
#headlines {
background: #827961;
height: 199px;
padding: 10px;
width: 254px;
}
#left {
background: #a09c7f url(images/content-top-bg.gif) no-repeat 0% 0%;
float: left;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 80px;
width: 486px;
}
.background {
background-color: #FFFFFF;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
.nlink, .nlinkend {
float:left;
width:auto;
list-style: none;
display:inline;
text-align:center;
padding-top: 15px;
padding-left: 17px;
padding-right: 17px;
height:28px;
}
.nlink{
background-image: url(images/nav-line.gif);
background-repeat: no-repeat;
background-position: right top;
}
.nlinkend {
background-image: none;
}
.glossymenu{
position: relative;
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(images/menu_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
width: 800px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menuhover.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menuhoverright.gif) no-repeat right top; /*right tab image path*/
}
#right {
float: left;
width: 274px;
}
#right p {
margin-top: 0px;
}
* html #right p {
margin-top: -5px;
}
#stats {
background: #494949;
padding: 10px;
width: 254px;
}
* html #stats {
height: 170px;
}
.date {
color: #dfdbc2;
font-weight: bold;
}
.flt-lft {
float: left;
margin-right: 20px;
}
.flt-rgt {
float: right;
}
.heading1 {
background: url(images/heading-bg-1.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 12px;
padding-left: 40px;
padding-top: 4px;
width: 181px;
}
* html .heading1 {
margin-bottom: 5px;
}
.heading2 {
background-color: url(images/heading-bg-2.gif) no-repeat;
color: #909090;
display: block;
font-family: arial, tahoma;
font-size: 14px;
font-weight: bold;
height: 21px;
margin-bottom: 5px;
padding-left: 38px;
padding-top: 4px;
width: 161px;
}
Adding a drop down menu
Reply With Quote
I'll post back to see if i run into any problems.
Bookmarks