Need help? Check out our Support site, then


Changing website layout using CSS

  1. Hello,

    Can anyone help with a few minor problems I'm having with the layout of my website. I don't know anything about building websites so this has been a tooth pulling exercise for the last few days. I feel its finally there but...

    http://theconsultancygroupguyana.com/

    (1) - I'd like to extend the width of the website so that it takes up the entire page. I found a help site with some codes which I tried but the theme pic (bamboo) didn't go across the entire page.

    (2) I'd like to change the tabs to orange to match with the logo and give it a bit of color

    (3) If you notice on the top right, the search tab covers the 'contacts' tab, can't figure out how to change that one.

    I'd be grateful for any help you can provide.

    The blog I need help with is theconsultancygroupguyana.com.

  2. Moderators:
    Would you please move this to the CSS forum? thanks.

    theconsultancygroup,

    Because you want to widen the layout (and I'm assuming you want a flexible layout), you'll need to create a header image that will expand and contract accordingly. For that you will need to replace your current "#headerimage" selector definition with this one:

    #headerimage {
    background:#223007 url('http://theconsultancygroup.files.wordpress.com/2010/04/bamboo-19.jpg') top right no-repeat!important;
    clear:both;
    color:#fff;
    height:200px;
    width:auto;
    margin:10px;
    }

    You'll notice that I've set the background color to a dark green. The image should fade to that green (or whatever green color you want to have) so it flows well.

    To widen your layout, and change the tabs color, try this code:

    #container,#navigation,#footer {
    width:90%;
    min-width:720px;
    }
    
    #navigation .page_item a {
    background: #90330e;
    color: #cac5a9;
    }
    
    #navigation .page_item a:hover {
    background: #90330e;
    color: #fff;
    }
    
    #content {
    margin:0;
    }
    
    #content-main {
    width:auto;
    padding:0 200px 0 20px;
    }
    
    #sidebar {
    float:right;
    width:200px;
    margin:0 10px 0 -210px;
    }

    For aesthetic purposes, I'm still leaving a margin on both sides of the layout, that's why I'm setting the overall width to a 90%; if you want the layout to cover the whole screen, then change it to 100%.

    Also, as you can see, I'm setting a minimum width of 720px; otherwise, if the browser window is resized to a smaller width, the sidebar would be moved to the bottom. You don't want that to happen.

    Regarding item number 3, that should be taken care of with the new width.

    The whole CSS code should look something like this:

    #container,#navigation,#footer {
    width:90%;
    min-width:720px;
    }
    
    #content {
    margin:0;
    }
    
    #navigation .page_item a {
    background: #90330e;
    color: #cac5a9;
    }
    
    #navigation .page_item a:hover {
    background: #90330e;
    color: #fff;
    }
    
    #headerimage {
    background:#223007 url('http://theconsultancygroup.files.wordpress.com/2010/04/bamboo-19.jpg') top right no-repeat!important;
    clear:both;
    color:#fff;
    height:200px;
    width:auto;
    margin:10px;
    }
    
    #content-main {
    width:auto;
    padding:0 200px 0 20px;
    }
    
    #sidebar {
    float:right;
    width:200px;
    margin:0 10px 0 -210px;
    }

    HTH

  3. Wow - you're amazing. Thank you very much for all the time you spent on this.

  4. beaumondebrooke
    Member

    i'm also new to this blogging world. i'm thinking of changing my layout, but don;t know where to start from a scratch! =))

Topic Closed

This topic has been closed to new replies.

About this Topic