anthias
11-14-2008, 01:31 AM
At the suggestion of some here, I've re-written my page so it uses the cleanest html and css I can. I'm having trouble with the css dropdowns though. The tabs change color, but nothing drops down. It's placing the text I want in the dropdown next to the title tab. gingertown.org if you want to look at it there.
HTML:
<html>
<head>
<style type="text/css"></style>
<link rel="stylesheet" media="all" type="text/css" href="css/gingertown3.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="http://www.dmsas.com"><img src="images/gingertown09f_7.jpg" align="left" border="none" alt="DMSAS - GINGERTOWN"/></a>
</div>
<div id="navbar">
<ul>
<li class="top">GINGERTOWN 2008</li>
<li class="item"><a href="#">GINGERTOWN 2008</a></li>
</ul>
</div>
<div id="main">
main
</div>
<div id="footer">
<p>© David M. Schwarz Architects, Inc.</p>
</div>
</div>
</body>
</html>
CSS:
body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:76%;
color:white;
padding:0;
border:0;
margin:0;
background:black;
}
a {
color:white;
}
a:visited {
color:white;
}
a:active {
color:white;
}
a:hover {
text-decoration:none;
}
#wrapper {
width:1000px;
margin:14px 0px 0px 0px;
}
#header {
width:1000px;
height:80px;
float:left;
}
#navbar {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
}
#navbar ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
}
#navbar li {
margin:7px 10px 0px 0px;
list-style-type: none;
list-style:none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
}
#navbar li:hover {
margin:7px 10px 0px 0px;
list-style-type: none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
background:black;
}
#navbar li .item{display:none;}
#navbar li:hover .item a {
color:purple;
text-decoration:none;
}
#navbar li:hover .item a:hover {
color:orange;
}
#main {
background:blue;
height:650px;
width:750px;
float:left;
position: relative; top: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 10px;
}
#footer {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
position: relative; top: 20px;
}
#footer p {
margin:6px 0px 0px 10px;
float:left;
}
HTML:
<html>
<head>
<style type="text/css"></style>
<link rel="stylesheet" media="all" type="text/css" href="css/gingertown3.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="http://www.dmsas.com"><img src="images/gingertown09f_7.jpg" align="left" border="none" alt="DMSAS - GINGERTOWN"/></a>
</div>
<div id="navbar">
<ul>
<li class="top">GINGERTOWN 2008</li>
<li class="item"><a href="#">GINGERTOWN 2008</a></li>
</ul>
</div>
<div id="main">
main
</div>
<div id="footer">
<p>© David M. Schwarz Architects, Inc.</p>
</div>
</div>
</body>
</html>
CSS:
body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:76%;
color:white;
padding:0;
border:0;
margin:0;
background:black;
}
a {
color:white;
}
a:visited {
color:white;
}
a:active {
color:white;
}
a:hover {
text-decoration:none;
}
#wrapper {
width:1000px;
margin:14px 0px 0px 0px;
}
#header {
width:1000px;
height:80px;
float:left;
}
#navbar {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
}
#navbar ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 10px;
}
#navbar li {
margin:7px 10px 0px 0px;
list-style-type: none;
list-style:none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
}
#navbar li:hover {
margin:7px 10px 0px 0px;
list-style-type: none;
display:block;
float:left;
width:140px;
border-right:1px solid #fff;
background:black;
}
#navbar li .item{display:none;}
#navbar li:hover .item a {
color:purple;
text-decoration:none;
}
#navbar li:hover .item a:hover {
color:orange;
}
#main {
background:blue;
height:650px;
width:750px;
float:left;
position: relative; top: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 10px;
}
#footer {
clear:both;
width:1000px;
height:20px;
background:red;
color:white;
font-size:11px;
position: relative; top: 20px;
}
#footer p {
margin:6px 0px 0px 10px;
float:left;
}