Ca fait quelque jours que je me prend la tête sur un problème qui pourtant ne me semblait pas si compliqué.
Le but : mettre une bordure autour d’une image (que l’image soit une image « simple » ou un lien) mais que cette bordure soit située a X pixels des bords de l’image.
Le probleme : que le tout soit compatible à la fois sous FF et sous IE (sous FF, j’y arrive, pas de probleme, c’est IE qui pose problème).
Une page d’exemple est visible ici (avec la feuille de style en ce lieu (il y a un « img1 » et un « img2 » car je souhaite avoir deux style de bordure, plus ou moins proche de l’image, c’est pas le plus important ca)
une image qui n’est pas un lien, avec un border=1, ca marche niquel.
une image qui est un lien, que le class=img1 soit sur l’image ou sur l’image+lien, ca marche niquel aussi.
* sous IE :
sur une image qui n’est pas un lien : il me faut un <div class=… pour le faire passer, mais ceci ne passe pas sur FF.
sur une image qui est un lien : ca marche un peu comme FF, ca, c’est bon.
De plus, on s’apercoie que sur IE, dans les cas où ca marche, on a en fait 2 fois le cadre : une fois a X pixel du bord + une fois « collé » a l’image. Si on pouvais se passer de celui qui est collé a l’image aussi (je cale là, ca veux pas )
En résumer : comment faire pour que ca marche aussi sur IE de la meme maniere que ca marche sur FF dans les cas (1 et (4 ou 5)) de la page d’exemple.
Quelqu’un peut-il me venir en aide ? help ? pitié, je suis a cours d’idée là.
La solution consiste plutôt à placer ton image () dans un bloc (div ou span) et puis à positionner l’élement img par rapport à son parent. Après tu utilises une image de fond pour ton élement parent sur laquelle tu dessines une bordure. Evidemment ça marche si ce parent a des dimensions fixes;
[quote name=‹ Hazadess › date=’ 13 Sep 2005, 13:22’]Ouais, j’ai oublier de préciser … c’est a appliquer sur des images de tailles diverses et variées …
[right][post=« 396722 »]<{POST_SNAPBACK}>[/post][/right][/quote]
J’aurais bien une solution mais c’est à base de règles d’échappement, de divisions dans les css et d’accès DOM côté HTML… Bonjour la maintenance donc… (sinon là j’ai un truc css only qui centre mais uniquement horizontalement).
Le plus simple, et sans troller, serait peut-être de travailler avec des tableaux? Ca dépend du cahier des charges évidemment…
[quote name=‘nolan’ date=’ 13 Sep 2005, 13:43’]Le plus simple, et sans troller, serait peut-être de travailler avec des tableaux? Ca dépend du cahier des charges évidemment…
[right][post=“396731”]<{POST_SNAPBACK}>[/post][/right][/quote]
Oui, j’y ai pensé.
Pourquoi je ne l’ai pas encore fait, c’est tout simplement que dans ma feuille de style actuelle, je n’ai pas de
.img1 {
blablabla; }
mais plutot un
img {
blablabla; }
Tu voies le truc, ca s’applique a TOUTES les images automatiquement.
Donc oui, le tableau, affiche une bordure de 1px, dimension auto, centrer l’image dedans, ca marcherais. C’est juste qu’il faut que je fasse super gaffe de l’appliquer pour toutes les images.
Mais j’ai l’impression que je vais devoir me tourner vers ça quand même, a moins qu’une autre personne n’ait d’autre idée. (oui, j’attend encore un peu ^^)
Là, j’avoue que je ne pige abolsument pas l’interet de ca.
Mettre une image en arriere plan ? Pourquoi faire ? Je ne peux pas mettre une pseudo bordure réalisé a l’aide d’une image, vu que la taille de l’image a encadrer change tout le temps.
Page généré dynamiquement a partir d’une interface d’admin où le “client” peut changer a foison l’image qu’il veux mettre.
Donc ca ne va pas ton espece de truc “figé” pré-fabriqué a l’avance.
[quote name=‘Hazadess’ date=’ 17 Sep 2005, 15:21’]Page généré dynamiquement a partir d’une interface d’admin où le “client” peut changer a foison l’image qu’il veux mettre.
Donc ca ne va pas ton espece de truc “figé” pré-fabriqué a l’avance.
[right][post=“398327”]<{POST_SNAPBACK}>[/post][/right][/quote]
et ? franchement j’ai l’impression que tu te crée tes problèmes la : /
faudrais que ça se fasse tt seul sans rien modifier ?