Complete CSS Example and Page Template
Structure of the document
<div id="frame"> <div id="header"> </div> <div class="logo"> </div>The frame divider holds: header, sidebar and content.
<div class="sitetitle"> </div>
<div id="sidebar"> </div> <div id="content"> </div> </div> <div id="footer"> </div>
The header divider holds an image and the title of the site.
First level IDs
- frame, the page is stored inside a centered frame.
- footer, bottom of the page, usually displays a copyright.
Second level
Inside a container we can define other dividers.- header, top of the page, may hold a logo, a title, etc...
- sidebar, left panel to store links to other pages.
- content, the body of the page. May be the only part
of page that change from page to page.
Third level
In this example, we have defined two dividers inside the header.
- logo, the image at left.
We have to define the height and the width in the stylesheet (defaults are 0). - sitetitle, le titre de page.
The stylesheet define the font and its size, the position.