Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Css/css-p

[krumms]

Hey all,

I've recently become interested in CSS (particularly the positioning/layout aspects of CSS2) and am desperately trying to pick it up. I've been working with HTML/CSS for a few years now, but I can't seem to come to terms with putting together a decent layout using CSS-P.

I've read that CSS-P is brilliant for separating content from layout - i.e. you communicate at the content level using HTML and then format that raw content using CSS-P - but something I've become aware of is that CSS-P seems to rely on the order of your HTML/XHTML tags, unless you use absolute positioning.

Absolute positioning seems extremely awkward at best - placing a fixed-width absolutely positioned div element in the center of the page such that the middle of the page passes through the middle of the div box is not possible without locking in to a particular browser resolution for example.

Also, some of the most impressive examples of CSS/CSS-P that I've seen (http://www.csszengarden.com, http://www.overcaffeinated.net) make minimal use of absolute positioning, which seems to lead me to beleive that a mix of largely relative/static/fixed positioning is the way to go - but then, again, that becomes dependant on the order of the div tags.

Am I missing something really obvious, or do I just have to bite the bullet and rearrange the div tags in order to change the layout (and thus defeating the purpose of using CSS-P in the first place).

Cheers,
TL

[platinum]

Yes, CSS is great for seperating content from design, it does have a slight learning curve as people are generally used to "thinking in tables", what were you having problems with exactly?

It does rely on the logical order of tags, if your information is sematically correct, you shouldn't have any problems. header -> content -> footer for example

[krumms]

Thanks for your reply platinum.

There's no one problem I'm having with CSS-P, it just strikes me as particularly limited - especially given that browsers seem to have trouble implementing various bits and pieces of the CSS2 spec correctly.

If it relies on the logical order of the tags, then doesn't that make layout dependent on the content? If I had a div containing menu throughout my site, for example, that I wished to move from the top of each document to the bottom, then I would still have to change the structure of the XHTML document - or use absolute positioning, which then has the problem I mentioned in the previous post (i.e. margin-left/right: auto has no effect because the menu div is now the beginning of a new hierarchy of boxes, and left: 50% places the menu such that it would be right-heavy). Why is it so hard (impossible?) to correctly center align absolutely positioned elements? It's little things like that which irk me.

So the CSS layout is still dependant on the content of the XHTML doc, which defeats the purpose of using CSS-P.

I understand that most people probably aren't concerned about such changes taking place, I just find it baffling why it would work in such a manner.

I would have thought a 'constraints' type mechanism ala Java Swing/earlier versions of wxWindows would make positioning both more straightforward and easier to shift around.

But hey, maybe I'm complaining about nothing, I hope what I says here makes sense. I'm just having trouble seeing why I should spend the time learning CSS-P properly if the advantages that I hear about seem to be half thought-out.

That said, I like the idea of simplified HTML markup - but again, even that may be lost at times to ugly hacks used in working around browser issues.

[FrzzMan]

You are misunderstood the purpose of CSS/CSS2.

The purpose of CSS is to centralize the website style.

The purpose of CSS2 (CSS-P) is to positioning webpage element.

Of course, CSS2 spec haven't reach the sastified state for designer, so CSS3 spec is being developed.

To seperate data/layout you should know what is the layout and what is the data.

The data, you have already know I'm sure. But the layout here are both (X)HTML code and CSS file.

If you thinks that data are (X)HTML files, are your header, footer your data? They are your layout element, to change the layout, you have to redesign it.

About the *outline* of your data, I won't think you will use CSS-P to position it... if you do, you're a kind of odds people ^_^

Take a look, this is my next template in development. I'm newbie about CSS (start to study it for 2 weeks I think) so don't expect too much from it. But I think you can learn something from it like me when I learn to design... ^_^

http://www.geocities.com/frzzman/