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?
- The topic ‘Full width solid background color horizontal strips’ is closed to new replies.