SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Scotland.
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background colour doesn't go all the way down?

    http://www.excitingprospects.co.uk/greenockhockeyclub/

    Take a look at the above site and you'll notice that the white background doesn't seem to go all the way down. It's linking to two CSS sheets (this is for later. Also, ignore the fact that I haven't made a print style sheet yet :P)

    This is the main style sheet (for the whole site...when it gets done :P):

    Code:
    /* This section is for the overall look of the site */ 
    html { 
    padding-right: 0px; 
    padding-left: 0px; 
    padding-bottom: 0px; 
    padding-top: 0px; 
    margin: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    }
    body { 
    font-family: Arial, sans-serif;
    font-size: small;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #000000;
    	  
    background: #231E2A;
    margin: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    padding-top: 0px;
    width: auto;
    }
    a:link, a:active, a:visited { 
    text-decoration: none; 
    }
    a:hover { 
    text-decoration: underline; 
    }
    /* End of overall look */
    /* This is for the header section */
    #header   {
    text-align: center;
    }
    /* End of header section */
    /* This is for the left-hand section */
    #left {
    float: left;
    width: 15%;
    }
    /* End of left-hand section */
    /* This is for the content section */
    #content {
    float: right;
    width: 85%;
    border: thin dashed #6B2921;
    margin: 4px;
    padding: 4px;
    }
    #content .copy {
    align: center;
    text-align: center;
    color: #999999;
    font-size: x-small;
    clear: both;
    }
    #content .copy a {
    color: #666666;
    }
    #content .main {
    padding: 4px;
    background: #FFFFFF;
    }
    /* End of content section */
    And this is the page's own style sheet:

    Code:
    /* This is for the content section */
    #content .main .news_box {
    border: thin dashed #999999;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    width: 75%;
    padding: 4px;
    }
    #content .main .news_box .heading {
    background: #231E2A;
    padding: 2px;
    font-weight: bold;
    color: #FFFFFF;
    }
    #content .main .news_box .left_col {
    font-weight: bold;
    vertical-align: top;
    width: 10%;
    }
    #content .main .news_box .right_col {
    vertical-align: top;
    width: 90%;
    }
    	 
    #content .main .l {
    width: 50%;
    float: left;
    }
    #content .main .r {
    width: 50%;
    float: right;
    }
    	 
    #content .main .box {
    width: 80%;
    border: thin dashed #999999;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    }
    #content .main .box .heading1 {
    background: #231E2A;
    padding: 2px;
    font-weight: bold;
    color: #FFFFFF;
    }
    #content .main .box .left1 {
    font-weight: bold;
    vertical-align: top;
    }
    #content .main .box .right1 {
    vertical-align: top;
    }
    /* End of content section */

  2. #2
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the first style sheet I think you need to apply this style:
    background: #FFFFFF;
    to
    #content
    instead of
    #content .main

    That will give a white background to the area inside the red dashed border (content).

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Scotland.
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It means that the white goes all the way up to the border and I want there to be a little space.

    I just settled for using a table to split it in two instead of divs :$


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
  •