Website layout using CSS

**LazyJim** · 10-21-2003, 05:07 AM

Ok, we all know CSS is extremely usefull for seperating style out of you code and so making it easier to change and maintain the style and the rest of it.

But most of us find CSS inadequate for our Layout needs.

Every time the next version of CSS is recommended by the W3C we have to wait for browsers to pick it up, then wait for users to pick up the new versions of the browsers. This takes ages!
The diffrences in BOX-MODELS does not help either.

I don't know about the newer CSS properties, or selectors.
Has anyone got any favourite new features?

Anyone want to share any particulaly useful ways to use CSS?

What do you think CSS should do that it currently cannot?

Browser specific CSS properties are a good example of things it could do. e.g. -moz-border-radius: <length>; that rounds the corners of boxes in mozilla browsers

**LazyJim** · 10-21-2003, 06:13 AM

I think we need a way to directly specify how block elements should be aligned within their parent blocks.
the options shoud be combinations of top-center-bottom-left-right.

Is there one of these?

niceguyeddie · 10-21-2003, 06:15 AM

CSS is more than adequate for page layouts. It is simpler to do and maintain.

I'll try to post this link again, and lets see if it up today

http://www.csszengarden.com/

**LazyJim** · 10-21-2003, 06:28 AM

guess I should look through all the CSS on there.

Can't you think of anything that you wuold like CSS to do that it doesn't?

**LazyJim** · 10-21-2003, 06:31 AM

Isn't the 'correct' way to put a block element in the horizontal middle to have a setting of "auto" on the left and right margins?

If so thats terribly illogical in my view, totally indirect, and it doesn't even imply that it will work till you try it.

**LazyJim** · 10-21-2003, 06:35 AM

what about flexible layouts or 'liquid' pages that stretch to make the best use of available space?

niceguyeddie · 10-21-2003, 06:50 AM

Quote:

Originally Posted by LazyJim

what about flexible layouts or 'liquid' pages that stretch to make the best use of available space?

No one forces you to use absolute dimensions with CSS. It's just as easy to do a liquid layout with CSS than with using tables. More so, in my opinion actually.

Less bandwidth, faster rendering, and easier development for those that take the time to learn the CSS specs;) The only problem is the cost of entry in learning CSS is higher.

I have yet to find something that I can not do with a CSS layout over a tabular one.

**LazyJim** · 10-21-2003, 07:25 AM

I agree that is easier with CSS but well.

Quote:

I have yet to find something that I can not do with a CSS layout over a tabular one.

And they all work perfectly cross-browser?

niceguyeddie · 10-21-2003, 07:37 AM

I test on IE, Moz and Opera and find little problem with what I do. Do they work on IE 4.0 or Netscape 4.0? No, and as such I don't allow the stylesheets to be imported and just give the raw output. I don't develop for antiquated technology, as that enables its use.

For that matter though, tables have their own unique cross browser problems. To make some things work with tables cross browser you have the need to break xhtml specs which is silly to do. You need to do hacks to get everything perfect, and you spend just as much time working on that as you do the CSS. When it's all said and done though, I can just as easily override my CSS to something new, where as a tabular design will take a complete new mark-up.

Are there things that CSS can do better? Sure, that is why it is a evolving spec. However, to say that you can not layout a page using CSS that work cross browser is silly as there are thousands of examples across the net.

**LazyJim** · 10-21-2003, 07:58 AM

Yes, I know it CAN be used and can be used to great effect.

I'm not worried about the realyl old browsers eaither, I am woried about the differences in current browsers.

is this true:

Quote:

To put a block element in the horizontal middle, (to center it), give it margin: 0px auto;

Distorted · 10-21-2003, 07:59 AM

Quote:

what about flexible layouts or 'liquid' pages that stretch to make the best use of available space?

Relative positioning is a good tool to use if you want to make a liquid layout. It allows you to move things around while keeping them in the flow of the page.

Quote:

To put a block element in the horizontal middle, (to center it), give it margin: 0px auto;

That's how you do it if you don't want to use html.

**LazyJim** · 10-21-2003, 08:06 AM

Quote:

Originally Posted by Distorted

Quote:

To put a block element in the horizontal middle, (to center it), give it margin: 0px auto;

That's how you do it if you don't want to use html.

And is this an obvious way to do it?
Does it work vertically?

Distorted · 10-21-2003, 08:08 AM

It's definitly not obvious.

I'm going to try it vertically when I get home.

**LazyJim** · 10-21-2003, 08:37 AM

i've tried before, I don't think it works vertical.

I makes no sense, using margins to set block level alignment.
Thats just CRAZY!

oh yeah, whatever I say bad about it - I LOVE CSS!

GEWbert · 10-21-2003, 09:39 AM

i've never used exclusively CSS for any project, thou on my next one i think i will, to see what happens

**LazyJim** · 10-21-2003, 10:20 AM

Good luck

AcRoNym · 10-21-2003, 12:12 PM

but its bugged in diff browsers i think theres hacks but thats no good!! anyone know how i can position text over a bg image within a cell exactly where i want withiout moving the adjacent cell sideways when i type in it using CSS?

**LazyJim** · 10-21-2003, 12:48 PM

Perhaps eddie could give us some tips cos he's such a nice guy!

Or at least show us what he has achieved?

Brian · 10-21-2003, 01:53 PM

Quote:

Originally Posted by niceguyeddie

CSS is more than adequate for page layouts. It is simpler to do and maintain.

I'll try to post this link again, and lets see if it up today

http://www.csszengarden.com/

Agreed.

John Scott · 10-21-2003, 01:59 PM