Semantically Stinky?

**ServerStorm** · Jan 14, 2013 17:19

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

**markbrown4** · Jan 14, 2013 20:51

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.

**ServerStorm** · Jan 14, 2013 21:56

Originally Posted by markbrown4

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!

User Tag List

Thread: Semantically Stinky?

Thread Tools

Display

Semantically Stinky?

Bookmarks

Bookmarks

Posting Permissions