help with the correct way to build a page for CSS

[andreea115]

hi everyone

i have a problem with the construction of my page and really just need some advice.

i want my page to have 3 backgrounds images that span the entire width of the page. i.e separate image in the header, middle and footer part of the page.

i then want to have an ‘actual page contents div tag’ that sits on top of these background images. this page will only be 960 in width and be centered in the middle of the window.

so, for the background images, i have constructed an outer body div containing 3 inner divs

The header Div
The middle part Div
the footer Div

( my logic behind creating the page this way is that i want each of the three separate images to be contained in their own area and still span the entire width of the window. )

However, i then need another div that will contain the actual page contents remember that the page content is only 960 ( it will also have 3 sections; contents for header, middle part and footer).

i don’t know whether this is the correct approach thus far. but if it is, my question/confusion is this.

where do i place the actual page contend div so that its contents can align with the outer divs for the background images.

it might be easier if i demonstrate what i mean

the above is the outter divs that span the entire page. i now want to includes the divs below for the page content- But where do i place it?

if i place the above div in the middle of the div for the middle page div i.e :

then the contents of the page will not be able to align with the footer or header sections.

please advice where i am going wrong with this.

warmest regards

Andreea

[andreea115]

sorry the div tag i created did not come out

i now include them
body

div -outerbody – for entire page

div -outerbody-header -contains background header
end div – outerbody-header

div -outerbody-middlepart – contains background middle part image
end div – outerbody-middle

div -outerbody-footer – contains background middle part image
end div – outerbody-footer

end div – outerbody – for entire page

end-body

div -innerbody – this is the div for page contents-constrains it to 960

div -innerbody-header -contains header page contents
end div – inner-header

div -innerbody-middlepart – contains contents for page contents
end div – innerbody-middle

div -innerbody-footer – contains footer contents
end div – footer contents

end div – innerbody – constraining page to 960

[Paulie_D]

No, you can’t do it that way.

What you need are, essentially, 3 outer-wrapper divs one for each background image (top, middle, bottom)

Within each of those divs are your ‘content’ divs which are set to 960px wide and centred. You can put anything within those ‘content’ divs that you want.
http://codepen.io/joe/pen/nhrDK

[andreea115]

ah. wow.

hello again Paulie_D

thank you so much for your prompt answer.

its is crystal clear now. i am very grateful for your kind attention. i now know how to construct the page.

warmest regards

Andreea

[Author]

Posts