CSS/HTML: texte sur barre/table?

Question

Je souhaite faire quelque chose qui ressemble à ceci:

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

(En ce moment je ne dispose que cette barre en haut)

Quand je tente d'écrire un texte, il devient sous la image de profil. Je ne veux pas utiliser float: à gauche pour cela.

Comment puis-je faire une table qui rend le texte comme ça, et la flèche rouge i drawed, je veux savoir comment régler cette largeur entre là?

Voici mon code pour le moment:

<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

une méthode serait de créer une table de 4 colonnes et 2 lignes.

<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> 

puis avec css vous pouvez modifier la largeur de la cellule. par exemple, vous pouvez utiliser

td {width:200px;} 

ou vous pouvez utiliser une classe dans chaque cellule comme <td class="cell">Sex: Male</td> puis appliquer un style sur cette classe avec comme .Cellule {width:200px;} css.

Bien sûr, je crois encore que vous pouvez utiliser des flotteurs et avec quelques tours (si nécessaire) pour obtenir le résultat escompté.

Answer 2

Vous pouvez utiliser ce balisage HTML:

<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: example@example.com</li> 
     <li>Another field: Value 1</li> 
     <li>Drinking: Coffee</li> 
     <li>Mug collection: 300</li> 
     <li>Another field: Value 2</li> 
    </ul> 
</div> 

Nous utilisons un mélange de liste, les paragraphes et les images pour obtenir le balisage que nous voulons. Par exemple, la liste des champs est évidemment une liste, nous utilisons donc l'élément de liste non ordonné ul ici. Nous utilisons également la balise img ici au lieu de background-image car l'image de profil est importante et contient des informations réelles.

.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; 
} 

Le CSS est séparé du balisage - ce qui est important, car nous voulons garder le contenu et le style distinct. Fondamentalement, en utilisant les class es que nous avons ajoutés à l'intérieur du code HTML, nous donnons le contenu de l'information de style de profil qui va le présenter de la manière que vous avez spécifié dans l'image.

Nous flottons presque tout dans cette boîte de profil, puis leur donnons des largeurs spécifiques de façon à ce qu'elles se déplacent les unes à côté des autres dans les colonnes, et finalement leur donnent une marge pour leur donner de l'espace entre les colonnes.

Vous pouvez le voir vivre ici: http://jsfiddle.net/stEkY/