28220 sujets

CSS et mise en forme, CSS3

Largeur variable et centrage

Bonjour,

Après une multitude d'essais et des recherches sur le net, je me décide à soumettre mon problème...

Dans un bloc de largeur fixe, je voudrais mettre sur la gauche une image dont les dimensions sont susceptibles de varier un peu, et à droite un texte centré horizontalement dans la largeur restante, et verticalement par rapport à l'image (dépassement de la hauteur d'image exceptionnel => le comportement m'est égal).

Le problème semble tout simple, mais je n'arrive pas à trouver une bonne solution, compatible avec les différents navigateurs...

Je précise que j'ai lu les articles sur le positionnement CSS d'OpenWeb et du Coin des Experts, mais que je n'ai pas su y trouver la solution que je recherche...
Modifié par jibe74 (02 Feb 2007 - 19:17)
Merci, je viens de trouver. En fait, mon problème était surtout les alignements horizontaux rendus difficiles par le fait que je ne connais que la largeur totale du bloc, et que je veux un centrage dans la largeur restante.

Finalement, j'ai réussi de la manière suivante :

<div style="width: 800px;">
	<table>
	<tr>
	<td style="text-align: left; width: 0;">
		<img src="image.jpg" alt="" />
	</td>
	<td style="text-align: center; width: 100%; vertical-align: center;">
		Lorem ipsum dolor sit amet, dui sit. Torquent sapien pellentesque dapibus arcu consequat, arcu mattis nam.
	</td>
	</tr>
	</table>

</div>

(j'ai tout mis dans le code HTML : plus simple pour les essais Smiley cligne En fait, j'ai dû tourner en rond à cause de propriétés restantes dans mon code CSS... Smiley confus )

S'il y a une meilleure solution, je suis preneur !

Autre question : serait-il possible d'obtenir un alignement vertical à l'aide de la propriété display ? Je crois qu'on peut donner à un élément quelconque le comportement d'une table par ce moyen ?
jibe74 a écrit :

Autre question : serait-il possible d'obtenir un alignement vertical à l'aide de la propriété display ? Je crois qu'on peut donner à un élément quelconque le comportement d'une table par ce moyen ?


Display:table (et autres valeurs associées) n'est pas implémenté par IE Windows.

Display:inline-block n'est pas implémenté par Firefox

Ces solutions restent donc aujourd'hui théoriques.
Modifié par Laurent Denis (02 Feb 2007 - 08:22)
Modérateur
bonjour,

En version "theorique" , j'ai a plusieurs reprises emit la possibilité "bidouilles" pour IE (display:inline +zoom) associer au display:table et compagnie. utiliser au minimum avec display:table+ display:table-cell; pour les autres navigateurs ceci:

http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html

Le code de cette page a deja etait laché sur ce forum et j'ai finalement decider de la mettre en ligne.

Maintenant , un tableau d'une cellule est bien plus sûr , facile , et rapide a mettre en oeuvre sans aucuns doutes quand aux resultats ....

Cette page demontre "plutot" , les resultats , effets inattendu que peut apporter IE quand on confere par megarde ou ignorance le "layout sur un element de type : inline .

GC
Modifié par gcyrillus (02 Feb 2007 - 08:38)
Bonjour,

Merci à tous les deux. Ton code est intéressant et instructif, gcyrillus, et je le garde sous le coude. Mais comme tu le dis toi-même, un tableau est plus sûr et plus rapide à mettre en oeuvre, et je vais donc pour le moment garder ma solution.
Bon, je m'aperçois que j'ai encore un problème... Dans Opera, le texte est déporté sur la gauche, alors que tout fonctionne bien sous FF et IE...

affichage normal
affichage sous Opera

Le code est celui que j'ai indiqué plus haut.

Si quelqu'un a une meilleure idée pour faire ça bien dans tous les navigateurs...

Je cherche de mon côté, mais comme j'avais déjà pas mal tourné en rond, vos idées seront bienvenues.
Sujet clos
Aller à