problème vertical align

Version imprimable

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:

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 ?

30/08/2008, 03h28
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)
30/08/2008, 11h29
12monkeys

Bonjour

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

Citation:

Envoyé par E.Fahd

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

Citation:

Envoyé par E.Fahd

- 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...
30/08/2008, 11h55
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.
30/08/2008, 12h20
12monkeys

Citation:

Envoyé par 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.

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%) ?

Citation:

Envoyé par E.Fahd

- 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.
30/08/2008, 12h35
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.
30/08/2008, 13h46
12monkeys

Citation:

Envoyé par 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.

Je comprends bien ton point de vue et je suis bien d'accord avec toi : il ne faut pas soutenir les navigateurs anciens... (c'est bien pour ça que j'utilise FF3). Mais il faut faire avec. Tu évoques là un monde idéal, ce n'est pas parce que IE8 va sortir bientôt que tout le monde va l'adopter immédiatement et instantanément.

IE 6 n'est pas mort, et il sera encore utilisé dans les années à venir (vois le lien plus haut il est encore utilisé à 22% alors que IE 7 est sorti il y a bientôt 2 ans). Je peut d'autant plus en parler qu'au travail nous avons encore tous IE6. Et quand je vois la réaction de mes collègues qui n'y connaissent rien en informatique (je ne les blâme pas) et qui ne sauraient pas faire de mise à jour et qui ne connaissent assurément pas la différence entre IE6 et IE7...

Citation:

Envoyé par E.Fahd

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

Là je ne comprends pas : si IE8 est totalement conforme aux normes, il suffit de faire un site valide, ensuite pour IE7 et IE6 on fait un hack ou une feuille de style spécifique... Je ne vois pas en quoi ça influera sur IE 8 ??

Mais bon là n'est pas le sujet de la discussion, et pour ne pas faire de hors sujet j'arrêterais là mes réflexions sur le sujet...

Le problème dans le cas actuel E.Fahd c'est très simple. Sur le site que je fait la maintenance, la propriétaire désire se créer une petite "régie de pub". Ce qui fais que il vas falloir que ce soit compatible pour tout le monde, il y a juste pas de choix.

Je crois que je vais opter pour le plus simple et revenir aux bonnes vielles méthodes classiques des tables. Parce que dans l'état actuel je vois vraiment pas :S

[edit]
Avec ma recherche il semblerait qu'avec un table ça fonctionne. C'est pas propre mais ça fonctionne.
Code:

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 31 32 33 34 35 36 <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; } #cell { width: 150px; height: 75px; overflow:hidden; } </style> <table id="machin"> <tr> <td id="cell" style="background-image:url(image.gif);">   </td> </tr> <tr> <td id="cell" valign="center"> <span id="content"> Clinique Dr. Machinchouette<br> 1717 Ch Chambly, Longueuil<br> 1717 Ch Chambly, Longueuil </span> </td> </tr> </table>