Skip navigation
Currently Being Moderated

can someone help with a layout question?

Dec 28, 2012 7:56 AM

Hi guys,


Heres my site


I wanted to have the textured background and green navigation banner at the top of the page continue all the way across the right and left of the web browser.


At the moment to the right and left of the page i just have white margins as i have set my website to a specific size.


Can anyone help explaining how you go about achieving this?



  • Currently Being Moderated
    Dec 28, 2012 8:42 AM   in reply to benn1982

    I would do a couple things.


    First, create 3 container divs, one for the header, one for the body and one for the footer.  The top container would use the pattern background like:


    #header { background: url('pathto/bg.jpg') repeat; }

    #nav { background: url('pathto/navbg.jpg') repeat; }


    Change the "divs" for the nav to a ul/li combination (it will make management easier down the road).


    The body will do the same thing with that pattern background.  Depending on your design/spacing ideas, if there will always be space from the trees, that can be a separate row with a background image of the bushes with the trees.


    The only difficult thing I see is that brown pattenr in the footer.


    If you want I could draw up a sample page to show you want I mean maybe later today.  But that's the basics is putting items into containers and thinking of them in a sense like tables with rows, and go from there.

    Mark as:
  • Currently Being Moderated
    Dec 28, 2012 12:33 PM   in reply to benn1982

    Below I used CSS background-colors that span viewport width.

    Content is inside centered .section divs.

    View source to see the code.



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Dec 29, 2012 4:10 PM   in reply to benn1982

    You would have to start over with a basic layout that supports what you want to do. Also, you would need to pull apart some images to make a repeating background tile for the body and a transparent png for the logo.  I did a quick & dirty demo below to show you how it can be done.


    View source to see the code.  View page info to see the images I used.



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points