Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    21
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Cool Need advice on converting from tables to CSS layout

    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).

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    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.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    21
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Cool

    Quote Originally Posted by Kor View Post
    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?

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by levicki View Post
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Are you looking for something like this?

    (pseude code)
    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.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Quote Originally Posted by levicki View Post
    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.

  • Users who have thanked VIPStephan for this post:

    levicki (11-24-2011)

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    21
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Cool

    Quote Originally Posted by VIPStephan View Post
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •