Grow your CSS skills. Land your dream job.

Need Direction on Best Technique for a Site!

  • # November 22, 2011 at 3:43 pm

    I need some direction on the best way to make this site work online without loading too slow. New Site Layout

    The entire background is a width of 1600px with main content on the page having a width of 970px. I considered using the large background techniques, but the site needs to grow horizontally and the footer needs to move with the content.

    Any ideas and insights are appreciated!

    # November 22, 2011 at 3:53 pm

    I would do something similar to this:

    html:





    Nav Goes Here


    Content Goes Here


    Footer Goes Here




    css:



    body {background: green url(images/landscape-image.jpg) no-repeat center top;}
    .container {width:970px;margin:0 auto;}
    header {width:100%;height:100px;background:url(images/black-header-bg.jpg) repeat-x center 0;}
    footer {width:100%;height:100px;background:url(images/black-with-grass-top-bg.jpg) repeat-x center 0;}

    # November 22, 2011 at 3:58 pm

    That background might be a good candidate for background-size: cover;.

    # November 22, 2011 at 3:58 pm

    I really like the design by the way.

    # November 22, 2011 at 6:40 pm

    Thank you standuncan

    TheDoc ~ That is what I thought at first, but with the content growing and shrinking on other pages and the footer being separate, I don’t know how I could get that to work. Any ideas?

    # November 27, 2011 at 12:55 pm

    Thank you both for your help….I just finished up the site, so if you would like to give me some feedback…. join the new discussion

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

You must be logged in to reply to this topic.

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