SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    515
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Advice and Help Converting To Pure CSS From Table Layouts

    Hello,

    I need advice on how to convert my table layout to pure CSS for my cursor site http://www.cursors-4u.com/

    Not really sure where to start. I'm mainly trying to figure out how to do the columns and align them correctly.

    What's a good place to learn how to covert from table to css?
    FlyffWorld.com - Online Gaming MMORPG
    AdTalks.com - Publisher/Advertising Network Review
    Cursors - Cursors-4U.com

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The best place to start is to forget all about how you did it with tables and to write HTML that is semantically correct to describe what the contents actually are.

    Then write the CSS one piece at a time positioning the content at the top left of the page first and gradually moving down the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ What he said ^

    You can't 'convert' from unsemantic table tag soup to semantic structural markup, because the former deals exclusively with presentation while the latter should ignore presentational matters altogether – leaving that for CSS to deal with.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Zealot Norebbo's Avatar
    Join Date
    Jun 2008
    Location
    Southern California
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In addition to what has already been said, keep in mind that you may find that using tables for some sections is the better thing to do. If I am designing an extensive table of data (or a grid of some sort), I much prefer to use a table over CSS for that particular element.

    CSS is the better way to code, but don't be afraid to use a few tables if it makes things easier.

  5. #5
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by azn_romeo_4u View Post
    I need advice on how to convert my table layout to pure CSS
    As you've been advised above, forget about "converting". You need to start over. You need to change more than just your code, you need to change how you think. You have learned to "think table", and you need to unlearn that.

    The best way to do this is to approach html and CSS afresh with a more or less empty mind. Of course you can't really forget all you know, but you can put it aside for a time to a great extent and you should.

    Pretend you know nothing about html at all and go to a site like HTML Dog and run through their tutorials right from the beginning.

    The object is to learn to write valid and semantic html markup, and then having done that to style and position that code with CSS. That's the separation of the concerns of "markup" and "presentation" that was intended by the designers of html and CSS in the first place.

    By coding semantically we simply mean that you use html tags to describe the meaning of your content, not worrying about it's presentation.

    Thus, tables are a perfectly useful html construct meant to mark up or describe tabular information. Using a table to layout your elements is bad, but using a table to describe tabular content with html markup is not only good, but the only proper way.

    If you always ask yourself what the particular section of text you are marking up with html is, then you won't go far wrong. It's a paragraph? There's a tag for that! So use that tag. It's a menu? What is a menu? Why it's a list of options. There's tags for lists! So use them. And so on. Not really all that hard.

    As much as you can, just ignore how your page is going to look while you do the html markup. Describe the content in html, not the look. Make sure the markup is valid. When that's done, start applying CSS to make it look the way you want it. The bonus for doing things this way is that it's actually much easier and takes a lot less time yet produces better results.
    Ed Seedhouse


Bookmarks

Posting Permissions

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