Question about tableless layouts

Discussion in 'CSS' started by Robb, May 9, 2006.

Thread Status:
Not open for further replies.
  1. #1
    Hi,

    I have never coded in tableless layouts, and I've been trying to learn how, I just wanted to know if anyone here can explain how they are done, or if you have tutorials about them. Sorry if this seems really newbish, but I have never done a tableless layout before so I have no idea where to start.

    Thanks in advance,

    Chase
     
    Robb, May 9, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    This is very hard to describe or teach; not because it's complex, but because it is so very very simple.

    The first step is to mark up your content—that's right, it starts with the content—with well structured, semantic and well formed (valid) html. Your major groups can be aggregated with the div element. Along with ids, they provide your context hooks for styling and positioning.

    Using your design sketch, add css positioning rules to the major groups.

    The next steps are about styling the content of each positioned context using ids and classes as your hooks.

    If you're experienced with table layouts, you'll likely have to unlearn a whole potload of bad ideas and un-semantic markup. It would not be a bad idea to work through a few html and css tutorials to relearn the right way to use markup.

    cheers,

    gary
     
    kk5st, May 9, 2006 IP
  3. bullfrog

    bullfrog Guest

    Messages:
    47
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    when designing a site without tables you'll find yourself using many div tags. I normally use the class to set the defaults for a group of items and then use the id to define the specifics needed. To get the div's to go side by side you'll probably end up floating the div's using "float". So to get 2 div's side by side you could specify the first div to float left and then don't specify the float for the next div. I'd definitely take a look over at www.w3schools.com. In particular look at the xhtml 1.0 and the css section. They very brief examples. If I run upon any sites tonight I'll reply back. Hope this gets you started in the right direction.
     
    bullfrog, May 9, 2006 IP
Thread Status:
Not open for further replies.