WordPress.org

Support

Support » Themes and Templates » Full width solid background color horizontal strips

Full width solid background color horizontal strips

  • Ok. I have spent days and days searching for a solution to this, probably very simple, question. I am relatively new to CSS which will explain my ignorance.

    I would like to know the best way to incorporate full browser width, horizontal solid background stripes into a fixed width, centered website which is made up of mostly floating blocks. See comments below:

    – Some stripes have images in them which fade to a solid colour once they reach the edge of the webpage.
    – I want to know how to do this using background colour – not a repeating image.
    – The strips are located at various spots down the website (as you will see with the attachment… if I have attached it correctly).
    – Top strip is the header and is white; that was easy.
    – Next is Black and is just for decoration with an image in the middle,
    – Next is a dark grey and is the heading area of my main services which run horizontally in four boxes.
    – Next is a lighter grey and is the body copy of my main services
    – Next is a green for… well something else
    – then white
    – And finally grey for my footer

    I have achieved what I want to but suspect I have overdone the id’s and classes (is it called divitis and classitis?! – that is what I have as still learning) and have a feeling it will not work when converting to wordpress.

    Basically I am not sure how to get different background to run horizontally the full width of the browser when contained with a 960px (well in this case 1000px) wide centered website.

    Would someone possibly be able to give me a rough idea as to the best way to do this or point me to a website that does this so I can have a look at the css and html code? I was going to upload txt files of my code and a screen dump of my website (it is not live yet – need to sort this before can go live) but see I can’t do that.

    I am sorry if I have not supplied all relevant information. Not sure what you need.

    Thanks so much in advance. This problem has been bugging me for over a month and I have looked everywhere for assistance, including purchasing books from Amazon. Maybe I am asking the wrong questions or maybe it is not suppose to be done as is not compatible with IE 6 and below?

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Well this is too much information to picture. Could you show us the URL, please?

    MAC 🙂

    Hi there

    Thanks so much for replying to my post.

    I am working locally so there is no url for it at the moment. Am in a bit of a tricky situation as don’t want the website to go live until it is completely finished, or at least working reasonably ok in wordpress. I can’t convert to word press until I know I have coded it correctly.

    Is that the only way to get help on this forum? Are we not able to link txt files with the code? If so then I am in big trouble as I will be creating all my websites locally so if I need support then I have no way of proving code to check… unless it is little snippets which I guess I can copy and paste into here.

    Lisa

    It’s hard to picture what you’re trying to do…..is there a similar site you could provide a link to? OR, could you take a screenshot of your site and post the image somewhere?

    I am not sure if this will work or even how helpful it will be but I have uploaded a screen shot of my home page into Flickr. The link is below. No idea how to use Flickr so hope I have it right:

    slicecreative doolali site

    Sorry to be such a pain. This is the reason I have not asked for help before. I thought it might be a bit complicated.

    Lisa

    I can probably do a screen shot of the code like this as well if needed.

    Thank you so much.

    Lisa

    The photo make it much more clear. 🙂

    Yes – this is definitely something you can do in wordpress. Since your images have shading only in the center areas, you can have a solid background color which will span the entire browser window and the shaded image centered within that section. Divitis won’t be a problem.

    You are so kind to have taken the time to read through my mess of a post. Thank you. I have one other question if possible. If at all possible could you glance over the code below and tell me if based on what you see it is sort of ok? I suspect the answer is ‘no’ as the code supplied is not going to be enough for you to understand what I have done but don’t think I should post the entire code!

    My biggest problem is getting the colour bars to run across the entire browser window due to the 1000px width restriction in the body code below:

    body {
    margin:0;
    font-size: 12px;
    line-height:16px;
    border: 1px solid #666666;
    background-color:#ffff;
    font-family: “Arial”, Verdana, Helvetica, Trebuchet MS, sans-serif;
    min-width: 1000px;
    }

    To overcome this I created a wrap class as follows:

    body {
    margin:0;
    font-size: 12px;
    line-height:16px;
    border: 1px solid #666666;
    background-color:#ffff;
    font-family: “Arial”, Verdana, Helvetica, Trebuchet MS, sans-serif;
    min-width: 1000px;
    }

    .wrap {
    margin: 0 auto;
    width: 1000px;
    border: 0px solid #666666;
    }

    And then used the wrap class around each section as per the html code below. To be honest I have no idea why this even worked as it doesn’t make sense to me due to the wrap having a 1000px width:

    <div id=”services”>
    <div id=”services_topBG”>
    <div class=”wrap”>

    <div id=”services_BC”>
    <h1 class=”services_heading”>Brand Creation</h1>
    <h2 class=”services_subheading”>Create a new visual identity
    or look for your business</h2>
    <p class=”services_body”>This can include the creation of logos, stationery, marketing material, promotional material, building signage, vehicle signage, websites – anything you need to promote your products or services.</p>
    </div><!–//services_BC–>

    <div id=”services_BD”>
    <h1 class=”services_heading”>Brand Development</h1>
    <h2 class=”services_subheading”>Refresh and tidy up your
    existing visual identity</h2>
    <p class=”services_body”>This can include the creation of logos, stationery, marketing material, promotional material, building signage, vehicle signage, websites – anything you need to promote your products or services.</p>
    </div><!–//services_BD–>

    <div id=”services_BM”>
    <h1 class=”services_heading”>Brand Management</h1>
    <h2 class=”services_subheading”>Manage your existing
    visual identity</h2>
    <p class=”services_body”>This can include the creation of logos, stationery, marketing material, promotional material, building signage, vehicle signage, websites – anything you need to promote your products or services.</p>
    </div><!–//services_BM–>

    <div id=”services_OM”>
    <h1 class=”services_heading”>Online Marketing</h1>
    <h2 class=”services_subheading”>Create your website
    and email newsletters</h2>
    <p class=”services_body”>This can include the creation of logos, stationery, marketing material, promotional material, building signage, vehicle signage, websites – anything you need to promote your products or services.</p>
    </div><!–//services_OM–>

    </div><!–//wrap–>
    </div><!–//services_topBG–>
    </div><!–//services–>

    – If I remove the wrap then the page aligns to the left of the browser instead of the center – colours are fine, they run across entire browser.

    – If I change the width in the body to ‘width’ instead of minimum width then all the colors cut off at 1000px.

    I am a bit worried that if I have the wrap class holding together each main area it wont transfer to word press correctly. I am also worried that I have not done it correctly and it is going to fall apart once live or in IE.

    Lisa

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full width solid background color horizontal strips’ is closed to new replies.