Grow your CSS skills. Land your dream job.

Coloring sections

  • # January 3, 2009 at 1:15 pm

    I am trying to get the top part of the site to have a dark gray color, I can get it so that it looks like the image below
    http://learnitpassiton.com/ABC/wp-conte … ecolor.jpg

    But I want the gray color to go down to line up with the header or even to the bottom of the page and link with the footer. I want the middle to stay that white color.

    Any ideas?

    Cheers,
    Oh and I am still having some trouble positioning a monster on the left hand side of the page, not sure which php page to put the div for it?

    Thanks again for all the earlier help :)

    # January 3, 2009 at 2:09 pm

    without seeing code we can’t really advise
    are you using borders for the grey? or is it in its own div like a wrapper?

    has the div with your dark grey got a height?

    # January 3, 2009 at 2:28 pm

    I am not 100% sure on this, but the top and the top nav are all background styles with #231f20 as the color. The header image just has the color in it. I think the footer if getting the color from the page style?

    Thanks for having a look.

    I have set the background color for the page. Here are my layout styles, this is the color :#231f20
    /*========= LAYOUT =========*/

    #page{
    width: 960px;
    background-color: #231f20;
    margin:15px auto;
    border: 1px solid #CCCCCC;
    position: relative;
    }
    /*— Main Columns —*/
    #columns{
    padding:15px 15px 25px;
    background-color: #FFFFFF;
    margin: 0px;
    }
    .col1{
    float: left;
    width: 595px;
    padding-right:15px;
    }
    .col2{
    float: left;
    width: 320px;
    position: relative;
    }
    /*— Sub Columns —*/
    .subcol{
    width: 150px;
    }
    .subcol h2{
    font-size: 14px;
    padding: 0 0 10px;
    color: #FFFFFF;
    }
    #side {
    position: relative;
    }

    /*========= HEADER =========*/

    # January 3, 2009 at 2:38 pm
    "godonholiday" wrote:
    I am not 100% sure on this, but the top and the top nav are all background styles with #231f20 as the color. The header image just has the color in it. I think the footer if getting the color from the page style?

    but what is your html??? this makes no sense without the html!!!!!

    would be easier with a link

    anyway is this the colour you want? #231f20 if so make your div to be the same size as the main image

    # January 3, 2009 at 2:53 pm

    A link to the site?
    http://www.learnitpassiton.com/ABC

    a link to the html? is it not readable in source view? If not should I link to each php page?

    I think if I create a div and set the color, I will loose thw white in the middle of the page? or would I haveo play with the z-index?

    thanks

    Rob
    # January 3, 2009 at 7:25 pm

    to do that what I would do is create a background slice – 1px high and the full width of your #columns div – of that section you want. then set it as the #columns background image repeating y.

    So cut a section of this 1px high – full width:

    http://www.svgonline.co.uk/abcbg.png

    and set it as the #columns background.

    # January 3, 2009 at 7:46 pm

    Thanks, I’ll give that a go. Late now :)

    # January 4, 2009 at 6:41 am

    Thanks! I have got it to work… but now I think it looks a little claustrophobic! lol Some of the header does not lign up right either.

    Well thanks for the help!

    Rob
    # January 4, 2009 at 8:02 am
    "godonholiday" wrote:
    Thanks! I have got it to work… but now I think it looks a little claustrophobic! lol Some of the header does not lign up right either.

    Well thanks for the help!

    To be honest I liked your use of white space with a box layout – it worked quite nice with the subtle darker colour in the background. I would keep it as it is and match the footer to the rest :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".