SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not sure How to Build this Site

    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;
    }
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your container is probably "collapsing". Add "overflow: hidden" to your container element that holds the background image and it should resolve it.

    Louis

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it didn't fix it. It looks the same.
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a demo page? Since I don't have your background image, I cannot replicate your issue. Thanks.

    Louis

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add "clear: both" to your footer. Does that do what you want?

    Louis

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New problem: rounded corners won't show in IE.

    Here is the test site: http://santaritalonghorns.com/test
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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;
        }

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! it worked!
    Check out my blog at http://maxnorman.net
    Need advice? Go to http://askthekid.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •