Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I am SOOO confused.

    The site layout is completely messed up. I usually have this problem but I didn't always, I most be forgetting something.

    http://groogstestpages.freehostia.com/computerturret/

    I'm making this layout for a friend. For some reason the wrapper wont come completely over everything, if I get rid of the float: left; on the footer it does but the margin-top doesn't work and it's touching the menu. The news bar won't go all the way over even though I did the math and it should fit perfectly. I added 10px to the width but when I go into IE it moves down under the menu. I'm so confused! In IE the wrapper seems to work but all the tops of the menu and content are short. Here is my code-

    HTML
    Code:
    <html>
    <head>
    <title>
    ComputerTurret Home
    </title>
    <link href="ctstyle.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    A:link {text-decoration: none; color: #fff;}
    A:visited {text-decoration: none; #fff;}
    A:active {text-decoration: none; #fff;}
    A:hover {text-decoration: none; #fff;}
    </style>
    </head>
    <body>
    
    <div id="wrapper">
      <div id="header"></div>
      <div id="content">
        <div id="left">
          <div id="entertainment">
            <div id="entertainment_top"><h1>Entertainment</h1></div>
            <ul>
              <li>Games</li>
              <li>Animations</li>
              <li>Graphics</li>
            </ul>
          </div>
          <div id="help">
            <div id="help_top"><h1>Help</h1></div>
            <ul>
              <li>Tutorials</li>
              <li>Downloads</li>
              <li>Articles</li>
            </ul>
          </div>
          <div id="extra">
            <div id="extra_top"><h1>Top</h1></div>
            <ul>
              <li><a href="computerturret.com">Home</a></li>
              <li>Forum</li>
              <li>Contact Us</li>
              <li>Portal</li>
            </ul>
          </div>
        </div>
        <div id="right">
          <div id="right_top"><h1>News</h1></div>
          <div id="right_content">GROOG IS DONE WITH TEH LAYOUT!! w0000000et!</div>
        </div>
      </div>
      <div id="footer"><h1>© 2007 ComputerTurret.com</h1></div>
    </div>
    
    </body>
    </head>
    CSS
    Code:
    body {
    font-family: verdana, arial;
    font-size: 12px;
    text-align:center;
    color: #fff;
    background-color: #000;
    }
    
    #wrapper {
    margin: 0px auto;
    border: 1px solid #fff;
    text-align: left;
    padding: 5px;
    width: 800px;
    }
    
    #header {
    border: 1px solid #fff;
    width: 798px;
    height: 100px;
    background-image: url('images/header.png');
    }
    
    #content{
    margin: 5px 0px 5px 0px;
    }
    
    #left {
    float: left;
    width: 180px;
    border: 1px solid #fff;
    }
    
    #entertainment_top{ 
    padding: 5px;
    border-bottom: 1px solid #bbb;
    width: 170px;
    height: 15px;
    background-image: url('images/top.png');
    }
    
    #help_top{ 
    padding: 5px;
    border-bottom: 1px solid #bbb;
    width: 170px;
    height: 15px;
    background-image: url('images/top.png');
    }
    
    #extra_top{ 
    padding: 5px;
    width: 170px;
    height: 15px;
    border-bottom: 1px solid #bbb;
    background-image: url('images/top.png');
    }
    
    ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    
    ul li {
    padding: 5px;
    padding-left: 10px;
    border-bottom: 1px solid #bbb;
    }
    
    ul li:hover {
    background-color: #444;
    }
    
    h1 {
    margin: 0px;
    padding: 0px;
    color: #fff;
    font-size: 12px;
    font-weight: strong;
    }
    
    #right {
    float: left;
    border: 1px solid #fff;
    margin-left: 5px;
    width: 601px;
    }
    
    #right_top {
    border-bottom: 1px solid #bbb;
    background-image: url('images/top.png');
    padding: 5px;
    width: 591px;
    height: 15px;
    }
    
    #right_content {
    padding: 5px;
    width: 591px;
    }
    
    #footer{
    padding: 5px;
    width: 790px;
    float: left;
    clear: both;
    margin-top: 5px;
    background-color: #444;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    For starters you have no doctype. Add this above your <html> tag.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    After doing that you need to clear your floats.
    http://positioniseverything.net/easyclearing.html
    Last edited by _Aerospace_Eng_; 07-22-2007 at 04:09 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Worked! I've seen this before but I don't understand it. What did it just do?

    And things seem to work in IE but in FireFox the footer still is hugging the menu. How do I fix that?

    Thanks for your help

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read the article about clearing your floats. As to the doctype I suggest you read the sticky in this forum.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Read the article about clearing your floats. As to the doctype I suggest you read the sticky in this forum.
    http://positioniseverything.net/easyclearing.thml
    Not Found
    The requested URL /easyclearing.thml was not found on this server.


    effpeetee

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sorry about that though it should be obvious of what the url was.
    http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Sorry about that though it should be obvious of what the url was.
    http://positioniseverything.net/easyclearing.html
    Yeah, it was obvious. It is a very good site.

    Frank
    Last edited by effpeetee; 07-22-2007 at 06:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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