Not sure How to Build this Site

**maxiscool** · Aug 11, 2008 09:53

I need to build a site that has a nested nav on the left, with a different background than the content on the right. To do this, I have made a background image with two different colors, but, oddly enough, it isn't showing up in firefox.

Below all of that, I want a large footer for contact info, which would be another color, but it is showing up in the sidebar in IE.

Here is all of my html and css:

xhtml:

Code:

<!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>Santa Rita Ranch: Texas Longhorns:: Durango, CO</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="container">

<div id="header">
</div>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>

</body>

</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #B0B0B0;
	line-height: 150%;
	font-size: medium;
	}
	
#container {
	margin: 0 auto;
	width: 900px;
	background: url(images/content-bg.jpg) repeat-y;
}

#content {
	width: 699px;
	float: right;
	background-color: #755601;
	}

#footer {
	height: 400px;
	background-color: #5C7982
	}

#navcontainer { 
width: 200px;
margin-left: 30px; 
float: left;
background-color: #9C7202;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #333;
background-color: transparent;
width: 140px;
padding: 2px 10px;
text-decoration: none;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
font-size: 12px;
}

#navcontainer a:hover
{
background-color: #ddd;
color: #333;
border-right: 10px solid #aaa;
padding: 2px 1px 2px 10px;
}

#navcontainer ul ul
{
margin-left: 30px;
padding: 0;
list-style-type: none;
}

#navcontainer li li a
{
display: block;
color: #333;
background-color: transparent;
width: 110px;
padding: 2px 10px;
margin: 0;
border-top: none;
border-bottom: none;
border-left: 1px solid #aaa;
text-decoration: none;
font-size: 12px;
}

**Louis Lazaris** · Aug 11, 2008 10:10

Your container is probably "collapsing". Add "overflow: hidden" to your container element that holds the background image and it should resolve it.

Louis

**maxiscool** · Aug 11, 2008 10:16

it didn't fix it. It looks the same.

**Louis Lazaris** · Aug 11, 2008 10:22

Can you post a demo page? Since I don't have your background image, I cannot replicate your issue. Thanks.

Louis

**maxiscool** · Aug 11, 2008 10:25

Here it is: http://test.askthekid.org/

**Louis Lazaris** · Aug 11, 2008 10:37

Add "clear: both" to your footer. Does that do what you want?

Louis

**maxiscool** · Aug 11, 2008 12:53

New problem: rounded corners won't show in IE.

Here is the test site: http://santaritalonghorns.com/test

**Paul O'B** · Aug 12, 2008 05:50

New problem: rounded corners won't show in IE.

That's because you haven't left a space after the url closing bracket and before the no-repeat. Add a space like this:

Code:

#footer-bottom{
    width: 900px;
    height: 10px;
    background:url(http://santaritalonghorns.com/test/images/footer-bottom.jpg) no-repeat bottom;
    clear: both;
    }

**maxiscool** · Aug 12, 2008 10:11

Thanks! it worked!

User Tag List

Thread: Not sure How to Build this Site

Thread Tools

Display

Not sure How to Build this Site

Bookmarks

Bookmarks

Posting Permissions