Discussion :

[Invité]

J'essaie ici de pouvoir créer un espace publicitaire qui combinerais une image et du texte. Le tout dans une boite de 150x150px. Petit problème actuel, nous essayons d'avoir le texte dans la boite de texte centré verticalement s'il ne fait pas les 4-5 lignes de texte (question d'esthétique).

Mon code jusqu'à présent:

Code :

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
22
23
24
25
26
27
28
29
30
 
<style>
#machin {
font-family:helvetica,arial,sans-serif;
font-size:11px;
height:75px;
overflow:hidden;
vertical-align:bottom;
width:150px;
border:1px solid red;
padding-top:10px;
}
 
#content {
border:1px solid blue;
}
 
 
</style>
 
<div style="border: 1px solid black; padding: 0; width: 150px; height: 150px;">
<div style="background-image:url(image.gif); width: 150px; height: 75px;"></div>
<div id="machin">
<span id="content">
Clinique Dr. Machinchouette<br>
1717 Ch Chambly, Longueuil<br>
1717 Ch Chambly, Longueuil<br>
</span>
</div>
</div>

La sémantique est très laide mais bon, je me dit que c'est à voir plus tard une fois que ça vas fonctionner. Dans le cas actuel le texte est irrémédiablement collé en haut, impossible de faire centrer verticalement le texte du Dr. Machinchouette.

Des idées ?

[E.Fahd]

Salam,

- "vertical-align" est généralement mal assimilée. Si tu veux centrer un texte verticalement avec vertical-align, il faut mettre le display du conteneur (machin) sur "table-cell", dans ce cas vertical-align va fonctionner comme feu "valign" et tu peux lui attribuer la valeur "middle", sans rentrer dans les détails de fonctionnement de vertical-align.

- Sinon tu peux mettre le line-height de ton conteneur sur la même valeur que sa hauteur, c'est une astuce assez répandue pour centrer un texte verticalement.

- Après, dans un autre registre, tu peux aussi mettre ton image et ton texte dans un bloc positionné en absolu et puis appliquer la fameuse { top:50%; margin-top:-y } mais c'est à condition que tu connaisses la hauteur du bloc à centrer.

- Dans ton cas je pense que la première méthode est la plus appropriée (table-cell + vertical-align)

[12monkeys]

Bonjour

C'est une très intéressante question et plus compliquée qu'il n'y parait !

- Sinon tu peux mettre le line-height de ton conteneur sur la même valeur que sa hauteur, c'est une astuce assez répandue pour centrer un texte verticalement.

Le problème ici est que son texte est sur plusieurs lignes et que donc le line-height aura un effet sur chaque ligne : donc ça va dépasser du conteneur...

- Dans ton cas je pense que la première méthode est la plus appropriée (table-cell + vertical-align)

Sauf que table-cell n'est pas reconnu par IE (même dans sa version 7).

Perso j'ai pas de réponse, je suis aussi curieux d'en connaitre une...

[E.Fahd]

Salam,

@12monkeys,
- Développer pour IE7 est de la pure perte de temps à mon avis. IE8 sera prêt dans quelques mois (Novembre je pense) et il est compatible à 100% avec CSS2.1, table-cell marche d'ailleur très bien sur IE8 (j'ai eu l'occasion de l'utiliser dernièrement pour une liste horizontale). Le mieux c'est de se concentrer sur les nouvelles versions des navigateurs et coder du CSS propre, puis faire un simple test de browser avant l'affichage de la page pour rediriger les utilisateurs qui utilisent des versions obsolètes vers un lien de téléchargement.

[12monkeys]

Salam,

@12monkeys,
- Développer pour IE7 est de la pure perte de temps à mon avis. IE8 sera prêt dans quelques mois (Novembre je pense) et il est compatible à 100% avec CSS2.1, table-cell marche d'ailleur très bien sur IE8 (j'ai eu l'occasion de l'utiliser dernièrement pour une liste horizontale). Le mieux c'est de se concentrer sur les nouvelles versions des navigateurs et coder du CSS propre, puis faire un simple test de browser avant l'affichage de la page pour rediriger les utilisateurs qui utilisent des versions obsolètes vers un lien de téléchargement.

J'ai déjà vu ce matin que tu conseillais ceci dans une autre discussion, je ne suis pas un professionnel du domaine, mais je pense que de conseiller ceci me parait pour le moins suicidaire !

Tu ne veux pas que ton site soit visité ! alors tu peut faire ce que tu indiques...

Franchement tu vas sur un site, qui t'indique que tu ne peut pas visiter ce site, qu'il faut télécharger un autre programme... Combien de gens vont suivre ton conseil ? 1% ? 2% ?

Personnellement je passerais mon chemin.

Et donc tu veux t'affranchir de 73 % à 64 % des internautes (selon les sources) (IE 7 : 42% + IE 6 : 22%) ?

- Sinon ne développe pas du tout pour IE7 mais seulement pour Opera, Firefox et IE8 (qui sont touts les 3 respectueux de CSS2.1 et son Box Model). Tu fais un petit test, si l'utilisateur a des versions qui ne respectent pas CSS2.1, tu lui demandes de télécharger des versions récentes d'un des 3 navigateurs.

[E.Fahd]

Salam,

@12monkeys,
- Oui je suis bien conscient de ça. Mais je suis aussi conscient que continuer à supporter les navigateurs anciens c'est contribuer à freiner l'adoption des standards par tout le monde. IE a déjà fait un pas énorme pour livrer un navigateur 100% compatible CSS2.1, et il y aura un déploiement par Windows Update, de façon à ce que touts les utilisateurs utilisant IE7 passent à IE8.

- Alors oui, faire un site il y a 6 mois uniquement compatible avec FF et Opera c'était vraiment suicidaire, mais aujourd'hui (ou plutôt dans 2 mois) il n'y aura plus aucune raison de le faire, à part freiner la standardisation du web.

- Puis de toutes façons c'est simple : Tu casseras quelque choses dans les deux cas. Si tu ne fais pas un hack spécialement pour IE, le site marchera sur IE8 mais ne marchera pas sur IE7 et antérieurs. Si tu fais un hack pour IE, le site marchera sur IE7 et antérieurs mais ne marchera pas sur IE8 (d'ailleurs c'est visible sur quelques sites qui ont bricolé pour contourner certains problèmes posés par IE et qui souffrent de problèmes d'affichage sous IE8beta2). Donc à choisir entre supporter l'ancien ou le nouveau, je choisis le nouveau pour la simple raison que l'ancien deviendra vite obsolète.