Tables2css Convert Table-oriented layouts to pure CSS layouts.

[mama_soap 0]

Hello everyone:

 

Just got a new script (javascript) up and running, and designed a website for it too. Basically, what it does, in a rather primitive fashion, is that it takes the html code for a table-oriented layout and converts it to a CSS layout. I've done my best to ensure that it handles nested tables by generating appropriately, relatively positioned divs.

 

I whipped up the design over five hours, and I've very apprehensive about what it looks like. Any comments will be appreciated, and I'd really like to know what I need to do before I officially release the site to the public (to whatever public I know, that is) and submitting it to search engines.

 

Some SEO advice would come in handy - I am very clueless on that front. I don't even use metatags properly.

 

The site is located here .

 

Things I'm aware of -

a) The background takes a while to load, and there are two different background images; one for index.html, and one for the remanining pages.

b ) There is no way of returning to the home or front page without manually changing the url.

 

As for problem (a), I'm still thinking of a way out. I've grown to like to photograph a little too much for my own good. *shrug*

Problem ( b ) - I'm not sure why anyone would want to return to the front page, it's just meant to give a overview/intro. All the information/content is on the other pages. I don't want a longer navbar than what it is currently, however... if a lot of people think this should change, I'll change it.

 

Finally - the website is tested and wokring on the lates versions of the following browsers:

 

Firefox

Galeon

Epiphany

Konquerer

Opera

 

However, didn't get a chance to test it on IE. If someone could look it up for me, it would be very cool.

The pages are standards-complaint, it's the only thing I'm slightly cheerful about.

 

Not a very good website, I admit, but I want to know exactly how unreasonable/bad it looks to everyone else.

 

Looking forward to some inputs here... Cheers!

Edited April 28, 2006 by mama_soap (see edit history)

[Saint_Michael 3]

well with the pages you could do 1 of 3 things you can do a php include or a frames set up for the content on the right it would solve your problem as to why your background not showing up when someone clicks on a link.Since all it will do is open the link with in that area.and the 3 thing would be getting some like cutenews to manage the links its basically the same thing with the php include and the frames.It looks ok in IE actually it looks better in IE due to the fact that the content location is more centered in location then it is in ff.Of course don't forget to put border="0" w3c image to get rid of the red border.Also I would say move it a bit to the left to get away from the scroll bars and to put a little gap there and fill out the left a bit.and where you have same right reserves image get rid of the one in the upper left corner you only need one. <_<I would put the html validator link in with your content box as well.Well cornerning the left maybe adding a smaller content box just for links could help it out a bit as well.

[mama_soap 0]

SM,

Thank you for your comments and suggestions - they are all good

well with the pages you could do 1 of 3 things you can do a php include or a frames set up for the content on the right it would solve your problem as to why your background not showing up when someone clicks on a link.

The problem with the background is that the image file is rather large, and irrespective of what I use (php, frames, et al), it is bound to take time to load the first time. After that it gets into cache anyway, so I'm not that worried. Besides, I'm not particularly comfortable with frames, after all the general criticism about them.

It looks ok in IE actually it looks better in IE due to the fact that the content location is more centered in location then it is in ff.

I'm relieved, thank you for checking

Of course don't forget to put border="0" w3c image to get rid of the red border.

Done.

Also I would say move it a bit to the left to get away from the scroll bars and to put a little gap there and fill out the left a bit.

Scrollbars? Don't you see the w3c image to the extreme left anyway?

and where you have same right reserves image get rid of the one in the upper left corner you only need one.

Done, thanks for pointing out.

I would put the html validator link in with your content box as well.

Yep, when I find the time

Right, thanks so much for the advice. Most of it implemented... thank you again!

Cheers....

[Tyssen 0]

I think the look of the site is far less important than the actual CSS-based code it outputs and as I said on CSSCreator, I'd be a bit worried if you used relative positioning for everything.

[mama_soap 0]

I think the look of the site is far less important than the actual CSS-based code it outputs

