This objective of this tutorial is to give the reader a better understanding of the structure and layout of the luna template set. Before reading this tutorial, you should have a basic understanding of XHTML and CSS.
The basic structure of the luna template set is shown below.
div's are used to
structure the document and each box shown is a single
div. At the top of each
associated with the
div is listed.
Here are some notes about the various
#wrapperencloses the entire contents of the page, allowing you to set the width of the page.
.searchbarare all in the
.searchbarare classes instead of id's so that they can be duplicated on the page if needed.
#contentheaderis an area above
#contentthat spans the entire width of
#wrapper. This area, by default, contains the error and info messages, but can also include things like banner ads. This
divand its contents are located in
#icwrapperare wrappers used for layout purposes, which will be described in the sidebars section.
#rightsidebarare the containers for the left and right sidebars. These are are included in the
.shadowtop, etc) are used to draw the various components of the shadow around the
#contentarea. See the shadows section for more information.
#contentfooteris the same as as the
#contentheader, except that it is below the
Please remember that the following sections only describe how the CSS is implemented in the luna template set. With CSS there are always several different methods of achieving a certain layout, with each one having its own advantages and disadvantages.
The corners of the shadow are created using
.shadowbottomright containers. They are floated left and
right (depending on which corner they need to go into) and have a corresponding background
image, height and width set.
To fill in the area in between the left and right corners, a background image that repeats
horizontally is set on
.shadowbottom. Similarly, to fill in the areas between the top
and bottom, a vertically repeating background image is set on