SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Balancing a page

    Someone on this site helped me with my index page, and I am most grateful. Now I want to get rid of the bottom "light" brown" area, and make it the "darker" brown....so it appears more balanced.

    Having not created much of this I am at a loss. I tried a few tweaks here and there, but nada....
    Any help would be appreciated...


    www.stoutstandards.com

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,070
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    The light brown colour is set on the <body> of your page, so to change it to the darker brown, you need to alter
    Code:
    body {
        background: #DEB887;  
        font-size:100%;
        margin:0;
        padding:0;
    }
    change #DEB887 to #97694F

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    The light brown colour is set on the <body> of your page, so to change it to the darker brown, you need to alter
    Code:
    body {
        background: #DEB887;  
        font-size:100%;
        margin:0;
        padding:0;
    }
    change #DEB887 to #97694F
    I'm not sure if Barnum wants to completely replace the light brown. I read it as wanting the area beneath the grey footer and the bottom of the viewport to be dark brown, matching the width of #container. If so...

    Firstly, give #container overflow:hidden; so that it clears the floated ul. This will remove the gap at the bottom. Then, unless you'd prefer to let the page end with nothing below #footer, add padding-bottom to #container of however much dark brown area you wish to appear at the bottom. e.g.

    Code CSS:
    #container {
        background: none repeat scroll 0 0 #97694F;
        min-width: 990px;
        width: 95%;
        overflow: hidden; /* added */
        padding-bottom: 50px; /* added */
    }

    At present you have CSS for #container and other elements both in a separate stylesheet - styles.css - and in the embedded stylesheet within the head of your page. This could cause confusion and should be cleaned up but, for now, replace the CSS rule for #container in your embedded stylesheet - not styles.css - with the above.

    Result:


  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks...that did it. Appreciate all your help.


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
  •