Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Results 1 to 2 of 2
  1. #1
    Join Date
    Jan 2009
    Location
    LDN & The South
    Posts
    147
    Tokens
    0

    Default [HELP] Css on my new blog

    This is my first time really using css and I can imagine it's a bit messy, but the problem i'm having is that the divs below the header navigation are not centered, and they should be touching the header.

    I've tried everything I can think of to resolves this and nothing is working.

    Can anyone help me? Thanks!!



    So here's what the layout should look like




    and heres what the layout looks like at the minuite: www.cannibalex.com


    Heres the Html:

    HTML 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=us-ascii" />
    <title>Al Smith</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="page-wrap"></div>
    <div id="header"> </div>
    <div id="nav" style="width: 1024px; height: 46px">
    <img alt="" src="images/nav_01.jpg" /><img alt="" src="images/nav_02.jpg" /><img alt="" src="images/nav_03.jpg" /><img alt="" src="images/nav_04.jpg" /><img alt="" src="images/nav_05.jpg" /><img alt="" src="images/nav_06.jpg" /><img alt="" src="images/nav_07.jpg" /><img alt="" src="images/nav_08.jpg" /><img alt="" src="images/subnav.jpg" /></div>
    <div style="position: absolute; width: 311px; height: 20px; z-index: 1; left: 382px; top: 16px" id="twitter_div">
    <ul id="twitter_update_list"></ul></div>
    <marquee>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/cannibalex.json?
    callback=twitterCallback2&amp;count=1"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/cannibalex.json?
    callback=twitCallback&amp;count=1"></script></marquee>
    <div id="parent">
    <div style="position: absolute; width: 212px; height: 359px; z-index: 5; left: 752px; top: 461px" id="nav2seven"></div>
    <div style="position: absolute; width: 212px; height: 37px; z-index: 4; left: 752px; top: 392px" id="nav2five"></div>
    <div style="position: absolute; width: 212px; height: 34px; z-index: 1; left: 752px; top: 429px" id="nav2six"></div>
    <div style="position: absolute; width: 283px; height: 84px; z-index: 3; left: 752px; top: 237px" id="nav2one"></div>
    <div style="position: absolute; width: 212px; height: 38px; z-index: 1; left: 752px; top: 321px" id="nav2two"></div>
    <div style="position: absolute; width: 71px; height: 501px; z-index: 1; left: 964px; top: 319px" id="nav2three"></div>
    <div style="position: absolute; width: 212px; height: 33px; z-index: 1; left: 752px; top: 359px" id="nav2four"></div>
    <div style="position: absolute; width: 43px; height: 585px; z-index: 2; left: 12px; top: 237px" id="contentleft"></div>
    <div style="position: absolute; width: 699px; height: 528px; z-index: 1; left: 54px; top: 237px" id="contentwindow"></div>
    <div style="position: absolute; width: 698px; height: 57px; z-index: 1; left: 54px; top: 763px" id="footer"></div></div>
    </body>
    </html>
    Heres the Css

    HTML Code:
    body {background-color: black}
    
    #header{width: 1024px ; padding: 0px 0 0 0px;
    height:124px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;  clear: both; }
    
    #nav{width: 1024px ; padding: 0px 0 0 0px;
    height:59px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB; clear:both; }
    
    
    
    #twitter{width: 331px ; padding: 0px 0 0 0px;
    height:20px;
    font-family: Arial, Helvetica, sans-serif;
    margin-right:auto;
    margin-left:auto; clear:both; }
    
    
    #twitter_div {
    display: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #B00;
    padding: 5px;
    background: #EEE;
    border: 1px solid #666;
    width: 600px;
    line-height: 1.5;
    margin-bottom: 10px;
    }
    
    #twitter_update_list {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    list-style: none;
    margin: 0px;
    padding: 0px; clear: both;
    }
    
    #contentleft{width: 43px ; padding: 0px 0 0 0px;
    height:585px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/sides_02.jpg);
    background-repeat: no-repeat;  }
    
    #contentwindow{width: 698px ; padding: 0px 0 0 0px;
    height:528px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/sides_03.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2one{width: 283px ; padding: 0px 0 0 0px;
    height:84px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_03.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2two{width: 212px ; padding: 0px 0 0 0px;
    height:38px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_04.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2three{width: 71px ; padding: 0px 0 0 0px;
    height:501px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_05.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2four{width: 212px ; padding: 0px 0 0 0px;
    height:33px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_06.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2five{width: 212px ; padding: 0px 0 0 0px;
    height:37px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_07.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2six{width: 212px ; padding: 0px 0 0 0px;
    height:34px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_08.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #nav2seven{width: 212px ; padding: 0px 0 0 0px;
    height:359px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/nav2_09.jpg);
    background-repeat: no-repeat; clear: both; }
    
    #footer{width: 698px ; padding: 0px 0 0 0px;
    height:57px;
    margin-right:auto;
    margin-left:auto;
    background-color: #BABEDB;
    background-image: url(images/sides_12.jpg);
    background-repeat: no-repeat; clear: both; }

  2. #2
    Join Date
    Jan 2009
    Location
    LDN & The South
    Posts
    147
    Tokens
    0

    Default

    Started over. Resliced psd and all. Much cleaner this time around.

    Thanks anyway!

Posting Permissions

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