Bordure sur image "non collé"

Bonjour tout le monde.

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

Le CSS utilisé ressemble à ca :

 .img1 {          border : 1 solid #F00;          border-color : #F00;          padding-top: 8px;   padding-right: 8px;   padding-bottom: 8px;   padding-left: 8px;      }

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)

Donc, comme on peut voir sur la page de test,
[u]

  • sous FF :[/u]
  • 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 :stuck_out_tongue: )

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;

Ouais, j’ai oublier de préciser … c’est a appliquer sur des images de tailles diverses et variées … :confused:

[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 … :confused:
[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 ^^)

[code]
.bordure
{
 background-image : url(".");
 padding : __px;
}

.bordure img
{
 border : px solid #____;
}

 
[/code]

et voila ?
reste que ton motif ne sera pas forcement repeté exactement, vu que ton image peut avoir n’importe quelle taille

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.

Tu as bien compris mon problème ?

t’enflammes pas ! bah oui j’ais pas capté ton problème (à defaut de pas comprende le css), qui me semble ne pas en etre un finalement : /

je reprends…

si tes images peuvent etre cliquable ou pas, il me semble correct de partir du cas le moins générique : les images peuvent etre clicables !

Plutôt que t’utiliser une div sers toi systematiquement d’un lien, qu’il soit actif ou pas.
Il faut savoir que la balise est une balise “inline” donc, padding, margin ne s’applique pas exctement normalement ! il faut donc changer sont mode d’affichage de inline à block !

solution :

[code]
.bordure
{
 display : block;
 padding : ___px;
 border : ___px solid #______;
}

.bordure img
{
 …
}

[/code]

le te permet de faire un lien factice.

Je m’enflamme pas, t’inquiete pas (il manquait peut etre un smiley :P)

[quote name=‹ kursk › date=’ 15 Sep 2005, 16:21’]Plutôt que t’utiliser une div sers toi systematiquement d’un lien, qu’il soit actif ou pas.

le te permet de faire un lien factice.
[right][post=« 397598 »]<{POST_SNAPBACK}>[/post][/right][/quote]

Ouaip. Mais dans ce cas, il lien est peut etre « factice » mais il existe quand meme (il link la page en court).

Dans ce cas, je vais me recuperer des :

  • Monsieur, votre lien il marche pas !
  • Hey, y a un lien, ca va nul part, ca doit etre un pop-up, mais j’ai desactiver tout mes anti-pop-pup, ca marche toujours pas !
  • Pourquoi j’ai une main quand je vais sur l’image ?

Et plein d’autre encore :stuck_out_tongue:

Que l’élément parent soit inline ou block ne changera rien à l’interprétation différente des marges.

bon bah place les dans un

, t’ajoutera les lien au cas par cas. ça change rien au css sauf rajouter

.bordure a img { &nbsp;border : none; }

marges non, mais padding oui, c’est ce que j’utilise d’ailleurs :stuck_out_tongue:

[quote name=‘kursk’ date=’ 17 Sep 2005, 14:17’]bon bah place les dans un

, t’ajoutera les lien au cas par cas. ça change rien au css sauf rajouter

[right][post=“398325”]<{POST_SNAPBACK}>[/post][/right][/quote]

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 ?

Houlalahh le code… :stuck_out_tongue: :stuck_out_tongue:

Bon alors… rien de compliqué comme tu dis, mais quelques conseils :

Ainsi Firefox et Internet Explorer redeviendront tes amis :stuck_out_tongue:

Voilà un exemple qui fonctionne :
http://64k.be/files/exemple.html

[code]

Untitled Document
[/code]

Je te conseille de lire les articles CSS : on reprend tout à zéro !

Ouais, bon, c’est du code fait a la « va vite ». Sur un code plus propres, ca marchait pas beaucoup mieux mes trucs.

En tout cas, merci, en effet, ca roule ton code.

Merci :stuck_out_tongue:

Haha j’avais oublié le doctype, juste. Meaculpa (mais c’est tellement rare de pouvoir utiliser du strict)