Full width solid background color horizontal strips

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:

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