Aller au contenu

Sujets conseillés

Posté

Salut,

Ma page comporte un <div> de hauteur fixe.

Dans ce <div>, j'insère une image de 25px de haut, une autre de 15px (white_1.gif), et du texte.

Problème : tout s'aligne en bas. Le bas de l'image 1 touche le bas du <div>, pareil pour l'image 2 et le texte.

Donc l'image 1 est plus haute que les deux autres, l'image 2 est plus haute que le texte, bref, pas d'alignement, c'est très laid :nono:

Je cherche tout simplement un moyen qui permettrait de centrer les élements entre-eux : l'image 2 se case à la moitié de l'image 1, le texte se centre verticalement par rapport aux images.

Et donc le haut et le bas de l'image 1, qui dépassent l'image 2 et le texte, font la même hauteur... et donnent un effet un peu "aligné"...

C'est assez basique, ça doit être réalisable, non ?

Je ne sais pas si j'ai été clair :huh: auquel cas je pourrais re-donner des explications ;)

Merci,

Loupilo

Posté

C'est faisable avec la propriété vertical-align

div#tondiv * { vertical-align: middle; }

Posté

J'avais essayé... sans le *...

Merci Bobe ! Super !

Mais, ça marche sous IE (ce serait sympa, ça) ?

Loupilo

Posté (modifié)

Hola ! ça n'est pas du tout ça <_<

Le sélecteur universel * désigne "tout élément", y compris le conteneur initial de la page, c'est à dire le <body> (en HTML) ou le <html> (en XHTML). Son utilisation n'a rien d'un hack :

* {
border 1px solid;
}

...donnera une bordure à tous les éléments susceptibles d'en avoir un.

.blabla * {
border 1px solid;
}

...fera la même chose mais uniquement dans les conteneurs de classe "blabla"

Pour le * selecteur { propriété ; }, il fonctionnera dans tous les navigateurs (heureusement, puisqu'il veut simplement dire "tel élément situé dans n'importe quel élément"), mais ne servira à rien puisqu'il signifie aussi "tel élément situé dans le body".

Maintenant, il y a une syntaxe absurde en CSS, qui est en fait * html img {...}, qui signifierait "les images contenues dans un élément html lui-même contenu dans n'importe quel élément". Or l'élément html est l'élément parent du document, et n'est contenu dans rien. Cette syntaxe renvoit donc toujours un résultat vide... sauf dans Internet Explorer Windows 5.0 à 6.0, qui le lit comme si c'était un simple img{}. IE est donc le seul à appliquer les propriétés spécifiées à l'aide de cette syntaxe.

Cela dit, c'est un hack à proscrire, car il repose sur une syntaxe détournée, aux effets imprévisibles dans les navigateurs futurs...

Modifié par LaurentDenis
Posté

Donc, si j'ai bien compris:

* {proprièté}

applique la proprièté à tout les élément susceptible de la "mettre" contenu dans le document pour lequel s'applique la feuille de style.

:D

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...