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 10 of 10
  1. #1
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts

    Tables vs. Divs — The Comeback.

    hi, all.

    smashing magazine has posted what appears to be an interesting article.

    http://www.smashingmagazine.com/2009...l-to-div-hell/

    Check it out!
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    I don't think the article is "tables vs divs". It's the problems of both but there is no worthy discussion for tables for layout.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thanks for the link, nice post.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Along the lines of that article, I've been redoing a standard contact form that I keep around. Would just like to know people's opinions of whether or not it's semantic enough.

    Is it wrong to be using classes such as "pad20". They serve no other purpose but to move it to the left, and without tables I find the padding necessary to get everything lined up the way I want.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact Form</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    #content {
    	width:600px;
    	margin:0 auto;
    	padding-top:50px;
    	text-align:left;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #contact_form {
    	margin-top:20px;
    }
    #contact_form li {
    	list-style-type:none;
    }
    .greeting {
    	display:inline;
    	list-style-type:none;
    }
    .greeting li {
    	float:left;
    }
    .alignTop {
    	vertical-align:top;
    }
    .pad43 {
    	padding-left:43px;
    }
    .pad45 {
    	padding-left:45px;
    }
    .pad3 {
    	padding-left:3px;
    }
    .pad105 {
    	padding-left:105px;
    }
    .padtop10 {
    	padding-top:10px;
    }
    br {
    	clear:both;
    }
    </style>
    </head>
    <body>
    <div id="content">
      <form method="post" action="gdform.php">
        <p>Please use this form to contact us</p>
        <ul id="contact_form">
          <li class="pad105">
            <ul class="greeting">
              <li>
                <input name="title" type="radio" value="mr" />
                <label for="title">Mr.</label>
              </li>
              <li>
                <input name="title" type="radio" value="mrs" />
                <label for="title">Mrs.</label>
              </li>
              <li>
                <input name="title" type="radio" value="ms" />
                <label for="title">Ms.</label>
              </li>
            </ul>
            <br />
          </li>
          <li class="pad43">
            <label class="alignTop">Name:</label>
            <input name="name" type="text" id="namefield" size="42" maxlength="50" />
          </li>
          <li class="pad45">
            <label class="alignTop">Email:</label>
            <input name="email" type="text" id="emailfield" size="42" maxlength="50" />
          </li>
          <li class="pad3">
            <label class="alignTop"> Comments:</label>
            <textarea name="comment" cols="32" rows="5" id="commentfield"></textarea>
          </li>
          <li>
            <label class="alignTop">Concerning:</label>
            <select name="concerning" id="concerning">
              <option value="gen_info" selected="selected">More Information</option>
              <option value="prices">Pricing</option>
              <option value="delivery">Delivery</option>
              <option value="pastorder">Past Order</option>
              <option value="other">Other</option>
            </select>
          </li>
          <li class="padtop10">
            <label>May we contact you?</label>
            <input name="contact" type="checkbox" id="contact" value="yes" checked="checked" />
            <input name="submit" type="submit" id="submit" value="Send" />
            <input name="reset" type="reset" id="reset" value="Clear" />
            <input type="hidden" name="redirect" value="thankyou.html" />
            <input type="hidden" name="subject" value="Form Submission from Website" />
          </li>
        </ul>
      </form>
    </div>
    </body>
    </html>
    I'd welcome any opinions on what to change.

    Thanks.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice link
    There are well documented issues with table based layouts, but the problems with nested divs have not been well documented in the past. Nested Divs are often used to make rounded corners and drop shadow effects, this is nearly as bad as using a table layout.

    Spent 6 hrs the other day overriding the default output of one of the open source Content Management Systems as it was full of nested divs.

    CSS3 provides mechanisms to do drop shadows rounded corners and other cool effects, and degrades gracefully for less capable browsers. It also means that the HMTL has less gunf (no need for nested Divs), meaning faster downloads, better SEO, and less load on the servers
    live every day as if it was your first

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fisher: you can save 20 lines of code by losing the ul and li tags, and using br's or hr's to seperate logical sections of the from.
    Moving the CSS to a seperate file will allow for better reuse. changing the css for .alignTop to the following will help with layout
    PHP Code:
    .alignTop {
        
    vertical-align:top;
        
    display:block;

    its not incorrect to use the class attribute to style your css, but "pad20" has no meaning to anyone but yourself, perhaps use more meaningful class names such as "contact_details"
    live every day as if it was your first

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by slushy77 View Post
    CSS3 provides mechanisms to do drop shadows rounded corners and other cool effects, and degrades gracefully for less capable browsers.
    So, CSS3, eh? A specification that’s not even official and will take aeons to be implemented properly in the major browsers.
    The other problem is that “degrades gracefully” isn’t an option for most clients, employers, or web designers. They want the website to look the way it was designed and don’t care for specifications or good practice.

    Fisher, semantic code includes using meaningful class names and IDs and a class or ID that represents the look of an element in its name is not semantic. For example what happens if you change your design (take the CSS Zen Garden as example) and your element with class “pad20” or “alignTop” doesn’t have any padding of 20px or top alignment anymore? What do these classes say about the element then? Not even an ID of “sidebar” is very semantic because what you have planned as sidebar initially doesn’t have to be a sidebar forever.

    The correct approach is to give elements classes and IDs that represent their function, their purpose in the document, for example “content”, “info”, or “section”. If the function isn’t clear st first or it can have different meanings, some more generic class names are appropriate such as “section1” or “subsection2”. And you can use the same class names for elements inside #content as you can for elements inside #info since you can still style them differently with CSS: #content .section {…}, or #info .section {…}, respectively. Sometimes less is more and you don’t need a class because you might be able to use a parent element selector or whatever.

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by VIPStephan View Post
    So, CSS3, eh? A specification that’s not even official and will take aeons to be implemented properly in the major browsers.
    Except for all the css3 properties that are available in the modern browsers right now (not IE).

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Just of curiosity, what are your opinions on using 'empty' divs for design purposes (like applying images as background-images to those certain divs, etc, to archieve a certain design)?

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    I’ve made my point just earlier today in this thread. Most of the time if you write semantic HTML then you won’t even need additional empty elements since you can just use what you’ve got. There are a few exceptions, of course (talk about scalable rounded corners) but generally that’s the way I think and I haven’t been wrong with it so far.


  •  

    Posting Permissions

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