4 Replies Latest reply on Dec 29, 2012 4:10 PM by Nancy OShea

    can someone help with a layout question?

    benn1982 Level 1

      Hi guys,


      Heres my site www.allroots.org


      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?



        • 1. Re: can someone help with a layout question?
          Ben M Adobe Community Professional

          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.

          • 2. Re: can someone help with a layout question?
            Nancy OShea Adobe Community Professional & MVP

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

            Content is inside centered .section divs.

            View source to see the code.




            Nancy O.

            • 3. Re: can someone help with a layout question?
              benn1982 Level 1

              Thanks for your replies,


              I still feel very confused though. Could you explain the areas of my code i'd need to change? Will i have to start over again?


              I have saved a jpeg banner that doesnt contain the logo to have running at the top of the page and i have a plain background to run along side the content.

              Im changing the footer in a few days so im not too worried about that just now.


              Can i make all of the to my template that will them apply to each page? Heres the code for it...






              <div id="container">

              <div id="banner">

              <div id="bannerblankspace"></div>

              <div id="navhome"><p><a href="../index.html">home</a></p>


              <div id="navabout"><p><a href="http://www.allroots.org/about">about</a></p>


              <div id="navyoga"><p><a href="../yoga/index.html">yoga</a></p>


              <div id="navclasses"><p><a href="../classes/index.html">classes</a></p>


              <div id="navretreats"><p><a href="../retreats/index.html">retreats</a><a href="../treatments/"></a></p>


              <div id="navtreatments"><p><a href="../treatments/index.html">treatments</a></p>


              <div id="navblog"><p><a href="../blog/index.html">blog</a></p>


              <div id="navcontact"><p><a href="../contact/index.html">contact</a></p>



              <!-- TemplateBeginEditable name="EditRegionMain" -->

              <div id="editablecontent"></div>

              <!-- TemplateEndEditable -->

              <div id="footer"> <img src="../footer.jpg" alt="all roots footer" width="1100" height="442" border="0" usemap="#Map2" />

                <map name="Map2" id="Map2">

                  <area shape="rect" coords="633,414,722,437" href="http://www.bennh.co.uk" alt="benn.h design" />








              • 4. Re: can someone help with a layout question?
                Nancy OShea Adobe Community Professional & MVP

                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.