- This topic is empty.
-
AuthorPosts
-
December 3, 2012 at 7:17 am #41123andreea115Participant
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
December 3, 2012 at 7:41 am #116152andreea115Participantsorry the div tag i created did not come out
i now include them
bodydiv -outerbody – for entire page
div -outerbody-header -contains background header
end div – outerbody-headerdiv -outerbody-middlepart – contains background middle part image
end div – outerbody-middlediv -outerbody-footer – contains background middle part image
end div – outerbody-footerend 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-headerdiv -innerbody-middlepart – contains contents for page contents
end div – innerbody-middlediv -innerbody-footer – contains footer contents
end div – footer contentsend div – innerbody – constraining page to 960
December 3, 2012 at 8:27 am #116155Paulie_DMemberNo, 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/nhrDKDecember 3, 2012 at 8:50 am #116156andreea115Participantah. 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.