1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Layout is a mess

Discussion in 'Web Development' started by anodyne, Feb 1, 2008.

  1. anodyne

    anodyne New Member

    HI! I am using the BooksOnline template, and I customized the header, logo, etc. I created the html file, which looks great! But, when I view the file in a browser (IE6), it's a mess! (see attached file below)

    I'd greatly appreciate your input on how to clean this up. I've provided the code for reference as this is not published to a website yet. Please help! Thank you!

    CSS
    body {
    min-width:630px;
    margin:0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color:#FFFFFF;
    text-align:center;
    }
    #wrapper{
    text-align:left;
    width:630px;
    margin-left:auto;
    margin-right:auto;
    }
    #nav_spcr{
    background-color:#FFFFFF;
    height:1px;
    width:127px;
    }

    /*******************/
    /***** HEADER *****/
    /*******************/
    .header_nav{
    float:left;
    width:127px;
    height:167px;
    text-align:left;
    color:#FFFFFF;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:11px;
    line-height:25px;
    }
    .header_img{
    background-image:url(../images/header_img.jpg);
    background-repeat:no-repeat;
    width:503px;
    height:167px;
    float:left;
    }
    .header_nav_logo{
    background-image:url(../images/header_logo.gif);
    background-repeat:no-repeat;
    width:127px;
    height:49px;
    border-bottom:1px #FFFFFF solid;
    position:relative;
    }
    .header_nav_bnt{
    background-image:url(../images/header_btn01.gif);
    background-repeat:no-repeat;
    width:127px;
    height:28px;
    padding-left:25px;
    }
    #ruleline{
    clear:left;
    background-image:url(../images/hr.gif);
    background-repeat:no-repeat;
    width:630px;
    height:5px;
    }


    /*******************/
    /***** CONTENT *****/
    /*******************/
    #content_01{
    width:630px;
    min-height:242px;
    background-image:url(../images/nav01_bg.gif);
    background-repeat:repeat-y;
    background-position:left top;
    }
    #content_02{
    width:630px;
    min-height:199px;
    background-image:url(../images/nav02_bg.gif);
    background-repeat:repeat-y;
    background-position:left top;
    }
    .content_nav01{
    width:127px;
    float:left;
    color:#FFFFFF;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-weight:bold;
    }
    .content_nav01_title{
    width:127px;
    height:27px;
    text-align:left;
    line-height:25px;
    padding-left:25px;
    font-size:11px;
    }
    .content_nav01_links{
    width:127px;
    text-align:left;
    line-height:20px;
    font-size:10px;
    padding-left:30px;
    float:left;
    }
    .content_nav02{
    clear:left;
    width:127px;
    color:#FFFFFF;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-weight:bold;
    float:left;
    }
    .content_nav02_title{
    width:127px;
    height:27px;
    text-align:left;
    line-height:25px;
    padding-left:25px;
    font-size:11px;
    }
    .content_nav02_links{
    height:100%;
    width:127px;
    text-align:left;
    line-height:20px;
    font-size:10px;
    padding-left:30px;
    }
    .content_body01{
    width:503px;
    float:left;
    }
    .content_body02{
    width:503px;
    float:left;
    }
    .content_greybar{
    width:502px;
    height:27px;
    background-color:#acb098;
    border-left:1px solid #FFFFFF;
    }


    /*******************/
    /***** FOOTER *****/
    /*******************/
    #footer{
    clear:left;
    background-color:#828282;
    width:630px;
    height:28px;
    float:left;
    }
    .footer_copyright{
    width:305px;
    height:28px;
    text-align:left;
    color:#dbd1d1;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:10px;
    padding-top:7px;
    margin-left:10px;
    float:left;
    }
    .footer_nav{
    width:305px;;
    height:28px;
    text-align:right;
    color:#f8f8f8;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;
    padding-top:7px;
    margin-right:10px;
    float:left;
    }

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
     

    Attached Files:

    anodyne, Feb 1, 2008
    #1