vonatah
08-25-2007, 12:16 AM
Ok, I am trying to create faux columns so that my navigation bar is the same length as my content container. I understand the concept and have been searching the forums for the solution. I think it may have something to do with a background color declaration in my code, unfortunately, I can't find it. I have my navigation and my content sitting in a div called container. I have a 1 pixel background image tiled down the y axis in the container, but it doesn't seem to be tiling. I have read and re-read my code and can't find what I've done wrong. I would really appreciate it if someone could take a look at my code and see if they can find what's wrong. I think I'm going cross-eyed. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Polacek Center for Plastic Surgery</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* CSS for page */
body {
background-color: #99b7d3;
font-size: 80%;
font-family: 'Lucida Grande', Verdana, sans-serif;
}
/* Rules for headings */
h1 {
font-size: 150%;
}
h2 {
font-size: 140%;
}
h3 {
font-size: 120%;
}
p {
font-size: 100%;
line-height: 150%;
}
li img {
vertical-align: bottom;
}
#wrap {
width: 950px;
}
#container {
background-image: url(graphics/background.gif);
background-repeat: repeat-y;
}
/* Masthead */
#masthead {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #000;
background-color: 99b7d3;
width: 950px;
voice-family: "\"}\"";
voice-family: inherit;
width: 926px;
}
html>body #masthead {
width: 926px;
}
/*Footer */
#footer {
clear: both;
margin: 10px 0 0 0;
padding: 10px;
border: 1px solid #000;
background-color: #99b7d3;
width: 950px;
voice-family: "\"}\"";
voice-family: inherit;
width: 926 px;
}
html>body #footer {
width: 926px;
}
#navcontainer {
float: left;
padding-left: 50px;
}
#flashcontent {
float: left;
width: 750px;
height: 513px;
line-height: 250px;
text-align: center;
margin: 10px;
background: #99b7d3 url(graphics/collage.jpg) center;
}
.style3 {font-size: 0.8cm}
/* CSS for navigation system */
#nav,
#nav ul { /* all lists */
padding: 10px 0 0;
list-style: none;
float: left;
width: 120px;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 58px;
margin-bottom : -1px;
width: 95px
}
#nav li ul { /* second-level lists */
position : absolute;
display: none;
margin: -68px 0 0 130px;
}
#nav li a {
width: 120px;
w\idth : 120px;
display : block;
color : #FFF;
font-weight : bold;
font-size: .8em;
text-decoration : none;
background-color : #7697b9;
border : none;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : #98b5ce;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
display: none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul { /* lists nested under hovered list items */
display: block;
}
</style>
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="masthead">
<h1>Masthead</h1>
</div>
<div id="wrap">
<div id="container">
<div id="navcontainer">
<ul id="nav">
<li><a href="#">meet dr. polacek</a></li>
<li><a href="#">face</a>
<ul>
<li><a href="#">face lift</a></li>
<li><a href="#">eye lift</a></li>
<li><a href="#">brow lift</a></li>
<li><a href="#">neck lift</a></li>
<li><a href="#">laser resurfacing</a></li>
<li><a href="#">otoplasty</a></li>
</ul>
</li>
<li><a href="#">body contouring</a>
<ul>
<li><a href="#">abdominoplasty</a></li>
<li><a href="#">thigh lift</a></li>
<li><a href="#">arm lift</a></li>
<li><a href="#">liposuction</a></li>
</ul>
</li>
<li><a href="#">breasts</a>
<ul>
<li><a href="#">breast implants</a></li>
<li><a href="#">breast reductions</a></li>
<li><a href="#">breast lift</a></li>
<li><a href="#">gynecomastia</a></li>
</ul>
</li>
<li><a href="#">non-surgical</a>
<ul>
<li><a href="#">botox</a></li>
<li><a href="#">thermage</a></li>
<li><a href="#">restylane/perlane</a></li>
<li><a href="#">juvaderm</a></li>
<li><a href="#">collagen</a></li>
<li><a href="#">phototherapy</a></li>
</ul>
</li>
<li><a href="#">skin care</a>
<ul>
<li><a href="#">micropeels</a></li>
<li><a href="#">microdermabrasion</a></li>
<li><a href="#">skin care products</a></li>
</ul>
</li>
<li><a href="#">before and afters</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<div id="flashcontent">
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF");
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Polacek Center for Plastic Surgery</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* CSS for page */
body {
background-color: #99b7d3;
font-size: 80%;
font-family: 'Lucida Grande', Verdana, sans-serif;
}
/* Rules for headings */
h1 {
font-size: 150%;
}
h2 {
font-size: 140%;
}
h3 {
font-size: 120%;
}
p {
font-size: 100%;
line-height: 150%;
}
li img {
vertical-align: bottom;
}
#wrap {
width: 950px;
}
#container {
background-image: url(graphics/background.gif);
background-repeat: repeat-y;
}
/* Masthead */
#masthead {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #000;
background-color: 99b7d3;
width: 950px;
voice-family: "\"}\"";
voice-family: inherit;
width: 926px;
}
html>body #masthead {
width: 926px;
}
/*Footer */
#footer {
clear: both;
margin: 10px 0 0 0;
padding: 10px;
border: 1px solid #000;
background-color: #99b7d3;
width: 950px;
voice-family: "\"}\"";
voice-family: inherit;
width: 926 px;
}
html>body #footer {
width: 926px;
}
#navcontainer {
float: left;
padding-left: 50px;
}
#flashcontent {
float: left;
width: 750px;
height: 513px;
line-height: 250px;
text-align: center;
margin: 10px;
background: #99b7d3 url(graphics/collage.jpg) center;
}
.style3 {font-size: 0.8cm}
/* CSS for navigation system */
#nav,
#nav ul { /* all lists */
padding: 10px 0 0;
list-style: none;
float: left;
width: 120px;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 58px;
margin-bottom : -1px;
width: 95px
}
#nav li ul { /* second-level lists */
position : absolute;
display: none;
margin: -68px 0 0 130px;
}
#nav li a {
width: 120px;
w\idth : 120px;
display : block;
color : #FFF;
font-weight : bold;
font-size: .8em;
text-decoration : none;
background-color : #7697b9;
border : none;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : #98b5ce;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
display: none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul { /* lists nested under hovered list items */
display: block;
}
</style>
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="masthead">
<h1>Masthead</h1>
</div>
<div id="wrap">
<div id="container">
<div id="navcontainer">
<ul id="nav">
<li><a href="#">meet dr. polacek</a></li>
<li><a href="#">face</a>
<ul>
<li><a href="#">face lift</a></li>
<li><a href="#">eye lift</a></li>
<li><a href="#">brow lift</a></li>
<li><a href="#">neck lift</a></li>
<li><a href="#">laser resurfacing</a></li>
<li><a href="#">otoplasty</a></li>
</ul>
</li>
<li><a href="#">body contouring</a>
<ul>
<li><a href="#">abdominoplasty</a></li>
<li><a href="#">thigh lift</a></li>
<li><a href="#">arm lift</a></li>
<li><a href="#">liposuction</a></li>
</ul>
</li>
<li><a href="#">breasts</a>
<ul>
<li><a href="#">breast implants</a></li>
<li><a href="#">breast reductions</a></li>
<li><a href="#">breast lift</a></li>
<li><a href="#">gynecomastia</a></li>
</ul>
</li>
<li><a href="#">non-surgical</a>
<ul>
<li><a href="#">botox</a></li>
<li><a href="#">thermage</a></li>
<li><a href="#">restylane/perlane</a></li>
<li><a href="#">juvaderm</a></li>
<li><a href="#">collagen</a></li>
<li><a href="#">phototherapy</a></li>
</ul>
</li>
<li><a href="#">skin care</a>
<ul>
<li><a href="#">micropeels</a></li>
<li><a href="#">microdermabrasion</a></li>
<li><a href="#">skin care products</a></li>
</ul>
</li>
<li><a href="#">before and afters</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<div id="flashcontent">
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF");
so.write("flashcontent");
// ]]>
</script>
</body>
</html>