Building your first CSS layout page!

How to get in the right mindset.

[Purple Martin]

quote from [webmasterworld.com...]

I'm attempting to teach myself how to use CSS by rebuilding a very simple site I built using tables a long, long time ago...

When I first wanted to learn CSS, I did exactly the same thing: I tried to convert a table site to a div site. Now that I have a bit of CSS experience, I think that this approach was probably a mistake. It's like trying to fit a square peg in a round hole.

Designing a page in CSS is a different thing from designing a page with tables. I think people would be better off starting with a fresh site, and thinking in a CSS way. Table parts always fit exactly together, and all the parts make an exact rectangle. With CSS divs you aren't restricted to that model: each div has freedom to go wherever you want, overlapping others if you like. The design doesn't have to be rectangular with no gaps. It can be much more free-form.

To design a site with tables, do this:
Get a piece of paper, a ruler, and a pencil. Draw a line (horizontal or vertical) across the paper from edge to edge to divide it in two. Draw more dividing lines until you have a layout that looks good.

To design a site with divs, do this:
Cut out a rectangle of paper (any size or proportions) for one of the components of your layout. Cut out more rectangles for other components. Lay them out on the floor and shuffle them around until you get a layout that looks good. The bits of paper can have gaps in between, or overlap each other, or whatever.

I'll bet that your table site and your div site both look good.
I'll bet that they don't look anything like each other.

:-D

[BlobFisk]

Great post Purlple Martin and some very interesting designing ideas!

[DrDoc]

Great post!

Another thing that makes a huge difference is to start with content first. With table sites I always started building the template first, then adding contents. Now I always create all the contents first, then I worry about what I want it to look like. :)

[pageoneresults]

I'll agree, content first!

One of the things I've found helpful during CSS design is this...

div{border:1px solid #f00;}

I like to see where everything is, what type of padding, margins, etc. I'm working with. Adding the borders really helps to get a visual on layout.

[gecko001]

Great Post, I am embarking down this div vs tables path right now and that has given me some great stuff to consider.
Cheers

[TheDoctor]

Good post Purple Martin. It is not as easy to change an existing site to CSS as it is to build one from scratch. I suspect the reason why so many people think CSS is complicated is because they have gone about practising CSS by rewriting an existing site

I tried to change an existing site for my first CSS page, and failed miserably. I then built a small site - unconnected with the first - and used CSS from day one. It was amazingly simple to build!

With the experienced gained (and a lot of reading of this forum) I returned to my original site, rethought it, and succeeded in getting it right second time around. But people should realise that changing a site to CSS is a two-stage process - first undesign it, then design it anew. Never try a short-cut!