Table to CSS example (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


William Lee -> Table to CSS example (9/29/2007 5:25:32)


I was happily churning out webpage layout using table only to find out late that CSS is the way to go and now wants to convert a table-layout to CSS, where do I start?

I see that most of CSS site are not image intensive, can anyone point to me one that is?





Tailslide -> RE: Table to CSS example (9/29/2007 5:40:44)

Well you could always have a look at http://www.csszengarden.com/ - it's not so much a great way to lay sites out as more a showcase of what is possible using exactly the same page markup but different images and different stylesheets.

Also have a look through the galleries at:

http://www.cssbeauty.com/gallery/
http://www.unmatchedstyle.com/
http://cssmania.com/

There's a ton more of these sites but you'll see that there are just as many CSS sites that are image intensive as table-based sites.




caz -> RE: Table to CSS example (9/29/2007 5:45:07)

William the sticky thread at the top of this forum called CSS Links is a good place to start, but for artistic css use Zengarden is a delight.

When I converted a large tables site I used Notetab Lite to strip out code whilst preserving URL's so that I was left with pure content which could be dropped into my new CSS layout. But you have to have the stylesheets ready for that; with me it was a lot of suck it and see as I went along. It gets easier as you go along. [;)]




William Lee -> RE: Table to CSS example (9/29/2007 10:47:51)

quote:

ORIGINAL: Tailslide

Well you could always have a look at http://www.csszengarden.com/ - it's not so much a great way to lay sites out as more a showcase of what is possible using exactly the same page markup but different images and different stylesheets.




Thanks to TailSlide and caz

I visited csszengarden.com and it is a worthwhile trip. From what I saw, I don't think using tables can do the switching-over of images as easily as CSS. Now I am convinced.

One thing though. After I'd clicked on Retro Theatre and applied the design, and I go back to csszengarden.com, I was puzzled that csszengarden looks 'broken'.

See image here




Tailslide -> RE: Table to CSS example (9/29/2007 12:05:45)

Don't know off-hand, some of those designs (including the one on the home page) are several years old so it may be that for instance IE7 might show it differently as the design might not have been built with IE7's bugs in mind. Not sure though as I'm on the mac at the moment.




William Lee -> RE: Table to CSS example (9/29/2007 12:16:55)

I am using IE6.0. Anyway, it doesn't happen in FireFox, so I can understand if it is one of those IE thing.

Regarding IE7.0, I experienced that PNG with transparency does not turn up nice when the image is used as background image of a nested table. This has got to do with IE's AlphaImageLoader filter, whatever it is.

I want to know if this happens in CSS built sites when viewed with IE7.0. Do you have any idea?




Tailslide -> RE: Table to CSS example (9/29/2007 15:15:13)

Not sure I understand... The png transparency problem is solved in IE7 whether a css layout is used or not (see this article: http://koivi.com/ie-png-transparency/ for more). Not sure why this wasn't working for you before with IE7. Certainly with IE6 you still have to use all those png hacks which do work but are just an extra workload.




William Lee -> RE: Table to CSS example (10/15/2007 5:07:44)


quote:

ORIGINAL: Tailslide

Not sure I understand... The png transparency problem is solved in IE7 whether a css layout is used or not (see this article: http://koivi.com/ie-png-transparency/ for more). Not sure why this wasn't working for you before with IE7. Certainly with IE6 you still have to use all those png hacks which do work but are just an extra workload.


What an idiot I was! It was IE6 having problem and I reported that IE7 has difficulty with png.

Thanks!




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.054688E-02