#content
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 menu at the top lists the various aspects of the template set that will be discussed. Note that this tutorial uses a single HTML page with multiple style sheets and javascript to achieve the paging effect, so your browser's back and forward buttons will not work. Instead use the menu at the top of the page and the next/previous section navigation at the bottom of the section.
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
div
, the id
and/or class
associated with the div
is listed.
Here are some notes about the various div
's used:
#wrapper
encloses the entire contents of the page, allowing you to
set the width of the page.#header
, .navbar
and
.searchbar
are all in the
include_header.html
template..navbar
and .searchbar
are classes
instead of id's so that they can be duplicated on the page if needed.#contentheader
is an area above #content
that 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
div
and its contents are located in
include_contentheader.html
.#ocwrapper
and #icwrapper
are wrappers
used for layout purposes, which will be described in the
sidebars section.#leftsidebar
and #rightsidebar
are the
containers for the left and right sidebars. These are are included in the
include_leftsidebar.html
and
include_rightsidebar.html
templates respectively..shadowleft
,
.shadowtop
, etc) are used to draw the various components of
the shadow around the #content
area. See the
shadows section
for more information.#contentfooter
is the same as as the
#contentheader
, except that it is below the
#content
.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 .shadowtopleft
,
.shadowtopright
, .shadowbottomleft
,
and .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 .shadowtop
and
.shadowbottom
. Similarly, to fill in the areas between the top
and bottom, a vertically repeating background image is set on
.shadowleft
and .shadowright
.
#wrapper
#header
#contentheader
#ocwrapper
.clear
#icwrapper
.clear
#contentwrapper
.shadowleft
.shadowtop
.shadowtopleft
.shadowtopright
.shadowright
#content
.shadowbottom
.shadowbottomleft
.shadowbottomright