SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS for layout purposes VS html tables layout

    Aloha creatives

    Do I primarily make use of CSS positioning and floating to create my page, OR do I need to combine CSS positioning/floating with html table layout (the "old" fashion way of accomplishing web layout)?

    Just need to bridge this problem to ensure creating award winning designs

    Thanx peeps

    Highly appreciated

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi Grootseun

    To make the structure of your page you generally want floating (and then margins to exactly place it).

    Absolute positioning/relative should only be used for dropdowns/small design segments of the page (aka rounded corners or some other small effect)

    Absolute positioning should never be used as a page layout technique for columns because if you have a footer it will be a mess and the contnet will probably end up overflowing on top of hte footer. It's not suitable for dynamic environments .

    If you go to pmob.co.uk where a regular here (Paul O'B) has posted many layouts, you will see every single one of them is done via floating and margins. It's by far the best layout technique and even though it has more bugs accompanied with it (as apposed to absolute positioning) it's still better (99% of all bugs have been documented and fixes are relatively easy to impliment, making this method the easiest)

    HTML table layouts should nevner be used because table layouts are only to be used to display tabular data and as a result it would be unsemantic to use it as a design for a layout (even though sometimes tables would be the easiest, aka equal height columns, and other behaviors that are table specific)

    Don't get me wrong, tables are completely fine if you have tabular data on the page (aka a data table of...oh..for example, all the speedcubers (rubiks cubes) that are competing in a competitiion)

    It's your call whether it's tabular data. The key to making good pages is to not have divitis (overuse of divs) or any other "itis" . As long as you don't bloat your markup and write clean code (CSS hacks generally aren't needed because most bugs don't require hacks ) then you are sure to write an A-grade page )

    As with any profession, you will get extremely good at it in time. Assuming you are a beginner (take no offense if you're not ), as you code a page you should try and refresh the page in a browser every segment (every peice) of hte page until you see exactly what everything is doing. You will learn to code bug fixes into your page as you are coding. But then again, that comes with experience. Give it time . Eventually you can code an entire pgae cross browser (99% of the time)

    If you have any questions related to a certain thing happening on your page then just feel free to ask here . It'd be a good idea to start getting in the habit of visiting this forum frequently (CSS forum in particular) because we go over many issues and eventually you will start to notice the same problems comiong up. You will learn the fixes (in time) and you will get dramatically better because of it .

    If you need any CSS reference help (a property/value etc) then visit the Sitepoint CSS reference

    Hope that helps
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi Grootseun,

    we have a search script on the forums. It's not the best thing since sliced bread, but it does mostly work (kinda).

    http://www.sitepoint.com/forums/showthread.php?t=671993
    http://www.sitepoint.com/forums/showthread.php?t=597136 (even though he meant display: table, most people answered like they thought it was divs vs tables)
    http://www.sitepoint.com/forums/showthread.php?t=659600 It's not just "div" vs table
    http://www.sitepoint.com/forums/showthread.php?t=171791 oooh, a fight to the death
    http://www.sitepoint.com/forums/show....php?p=4427757
    http://www.sitepoint.com/forums/showthread.php?t=647119

    That was just the most relevant from the first page.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Briliant guys! Thanx for the feedback, it's excellent. Who needs a tutor if you've got sitepoint by your side. Love this forum more and more as I go along!

    I've attached a basic column layout and I need your advice on how to prepare the CSS layout for it. I've got a basic idea how to, but not 100% confident as I'm still a beginner.

    Just for interest sake, how can I achieve succesful CSS layout on the following template example: http://www.templatemonster.com/websi...tes/29034.html (even just basic layout ideas would be helpful)

    Thanx once again / Dankie baie vir julle ondersteuning en raad.
    Attached Images Attached Images

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    However you think you would code it is probably correct (I just have a feeling )

    I'd be inclined to make a <ul> <li> for the navigation list and just make it easy and have bottom padding on that to show the car

    Then for the 3 checkmark boxes, just 3 <div>'s floated left with a width, styled like they show there..content..etc

    Then just have 2 floated <div>'s to hold that 2column bit there..same idea

    Same idea for the 3 column bit under that .

    Then the footer (depending on your structure it will need clear:both)

    Just go in sections of the page and code it how you think you would code it. Take it one step at a time and it will become very easy for you if you think about it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some good input here. The only time I'd use tables is for any tabular data coming from a database. Forms can be done fairly quickly as well. Much easier to control things that way and depending on your skillset and timeframe for your project.

    Floats and margins are the way to go. When I made the transition from tables to css years ago I was frustrated at first. But as long as you remember the key ingredient...

    If the layout is broken across browsers, check with clearing your floats.

    You'll pick up on it quick. Less code, more control and better page speed.

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My opinion is that,I would have to say using CSS as while it was taught that tables are the best method of page layout, because the pretty much universal support, margin and floating styling being applied to <div> tags in also now pretty much universally supported. And as Ryan said, using css floats and margins can provide a specific and exact position.


    Sorry if I was not of any help, but I wish you the best of luck in your layout design. I learned that a good wireframing or layout is best to have at first the hard-way


    Regards,
    Team 1504

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Once IE7 is dead it will not be such an issue as then you can always use the CSS table commands to do table layouts using display:table, display:table-row and display:table-cell so as to get layout tables without using the wrong HTML tags to achieve it.
    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="^$">


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
  •