[SOLVED] CSS Layout

[dptr1988]

OK, got to get some basic statements out first.

1. I think CSS layout is better then a table based layout ( especially when your start using spacer gifs etc..)

2. I don't know very much about CSS. I've mostly used it to set the style of my paragraphs and code blocks, etc

3. I'm not an expert with HTML either

 

 

But most of the CSS layout examples that I've seen, seem to contain a lot more 'hacks' then an organized, structured layout. That is what has stopped me from being able to learn CSS layout. I don't see any type of structure to it like you would see in a table layout. In table layouts, you can  visualize it as a 'grid' where with different sizes of cells, rows and columns, but in CSS, the best organization is see is nested divs. 

 

Was CSS meant to be used to control the website layout or just basic stuff like size, colors, borders, etc?

 

Am I all wrong? Is there some beginners tutorial that can explain the basic structure of a CSS layout? To me, using CSS for layout seems to be the HTML equivalent of spaghetti code.

 

 

[bilis_money]

patience is all you need for css.

[dptr1988]

Well, takes time to learn CSS. That is why I'm asking the people that already know it, if there is any type of 'structure' to it. If there isn't any 'structure' to it, I don't want to take the time to learn CSS layout. I'll just wait a couple years until someone invents something else. HTML is going to be redesigned/replaced/redefined sometime soon. It sure needs it!

 

But do you people that already know CSS think that there is some 'structure' to it? Or is it more of a set of 'hacks' that you have gathered and put together?

[TheFilmGod]

There is a "structure" is called gluing bricks upon bricks, with the ability to place bricks right on the top of already done bricks. And unlike tables, you have complete control of these bricks. You can move them here and there... 

 

Don't worry about floats, relative positioning when first starting with CSS. Worry about the default css positioning technique, and you'll be fine. Try creating the basic header, body, footer example.

 

If you need help, just ask! 

[dptr1988]

That makes some sense.  That is what I didn't understand.

 

I guess I'll try some more at CSS. Thank you.

 

 

 

 

 

[Daniel0]

Positioning things with CSS is really easy (once you get the hang of it). Try to take a look at these examples where, using the same markup, you have the navigation positioned in three different ways using CSS.

 

http://phpfreaks.com/daniel/tableless/example1.html (left)

http://phpfreaks.com/daniel/tableless/example2.html (right)

http://phpfreaks.com/daniel/tableless/example3.html (top)

 

(the red outline is there so you can see where the divs are)

 

By separating your site in layers (content (HTML), presentation (CSS), behavior (Javascript)) you'll also use less bandwidth as the only thing which is likely going to change very often is the HTML and the rest can be cached by the client. It'll also be easier to maintain, just look at how I was able to change the layout using only the CSS. Had I used tables then I would have to rewrite the HTML every single time. There are other benefits as well, try to research it a bit.