SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS Help

  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Computer Stuff - The Site That Explains All</title>
    </head>
    <style type="text/css">
    body { background-color: #000000;
    color: #FFFFFF; }
    a:link{ color: white;
    text-decoration: underline;} 
    a:visited{ color: silver;
    text-decoration: underline; } 
    a:hover{ color: blue;
    text-decoration: none;} 
    a:active{ color: silver;}
    #header { border: thin dashed #FFFFFF;
    height: 80px;
    width: 680px; }
     
    #nav { float: left;
    width: 150px;
    oveflow: hidden;
    border: thin solid #FFFFFF;
    }
    #content {
    float: right;
    width: 540px;
    oveflow: hidden;
    border: thin solid #FFFFFF; }
    #footer {
    width: 680px;
    height: 20px;
    overflow: hidden;
    padding: 10px;
    clear: both;
    background-color: #000000;
    color: #FFFFFF;
    border: thin solid #FFFFFF;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>Computer Stuff - The Site That Explains All</h1></div>
     
     
    <div id="nav"><h6>Navigation</h6>
     
    <a href="index.html">Home</a></div>
     
    <div id="content"><h3>Welcome</h3>
    <p>Welcome to my site</p></div>
     
    <div id="footer">Computer Stuff</div>
    </div>
    </div>
    </body>
    </html>


    That is my code now if you save that and view it well you can see it is all messed up, now I am new to CSS and managed to hack this together from some tutorials I found so if you can link me to any decent ones than that would be good.

    Now I want the layout to have a header. left hand nav a content area and a footer, can you please fix it and explain to me what you did?

    Thanks

  2. #2
    SitePoint Addict Poiesis01's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to give your #containter a width. The default is 100&#37; so your content is floating to the right of the browser window.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI AcerTag welcome to Sitepoint.

    As mentioned above you need to give the container a width to hold all the elements together as I assume you are wanting a centred layout.

    Don't use the keyword "thin" because its 1px wide in firefox and 2px wide in IE. Use the exact measurement you want.

    Here's a quick re-jig of the code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Computer Stuff - The Site That Explains All</title>
    <style type="text/css">
    body { background-color: #000000;
    color: #FFFFFF;
    text-align:center;
     }
    a:link{ color: white;
    text-decoration: underline;}
    a:visited{ color: silver;
    text-decoration: underline; }
    a:hover{ color: blue;
    text-decoration: none;}
    a:active{ color: silver;}
    
    #header {
        border: 1px dashed #FFF;
        height: 80px;
    }
     
    #nav { 
        float: left;
        width: 150px;
        oveflow: hidden;
        border: 1px solid #FFF;
    }
    #content {
        float: right;
        width: 540px;
        oveflow: hidden;
        border: 1px solid #FFF;
    }
    #footer {
        height: 20px;
        overflow: hidden;
        padding: 10px;
        clear: both;
        background: #000;
        color: #FFF;
        border: 1px solid #FFF;
    }
    #container{
        width:694px;
        margin:auto;
       text-align:left;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1>Computer Stuff - The Site That Explains All</h1>
        </div>
        <div id="nav">
            <h6>Navigation</h6>
            <ul>
                <li><a href="index.html">Home</a></li>
            </ul>
        </div>
        <div id="content">
            <h3>Welcome</h3>
            <p>Welcome to my site</p>
        </div>
        <div id="footer">Computer Stuff</div>
    </div>
    </body>
    </html>
    Basically just added the container dimensions and removed some widths from the elements so they could stretch to fill the container and still have borders.


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
  •