SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)

    Semantically Stinky?

    Hi,

    I am laying out a profile page. I wanted a persons name and their phone number on one line with the phone number being aligned right and the name aligned left. I then have address and email on the next line that follow the same right/left behaviour. I wanted this to be semantically correct and while it doesn't break any rules, I don't normally have more than one h2 at a time not seperated by a block level element like a <p> or <table> or <ul>... So the question does this grouping of h2's wreck the semantics?

    Here is the damage
    HTML Code:
    <h1 class='alignleft'>Name</h1>
    <h2 class='valign_bottom alignright'>Phone: 000 000-0000</h2>
    <div style="clear: both;"></div>
    <h2 class='cramp alignleft'>Street, City, Province, Postal Code</h2>
    <h2 class='cramp alignright'>user@example.com</h2>
    <div style="clear: both;"></div>
    And the CSS
    HTML Code:
    h1 { font-size: 1.5em; color: #336699;  }       
    h2 { font-size: 1.1em; color: #336699; }
    h1, h2, h3, h4, h5, h6, h7, .h1_bottom { font-family: 'Arvo', Georgia, Times, serif;}
    .alignleft {float: left;}    
    .alignright {float: right;}    
    .valign_bottom { margin-top: 1.2em;}
    .cramp { margin: -0.9em 0 0 0}
    I'd love to here your thoughts on this!

    Warm regards,
    Steve
    Last edited by ServerStorm; Jan 14, 2013 at 19:59.
    ictus==""

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Very stinky..

    I'd do something like this.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    h1 {
      float: left;
    }
    .details {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .details li {
      margin: 0;
      padding: 0;
    }
    .phone {
      float: right;
    }
    .address {
      float: left;
      clear: left;
    }
    .email {
      float: right;
    }
    </style>
    </head>
    <body>
    <h1>Name</h1>
    <ul class="details">
      <li class="phone">Phone: 000 000-0000</li>
      <li class="address">Street, City, Province, Postal Code</li>
      <li class="email">user@example.com</li>
    </ul>
    </body>
    </html>
    As a rule it 'aint a heading if there's nothing underneath it.

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Very stinky..

    I'd do something like this.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    h1 {
      float: left;
    }
    .details {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .details li {
      margin: 0;
      padding: 0;
    }
    .phone {
      float: right;
    }
    .address {
      float: left;
      clear: left;
    }
    .email {
      float: right;
    }
    </style>
    </head>
    <body>
    <h1>Name</h1>
    <ul class="details">
      <li class="phone">Phone: 000 000-0000</li>
      <li class="address">Street, City, Province, Postal Code</li>
      <li class="email">user@example.com</li>
    </ul>
    </body>
    </html>
    As a rule it 'aint a heading if there's nothing underneath it.
    Well glad you stamped that stink in the olfactory glands, as your solution is so much better.

    I don't know why I didn't think of using a list, when I use them all the time for horizontal menus

    Thanks Mark!
    ictus==""


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
  •