I’ve started all over once again, one line at a time in the html followed by its related css attributes.
Is my doc type correct in the html? Transitional?
The menu does not line up to the 960px width of the .outer call as the two images do.
It’s just a little to the left under the second image in the html.
I think it’s in the #navcontainer portion of the CSS but I don’t know enough to know.
Once I get this menu alignment problem solved I will tackle adding sub menus. Yikes!
Okay one more time . . . horizontal or vertical menus. Which one, and WHY?
Thanks much . . . Rick
HTML"
<!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=utf-8" />
<title>Properties With Style Orange County Real Esate</title>
<link rel="stylesheet" href="css/stylesheet2.css" type="text/css" media="all"/>
</head>
<!-- 8/3/2011 -->
<body>
<div id="header"><img src="css/images/pwsheader.gif" width="960" height="60" alt="Properties With Style Header Image" /></div>
<div class="plate"><img src="css/images/equestrainestate.jpg" width="960" height="300" alt="Coto de Caza Equestrian Estate"/></div>
<div id="outer">
<!-- From ListMatic "Horizontal Buttons"-->
<div id="navcontainer">
<ul id="navlist"> <!-- LOOK FOR IN css--ul#navlist-->
<li id="active"><a href="index.html" id="current">HOME PAGE</a></li>
<li><a href="#">SOUTH OC AREAS</a></li>
<li><a href="#">SEARCH HOMES</a></li>
<li><a href="#">IMPORTANT DATA</a></li>
<li><a href="#">FOR SELLERS</a></li>
<li><a href="#">FOR BUYERS</a></li>
<li><a href="#">PRICE HISTORY</a></li>
<li><a href="#">MARKET STATS</a></li>
</ul>
</div>
<!--end of navigation div -->
</div><!--close outer DIV-->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
/* 8/3/2011 */
#header {
margin-left:auto;
margin-right:auto;
width:78%;
}
html, body {
color:#000;
background-image: url(images/blinds1.png); background-attachment:fixed;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:100%;
float:right;
width:100%;
}
#outer {
max-width:1200px;
min-width:600px;
}
.plate {
margin-left:auto;
margin-right:auto;
width:78%;
}
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left:auto;
margin-right:auto
font-size: 80%;
width:78%;
line-height: 1.1;
color: #6CF;
text-align: left;
float:right;
}
/* NAVIGATION STARTS HERE: FROM LISTMATIC */
#navcontainer{
background: transparant;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-transform: capitalize;
text-align:center;
}
/* to stretch the container div to contain floated list COMMENTING OUT NO CHANGES?*/
#navcontainer:after{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
ul#navlist {
list-style: none;
padding: 0;
margin: 0 auto;
width: 960px;
font-size: 0.6em;
}
ul#navlist li {
display: block;
float: left;
width: 12%;
margin: 0;
padding: 0;
}
ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #006 #333;
border-style: solid;
color: #777;
text-decoration: none;
background: transparent; /*#021A68 #f7f2ea; */
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a {
background: transparent;
color: #0FF;
}
/* HOVER borders around each block button - text color indise block */
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #0FF;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
/* END OF NAVIGATION LIST */
/* eND css*/
