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