Grow your CSS skills. Land your dream job.

help with the correct way to build a page for CSS

  • # December 3, 2012 at 7:17 am

    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

    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

    # December 3, 2012 at 8:27 am

    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

    # December 3, 2012 at 8:50 am

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".