CSS/HTML: text on bar/table?

Question

I wish to make something looking like this:

http://img291.imageshack.us/img291/5571/bartablestyling.png

(Right now i only have that bar at the top)

When i try to write text, it gets under the profilepicture. I dont want to use float:left for it.

How can i make a table that makes the text like that, and the red arrow i drawed, i want to know how to adjust that width between there?

Here's my code for now:

<div style="background-image: url(images/notificationShelfBg4.png);
    background-repeat: repeat-x;
    background-position: bottom; width: auto;">

            <img src="<?php if(!empty($vP["photo_thumb"])) { echo "images/profileimages/".$vP["photo_thumb_small"]; }else{ echo "images/profileimages/noPhoto_thumb.jpg"; } ?>"  style=" border: 2px solid #CCC; margin-right: 5px; margin-left: 15px;  margin-bottom: 2px;">


    </span>
    </span>
    </a>

</div>

Answer 1

one method would be to create a table of 4 columns and 2 rows.

<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>You're inlogged as:</td>
<td>Sex: Male</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
<tr>
<td>Adrew</td>
<td>Age: 22</td>
<td>Field:1</td>
<td>Field:1</td>
</tr>
</table>

then with css you can modify the width of the cell. for example you can use

td {width:200px;}

or you can use a class in every cell like <td class="cell">Sex: Male</td> and then apply a style on this class with css like .cell {width:200px;}.

Of course I still believe that you can use floats and with some tricks (if there is need) to get the expected result.

Answer 2

You can use this HTML markup:

<div class="profile">
    <img src="path/to/your/img.png" alt="Example's Avatar" />
    <p class="login-info">You are logged in as: <span class="username">Example User</span></p>
    <ul class="user-info">
        <li>Gender: Male</li>
        <li>Age: 24</li>
        <li>Member since: 24 Aug 2009</li>
        <li>Currently wearing: Pink T-Shirt</li>
        <li>Email: [email protected]</li>
        <li>Another field: Value 1</li>
        <li>Drinking: Coffee</li>
        <li>Mug collection: 300</li>
        <li>Another field: Value 2</li>
    </ul>
</div>

We are using a mixture of list, paragraphs and images to get the markup we want. For instance, the list of fields is obviously a list, so we use the ul unordered list element here. We're also using the img tag here instead of background-image because the profile image is important and contains actual information.

.profile {
    padding: 20px;
    background: #333 url('path/to/gradient.png') repeat-x;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6em;
    font-family: Arial, sans-serif;
    color: white;
    width: 960px;
}

.profile img {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    display: block;
}

.profile .login-info, .profile .user-info li, .profile .user-info, .profile img {
    float: left;
    margin-right: 30px;
}

.profile .login-info {
    margin-right: 60px;
}

.profile .user-info {
    width: 665px;
    font-size: 12px;
    margin: 0;
}

.profile .user-info li {
    width: 190px;
}

.profile .login-info .username {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-top: 3px;
}

The CSS is separated from the markup - this is important, as we want to keep content and styling separate. Basically, using the classes we have added inside the HTML, we give the contents of the profile styling information that will cause it to be presented in the manner you specified in the picture.

We float almost everything in that profile box, then give them specific widths so that they'll move up next to each other in columns, and finally give them a margin to the right to give them some space between the columns.

You can see it live here: http://jsfiddle.net/stEkY/