CSS Layout

[UBigDummie]

Hey guys. I'm new to CSS. Could someone point me in the right direction here? I'm about to begin working on a new site and I want to use CSS and XHTML. I have been reading tutorials and samples of CSS code for the past few days. I have enough material to be able to control the design of my text, but I'm needing some help with layout. I'd like to have an image across the top of my page and leading about 1/3 the way down the left of the page. That will appear to be one continuous image. Also, I want to have another image at the bottom right of the page which will span about 1/2 the page width. I want both images to remain in their original position regardless of page scrolling. If the user scrolls the page, I want the content to scroll behind these images. Is this possible? If so, can someone tell me where I could find help with this?
Thanks for your time and help.
Andy

[ukgeoff]

You need to contruct a basic page template for yourself. Something like this:

Code: Select all

<div id='wrapper'>
    <div id='header'>
   
   </div>
   <div id='container'>
       <div id='navigation'>
      
      </div>
      <div id='content'>
      
      </div>
      <div id='right-hand-panel'>
      
      </div>
   </div>
   <div id='footer'>
   
   </div>
</div>

Ideally, you should place the header, navigation, right-hand-panel and footer in seperate files of their own and 'include' them into the pages. That way your main pages remain smaller in size and the browser doesn't have to download this info for every page called.

With regard to the use of your background images. These only show within the confines of the div in which they are defined, therefore if you want an image to spread across the top and down one side, you will need to slice this up and load one part into the header and the other into, e.g., the navigation div.

Your footer image can be positioned to the right-hand side of the footer div.

With the right css, your central section that includes the content, navigation and right-hand-panel divs will expand as required according to which ever of these three divs is the longest.