This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

Back to the Home Page   Positioning with CSS
 

How to build a web site without tables. A CSS-P (CSS Positioning) Tutorial

Let's assume you want to build this web page - without (layout-)tables.

Examples of web sites that are developed with this technology are for example at the Orion HiTek, Inc. web site, and on the Links page.

This tutorial will show you how easy this is, and provides you with both the CSS (Cascading Style Sheets) and the graphics. Some CSS vs. NN 4.xx issues are previously addressed in "CSS Issues".

In step 1, Body, we build the scaffold for the page. Step 2, Positioning, will help you to fill this scaffold and will explain where to position what, and why. In Section 3, Fonts & Links, you'll learn which styles to choose for the fonts and links. Tips & Tricks will show you some details and how to circumvent some of the cross-browser related issues that cost so much time, hair and nerves. In the Materials section you will find the direct links to the stylesheets and graphics.

But before we start positioning, we have to understand the Basics of CSS, and you are new to CSS, then please go there first.

Now: let's start with the Body:

Home   • Introduction   • Body  • Positioning  • Fonts and Links  • Tips and Tricks  • Materials 
Content, Design and Programming © 2001 by MaKo from Orion HiTek, Inc.. All rights reserved worldwide.

These pages have been created using HomeSiteTM, FireworksTM and Macromedia DreamweaverTM. The CSS editor is TopStyle ProTM. CSS editor: TopStyle Pro