Discussion :

[BnA]

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!

[Erwan31]

Bonsoir,
tout d'abord tu ne peux pas mettre des élément de niveau bloc dans des liens,
c'est invalide, d'ailleurs as tu vraiment besoin de ces div?
Tu peux simuler l'affichage d'un élément de rendu bloc tout simplement
via un display:block ou dans ton cas un float:left.

Donc ce qui donnerai plus simplement:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <a href="#" alt="Accueil">
        <img class="home" src="images/villeneuve_plan.png" height="20" width="20" style="border:none; margin-top:2px; vertical-align:middle" />
        <span class="name" style="border: 1px solid #009900;">Alphonse Vanpijperzele</span>
    </a>

Les tableaux ne sont aucunement incompatibles avec CSS.
D'ailleurs si tu ne veux pas te prendre la tête (j'ai déjà essayé ce type de
centrage vertical je sais donc de quoi je parle) avec des multiples bidouilles
plus ou moins acrobatiques et peu robustes, je te conseillerais vivement de
passer par un simple tableau de mise en forme avec 2 cellules

Tant que Firefox3 (dont le version beta implémente déjà dispay:inline-block) ne sera
pas utilisé très majoritairement il faudra se contenter d'un tableau pour obtenir ce type de centrage, et encore...

[Erwan31]

Ben alors? Pas de réponse?
Toujours 1/3 (minimum) de membres qui se donnent même pas le peine de
répondre, c'est lassant à force... Tiens d'ailleus puisqu'il n'y a aucune sanction
de prises pour ces gens là, ben je crois que je vais arrêter de participer.

[BnA]

Salut.

Premièrement...

Sache simplement que c'est un projet pur-professionnel (je veux dire par là que je ne travaille pas dessus en dehors des heures de bureau) sur lequel je travaillais fin de la semaine passée, et sache également que je n'ai repris le chemin du bureau qu'hier mercredi, et je ne retravaille sur ce projet que depuis... attends que je regarde... environ 3/4 d'heures. Environ hein...

Ouvre tes mirettes: tu crois vraiment que je vais mettre "DITES MERCI C'EST GRATUIT!" dans ma signature, et ne jamais remercier les contributeurs?

Et petit calcul tout simple:

Toi, février 2008, 220+ messages.

Moi, mars 2006, 520+ messages.

T'as pas comme l'impression que je suis BEAUCOUP moins présent que toi sur les forums?

'fin bref, sors-toi un peu la tête de ton nombril, les gens ont une vie...


Deuxièmement...

Merci! Je teste ça et te dit quoi (peut-être pas aujourd'hui, bientôt fini journée, mais demain au plus tard, promis!

[BnA]

Voilà!

Comme promis, voici un retour sur mon problème...


Alors j'ai finalement été forcé d'utiliser un <table>, bien que j'eusse préféré rester en full CSS (je sais que les <table> ne sont pas contre-indiquées, mais par principe, j'essaie un maximum de ne jamais utiliser de <table> pour de la mise en forme).

Mais bref, ici, pas moyen de faire autrement.

Et ta solution ne fonctionne pas (à moins que je me sois loupé), car à cause du float:left et donc de la sortie de l'élément du flux, mon <div> (ou ton <a>) n'ont plus de hauteur, donc aucun moyen pour mes éléments-enfants de se centrer...

'fin bref, merci tout de même pour le coup de main, et tu vois, je suis un gentil, je vais même tagger ce thread en "Résolu"!!

[Erwan31]

Ok mes reproches ne te visaient pas exclusivement mais visaient tous les membres qui ne répondent pas (ici ou ailleurs), tu as répondu, rien à dire mais d'autres n'en font pas autant...
J'ai un peu de mal à lâcher prise avec ce genre de chose, je pense
que c'est compréhensible d'ailleurs, c'est comme dans la vrai vie.
Je t'accorde que cette réponse un peu butale était un peu mal venue mais le fait est que je n'avais pas lu ta signature (merci...) Donc mea-culpa
D'autre part je sais bien que les membres ont une vie! Je suis assez présent ici
en ce moment tout simplement parce j'ai pas mal de temps libre en ce moment...

Ce que je te proposait avec le flottant n'était pas une solution pour centrer.
Comme je te disais il vaut mieux passer par un tableau

Bonne soirée