CSS Models

CSS layout sample : Dozens of models to help you create without tables
CSS menus galleries : All sort of menus for inspiration (simples, graphics, expanding,...)

Most visited

CSS layout models

Prerequisite: initiation to basic CSS

Here is a mini "work order" type document, some sort of check list to prepare before you create your CSS template:

Fixed width template (px) or fluid width (%) - if you chose a fixed template, specify the width, centered: yes/no
Number of blocks and structure:
1. header: yes/no -specify height and width
2. footer: yes/no -specify height and width
3. left menu: yes/no - expanding yes/no, specify height and width
4. right menu: yes/no - expanding yes/no, specify height and width
5. horizontal menu: yes/no -expanding yes/no specify height and width
6. scrollable central content: yes/no

Once your template is constructed, you only need to fill in the blocks. For the menus, you can easily configure them to your requirements as in this other tutorial, or again get some inspiration from the menus gallery

Here are a few models. To see how they work simply view the source code, you will get the HTML code for the template as well as links to the CSS style sheet corresponding (named file_name.css):

Print article

CSS Models

Most visited

Sponsors

CSS layout models