I could use some help creating User Profiles.
Attached is a mock-up of what I was envisioning. (It looks good except I’m not sure what to do with the alignment of the photo?!)
Questions:
1.) Thoughts on the aesthetics of my mock-up?
2.) What would you do with the Photo?
3.) How do I right-align Labels and left-align the Fields? (Newb question, I know!! But my SitePoint book is back home and I forgot?!) 
Thanks,
Debbie
Hi Debbie,
Questions 1 & 2 are really more suited to the review forum (previously the elements review section but now merged with website reviews).
Question 3 can be done with inline-block.
Ignoring the arguments that will ensue about my use of a DL list the mechanics are as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.userinfo {
text-align:center;
margin:0;
}
.userinfo dt, .userinfo dd {
display:inline-block;
vertical-align:top;
*display:inline;/* ie6 and 7 inline-block fix - invalid css */
zoom:1.0;/* ie6 and 7 fix - invalid css */
width:48%;/* we can't use 50% because of the whitespace gap between inline blocks and this is the easier fix*/
text-align:left;
margin:0;
}
.userinfo dt {
font-weight: bold;
text-align:right;
margin:0 2px 0 0;
}
dt.gap, dt.gap + dd { margin-bottom:25px }
</style>
</head>
<body>
<dl class="userinfo">
<dt>First Name:</dt>
<dd>Debbie</dd>
<dt class="gap">User Name:</dt>
<dd>DoubleDee</dd>
<dt>Gender:</dt>
<dd>Female</dd>
<dt>Age:</dt>
<dd>40-something</dd>
<dt>Location:</dt>
<dd>Phoenix, AZ</dd>
<dt>Occupation:</dt>
<dd>IT Consultant</dd>
<dt>Interests:</dt>
<dd>Outdoors, Hiking</dd>
<dt class="gap">About Me:</dt>
<dd>I want to start my own business and be my own boss</dd>
<dt>Posts:</dt>
<dd>23</dd>
<dt>Posts per day:</dt>
<dd>2.1</dd>
<dt>Last Activity:</dt>
<dd>3/27/2012 12.41am</dd>
<dt>Joined:</dt>
<dd>Feb 2012</dd>
</dl>
</body>
</html>
Paul,
How else could it be done if I didn’t use your DL approach?
Debbie
It would be just the same but with whatever elements you think are more semantic than mine.
I just happen to think that name value pairs like that are just right for a DL list (and so do the w3c) but others disagree.
It makes no difference to the css as it doesn’t care what elements you use. You just style them in the same way whatever you use.
e.g.
<ul>
<li><strong>First name></strong><span>Debbie</span></li>
<ul>
or
<h3>First Name:</h3>
<p>Debbie</p>
or
<div class=“first”>First Name</div>
<div class=“name”>Debbie</div>
or
<p><strong>First name></strong><span>Debbie</span></p>
All the above can be styles basically the same as my original example. You would just style the relevant elements as inline-blocks following the original code as a guide. The mechanics are the same. 
Nope. Not questioning you. Just wanted to know other ways to do it.
Debbie
Paul,
So your code was VERY helpful - as usual!! :tup:
I have been playing around with things in my website’s framework, and I haven’t quite got it working yet?!
Here is what I have so far… (Buff coloring is just to show my container…)
Here is my HTML…
<!-- MIDDLE COLUMN -->
<div id="pageMidCol_1b">
<!-- MEMBER PROFILE -->
<div id="boxMemberProfile">
<h2>Member Profile</h2>
<div id="container">
<a href="#">
<strong>DoubleDee</strong>
</a>
<img src="/images/Light_Green_10.png" width="10" alt="" />
<br />
<img class="noborder" src="/community/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />
<br />
<dl>
<dt>First Name:</dt>
<dd>Debbie</dd>
<dt>Gender:</dt>
<dd>Female</dd>
<dt class="gap">Age:</dt>
<dd>40-something</dd>
<dt>Location:</dt>
<dd>Phoenix, AZ</dd>
<dt>Occupation:</dt>
<dd>IT Consultant</dd>
<dt>Interests:</dt>
<dd>Outdoors, Hiking</dd>
<dt class="gap">About Me:</dt>
<dd>I want to start my own business and be my own boss</dd>
<dt>Posts:</dt>
<dd>23</dd>
<dt>Posts per day:</dt>
<dd>2.1</dd>
<dt>Last Activity:</dt>
<dd>3/27/2012 12.41am</dd>
<dt>Joined:</dt>
<dd>Feb 2012</dd>
</dl>
</div>
</div><!-- End of MEMBER PROFILE -->
</div><!-- End of #MIDDLE -->
Here are my styles…
/*************************/
/* MEMBER PROFILE Styles */
/*************************/
#boxMemberProfile #container{
display: block;
width: 70%;
margin: 0 auto;
padding: 2em 4em 2em 0;
background: #ffc;
}
#container a{
text-align: right;
}
#boxMemberProfile img{
display: block;
margin: 0 auto;
}
#boxMemberProfile dt,
#boxMemberProfile dd{
display: inline-block;
width: 48%; /* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
*display: inline; /* IE6 & 7 inline-block fix - invalid css. */
zoom: 1.0; /* IE6 & 7 fix - invalid css. */
vertical-align: top;
text-align: left;
}
#boxMemberProfile dt{
width: 50%;
font-weight: bold;
text-align: right;
margin: 0 2px 0 0;
}
#boxMemberProfile dt.gap,
#boxMemberProfile dt.gap + dd{
margin: 0 0 20px 0;
}
I think the “My Profile” page looks pretty good, but I am having trouble with the Username, Online Indicator, and Photo.
I would like the Photo centered - as it is - and then have the Username and Online Indicator (Green Button) side-by-side and centered above the Photo, hugging it.
I’ve given up tonight on trying to get that to work.
Any help would be welcome!!
Also, I am open to suggestions on how to make things look better and more balanced…
Thanks,
Debbie
P.S. I changed the order of your Styles, slightly. Did I mess anything up?!
HI Debbie,
You could do something like this:
<div id="container">
[B]<p class="online">[/B]<a href="#"> <strong>DoubleDee</strong> </a> <img src="/images/Light_Green_10.png" width="10" alt="" /><br />
<img class="noborder" src="/community/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />[B]</p>[/B]
<dl>
.online{
margin:0;
text-align:center;
}
#boxMemberProfile .online img{display:inline}
That was easy!
Thank you Paul!
Debbie