Need advice on converting from tables to CSS layout

[levicki]

So, as the title says, I have a website which was created using ImageReady which uses tables extensively for layout and positioning.

Does anyone have any advice on how to migrate this to CSS and DIVs? Automated conversion is highly preferable because each page has repeated elements such as menus and images which I would like to refactor anyway to use SSI. Website will be hosted on Linux hosting (PHP is therefore available).

[Kor]

There is no automate conversion in web development. You should create the elements (divs) and you should create your CSS classes by hand, writing the code lines.

[VIPStephan]

If you have repetetive code/tasks you might be able to do a multi-file search and replace. Create one page template with semantic HTML and an appendant stylesheet and then, for example, replace the header and the footer in each HTML file automatically with what you have created.

[levicki]

Originally Posted by Kor

There is no automate conversion in web development. You should create the elements (divs) and you should create your CSS classes by hand, writing the code lines.

Jesus Christ... I thought we are in the 21st century... yet we still do such things by hand. I was afraid of such answer.

@VIPStephan:
That is probably what I will have to do but this crap design has meticulously nested tables, and inner part has the content so it is hard to replace only the parts around it.

Basically, I will need to reverse-engineer the whole layout (even site menu is done with a table).

Unrelated question:

I want to redesign my personal website. Can you suggest the best way of making scalable website layout which is accessible on HD monitors as well as on smartphones? Are CSS media types still considered the best approach?

[Kor]

Originally Posted by levicki

Jesus Christ... I thought we are in the 21st century... yet we still do such things by hand. I was afraid of such answer.

You can't automatize everything on this world. Nor should be possible

[moon-safari]

Are you looking for something like this?

(pseude code)

for each (row)
{
  <div class="row" style="height:cell-height">
  for each (cell)
  {
     <div class="cell" style="width:cell-width/total-width+"%""> (..here Content of current Cell..) </div>
  }
  </div>
}

<!-- style -->
.row {position:relative;width:100%;}
.cell {position:relative;float:left;height:100%;}

Of cause, this would only work if you have a really simple table layout with no rowspan. I'm not 100% sure, but i think with a little effort it would be possible to automate this transformation even for more complex layouts. You could use for example XSL transformations to achieve what you want.
But if you just have to rewrite a few documents, then it might be really faster to edit them by hand than to write yourself a transformation algorithm.

[VIPStephan]

Originally Posted by levicki

Are CSS media types still considered the best approach?

Only in limited ways since smartphones usually consider themselves as “screen” media, too. However, CSS 3 has introduced media queries which allow for responsive websites.

[levicki]

Originally Posted by VIPStephan

Only in limited ways since smartphones usually consider themselves as “screen” media, too. However, CSS 3 has introduced media queries which allow for responsive websites.

I read both articles, excellent info, thanks

I shall try that soon...