Absolutely - but on the other hand, I wouldn't want to have a completely crappy-looking website (which it probably is anyway, but arrrgh... never mind ).

... as I said on CSSCreator, I'd be a bit worried if you used relative positioning for everything.

Hmm... I see your concern but I don't see a way out. Perhaps you can direct me to someplace that explicitly details potential problems with relative positioning all the way? I've used it to some success so far, that's why I designed the script that way. Would you mind discussing the idea at greater length with me, if the need arises? Perhaps over email (don't want to clutter the forums too much)... However, I'll completely understand if you're busy and have better things to do

Thanks so much for taking the trouble to look through this. I'll see what I can do to improve on incorporating margins and padding.

[Saint_Michael 3]

well what tyssen is getting at with relative position is that not everyone uses the same screen resolution 800x600 and the standard 1024x768. When you change the look of your screen everything look different example: content box is in the middle at 1024x768 but if you go to a higher resolution your content box is on the right and your navigation menus are all messed up.Something like that, They have example templates for fluid design but when you get to editing the files then it stop becoming fluid, then you have to figure out what went wrong.Some people take it to the extreme first they test it out on all the major browsers then they test it out on all different screen resolutions.But a good suggestion I have is open your image in ps or whatever you use and save it as gif you keep the same look but mbs are reduce just enough to save some room. also preloading images is a good thing as well.But with what she has for the design fix position wouldn't hurt it that much best bet is position it just enough that it looks off cenetered then try the different resoultions.should be much of a change really.

[Tyssen 0]

Hmm... I see your concern but I don't see a way out. Perhaps you can direct me to someplace that explicitly details potential problems with relative positioning all the way? I've used it to some success so far, that's why I designed the script that way. Would you mind discussing the idea at greater length with me, if the need arises?

 

The problem with relative/absolute positioning is that CSS newbies often don't understand the concept of 'positioning context' whereby an element takes its positioning coordinates from the nearest parent element with positon: relative/absolute set. In the absence of a parent with that, it defaults to the body.

 

So, speaking from my experience on CSSCreator, creating CSS layouts full of positioning is likely to cause more problems than it solves. Positioning requires that both the element and a parent element have position: relative/absolute set. If you don't know that and you edit position:relative out of something cos you think it's not needed, your layout can go haywire. I've seen enough people posting problems on there do do with creating layouts in Dreamweaver's design view mode which don't work to know that it is a real concern.

 

Using margins/padding only involves setting the properties on the element in question. It doesn't require a setting on the parent element for it to work.

 

You also mention that you hope experienced CSS coders will use it too. Well I reckon it's a fair bet that if the code that is turned out uses relative positioning in favour of margins, that it won't be held in too high a regard.

 

EDIT: I've just given it a go and I'm afraid you've got a long way to go. Choosing the 'without stripping option' gave me back HTML code full of tables! And choosing the stripping option simply replaced all the tables with divs at the same time leaving table-specific info in place (cellpadding etc.).

And the produced code has two other major flaws:

1. It produces inline styles attached to each HTML tag which is pretty much pointless. The idea behind CSS is to separate content from presentation. Using inline CSS like that is no better than using font tags.

2. It turns everything into divs! Even tags that it shouldn't like <select> etc. (Using the 'stripping' option actually removes perfectly valid HTML like <option> etc.) You can't turn everything into a div. There's all the other tags like h1, h2 etc., p, ul, li, ol, blockquote etc. that should be used.

 

I hate to sound harsh, but from the one test I've given your app, I wouldn't recommend that you release it for public consumption.

[vesselin 0]

Hello.
I came across this thread by searching in Google and hopefully the original author does not mind that I (sort of) hijack the thread.

Basically I have written an HTML table-to-css converter program. The program can be found at http://www.table2css.com/ - there is an online version and a downloadable version too. Currently I am looking for web developers/designers to beta test it. The program is working more or less fine for me, but I guess it is time to start getting more feedback from different users.

Any comments regarding my table-to-css converter software are welcome. Suggestions for new features are welcome as well.