Salut tout le monde!


Avant toutes choses, voici les segments de code concernés.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<div class="leftName">
    <a href="#" alt="Accueil">
    	<div class="home">
        <img src="img/icons/home_20x20.jpg" height="20" width="20" style="border:none;margin-top:2px;"/>
        </div>
        <div class="name">
        Alphonse Vanpijperzele
        </div>
    </a>
    </div>

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.leftName{
margin:auto;
margin-top:10px;
height:25px;
width:160px;
border-top:1px solid #012436;
border-bottom:1px solid #012436;
}
 
.leftName .home{
float:left;
}
 
.leftName .name{
float:left;
font-size:80%;
margin-left:4px;
line-height:18pt;
width:136px;
}

Il s'agit d'un "bouton", affichant le nom de l'utilisateur, en renvoyant vers la page d'accueil si cet utilisateur clique dessus.

Actuellement, ce groupe de bloc s'affiche pile-poil nickel, tant que le nom de l'utilisateur tient en une seule ligne. L'image est centrée verticalement, alignée à gauche, et le nom de l'user est lui centré (dans son bloc) verticalement (grâce à un line-height) ET horizontalement (par héritage).

Seulement, si le nom de l'user est plus long, ça merde méchamment, en partie à cause du float:left; et le résultat que j'obtiens est une bouillie, où, en fait, l'image reste à sa place (normal), mais le nom de l'user dépasse la limite de .leftName (délimité par un border-top et un border-bottom).

Le résultat que j'aimerais obtenir lorsque que le nom de l'user tient sur 2 lignes (ou +) est:
* que .leftName s'aggrandisse en hauteur;
* que mon image reste centrée verticalement;
* idem pour le nom de l'user (en plus de rester centrer horizontalement, mais n'est qu'une formalité).

Bien évidemment, comme .leftName ne s'aggrandit pas, je suis bloqué. J'ai bien pensé à une solution en utilisant <table>, mais j'aimerais n'utiliser que de la mise en page CSS...

Voilà, je pense avoir été assez clair, merci d'avance à celui qui pourra m'aider!