28172 sujets

CSS et mise en forme, CSS3

Bonjour,

petit pépin que je ne sais pas comment résoudre...

Sur une page, j'ai des liens textes, et des liens qui sont une image. Si j'applique une bordure et/ou un hover aux liens, tout me convient, par contre, je me suis rendu compte que ce qui était appliqué aux images était un peu... bousillé. Enfin, sous IE ca fonctionne comme je m'attendais, mais sous Opera, Firefox et Safari, le rendu est le meme, et pas comme je voudrais (bien que je me doute que ce soit ces 3 la qui aient raisons sur le rendu, hehe).

http://img224.imageshack.us/img224/9048/14731189ou3.png

Pourtant, le code est très très simple... je ne comprends pas trop. Bref, j'aimerais savoir si ya moyen de faire en sorte que le rendu sous Firefox, Opera et Safari soit pareil comme celui sous IE (cadre autour des images, sans tout bousiller !!) ou alors une facon quelconque d'exclure les images de ma class "a" dans mon code css (appliqué un style avec un argument class dans la balise html <a> n'est pas une solution Smiley cligne )

Merci, et n'hésitez pas si mes explications ne sont pas claires...
kzeon a écrit :
ou alors une facon quelconque d'exclure les images de ma class "a" dans mon code css (appliqué un style avec un argument class dans la balise html <a> n'est pas une solution Smiley cligne )

Eh bien le problème est que ton style n'est pas appliqué aux images dans des liens (avec un sélecteur CSS tel que a img {...}, mais aux liens eux-même. Donc ce que tu souhaites faire c'est exclure de ce styles non pas les images contenues dans des liens, mais les liens qui contiennent des images. Mauvaise nouvelle: ça n'est pas possible en CSS; on peut sélectionner un élément en fonction de ses ancêtres (élément1 élément2), de son parent direct (élément1 > élément2), de l'élément frère qui le précède (élément1 + élément2), mais ne peut pas sélectionner un élément en fonction de son contenu.

Il faudra donc donner une classe particulière à ce lien, ou trouver un autre moyen d'y accéder en CSS.

Toutefois, un simple a img {vertical-align: middle;} pourrait éventuellement t'être utile ici.
Florent V. a écrit :

Eh bien le problème est que ton style n'est pas appliqué aux images dans des liens (avec un sélecteur CSS tel que a img {...}, mais aux liens eux-même. Donc ce que tu souhaites faire c'est exclure de ce styles non pas les images contenues dans des liens, mais les liens qui contiennent des images. Mauvaise nouvelle: ça n'est pas possible en CSS; on peut sélectionner un élément en fonction de ses ancêtres (élément1 élément2), de son parent direct (élément1 > élément2), de l'élément frère qui le précède (élément1 + élément2), mais ne peut pas sélectionner un élément en fonction de son contenu.

Il faudra donc donner une classe particulière à ce lien, ou trouver un autre moyen d'y accéder en CSS.

Toutefois, un simple a img {vertical-align: middle;} pourrait éventuellement t'être utile ici.

Ouais ouais, malheureusement je savais tout ca, je me demandais si y'avais pas un truc dérouté par lequel on aurait pu fixer cela...

Je vais simplement laisser tomber la fioriture que je voulais mettre sur les liens pour le moment, parce que de 1) ce n'est pas primordial, et de 2), je suis un peu puriste et j'aime pas les solutions du genre "on fou des class sur tous les images qui linkent quelque chose... hehe), je vais donc y aller comme ca. Enfin, je dis ca, mais en temps et lieux, c'est surement ce que je vais finir par faire xDD

Bon, malheureusement ca répond aux interrogations et doutes que j'avais... je vais vivre avec cela hehe.

Merci bien de la réponse =)

Le vertical-align peut répondre ici puisque l'image est en 80x15, autrement ca bousille, sauf si je force un taille de texte suffisament grande, donc on va oublier ca Smiley cligne