10 replies to this topic

[fffanatics]

Hey everyone, the previous topic has inspired me to ask how do you create a good css table layout. I have tried over the years but tend to run into lots of issues since as soon as you start floating divs, things get complex and really hard to give good positioning. Plus, they tend to look different in firefox and IE. Does anyone know of any good tutorials or could write a simple one here to go over how to make a css table layout. Thanks so much in advance.

[jlhaslip]

I can write a Table-based layout, but why would I do that when CSS is much cleaner, faster, more Standards Compliant and Tables are out-dated?

If you need assistance overcoming IE's crappy rendering of your page, post another Topic and someone will assist in its 'fixing' for IE.

[sonesay]

Yeah complex layouts can get abit hard to achieve in CSS where as in tables you seem to have somewhat more control. But the one thing I have learned about tables is once stacked I beleive there is a off set unlike divs. I've seen very nice CSS layouts over time and wondered how they did it. Looking at their code it soon went over my head so I'm sure if you stick to buliding with CSS over time you will learn how to build sites around bugs in different broswers.

Theres sites out there that at are professional sites but they still break at certain conditions. for example when window is resized small things get crazy and out of order.

If your site contains alot of different elements and your planning to make it look the same across all broswers it will take alot of time to identify how to display each element correctly in all brosewrs. This is unpractical as it will take so long to get a website out. It is easier to make your site look consistent over different broswers if it contains few elements. But this is never the case we all know how boring it can be if you dont add more in.

[jlhaslip]

Here is a site which offers 40 different CSS based Layouts.

http://blog.html.it/layoutgala/

Pick one which most closely resembles the basic page and start with that. Add the finishing touches and you are done.

[ironchicken]

Or try this site.

http://www.maxdesign...n/page_layouts/

[karlosantana]

jlhaslip:- i always wonder HOW do you find these things? is it just google all the time?

[KansukeKojima]

Well, whenever I set out to learn something new: I look for an example of it on the internet. Once I find what I like I will read the source code, find out the location of their css docs, and figure out how in the world they pull it off...

From there I try to do it my self, twisting it to suit my own needs.

[jlhaslip]

karlosantana, on Jan 31 2008, 09:56 AM, said:

jlhaslip:- i always wonder HOW do you find these things? is it just google all the time?
karlos

I hang out on other Forums, most of them have to do with html/css/php.
And I am nosey... ... with a full set of Bookmarked pages in my Browser.

[karlosantana]

HAHA! well there we go you need lots of accounts a HUGE database of bookmarks
(yoda voice)only then will you be ready for jlhaslip's knowledge
Anyway back to the topic. I've started using css in my designs mainly div layers cause they are Brilliant you can meddle about with EVERYTHING using css love it! you can even use them in javascripts which i didnt know! like this one that one's really cool might even use it in the near future, who know?
Anyways im gonna stop yacking and do some work now so bye bye!

[Echo_of_thunder]

jlhaslip, on Jan 31 2008, 01:44 AM, said:

Here is a site which offers 40 different CSS based Layouts.

http://blog.html.it/layoutgala/

Pick one which most closely resembles the basic page and start with that. Add the finishing touches and you are done.

karlosantana, on Jan 31 2008, 12:56 PM, said:

jlhaslip:- i always wonder HOW do you find these things? is it just google all the time?

Yea JL is the man when it comes to finding this stuff. and I feel sure he has a lot more and better ones since the start of this post. I have used the
http://blog.html.it/layoutgala/ myself. only thing is they all seem the same.