[Résolu] Triple bordure autour d'une image

Bonjour,

Je voudrais faire une triple bordure autour d'une image : une petite, une large puis une derniere petite.
J'ai essayé de faire un div contenant ma photo avec une bordure sur le div et une sur img, mais le probleme c'est que le div a la largeur du contenant, donc la bordure est éloignée de la photo à gauche et à droite...
Est-ce possible ?

Merci d'avance.
Spoofix.

PS : Je ne connais pas d'avance la taille de la photo.
Modifié le 29 Jan 2005 - 17:45

Spoofix a écrit :
... la largeur du contenant, donc la bordure est éloignée de la photo à gauche et à droite ...

Essaye en mettant des [i]padding[/b] et [i]margin[/b] à zéro.

Pour la double bordure, essaye border: [i]2px double #couleur;[/b]
Modifié le 26 Jan 2005 - 20:05

Numero 6 a écrit :

Essaye en mettant des [i]padding[/b] et [i]margin[/b] à zéro.

Non, ca ne marche pas.
Sous IE, si je mets Width : 0px, ca marche (il élargit tout seul), mais sous Firefox, ca ne marche pas (width reste à 0px)
Merci qd meme !

Il faut utiliser min-width pour firefox.

Désolé, mais j'ai beau essayer dans tous les sens, mais je vois pas en quoi ca peut m'aider...

Via CSS, c'est un effet que l'on peut obtenir au prix d'un code lourd et souvent pas très propre.

Si tu tiens à obtenir cet "effet" purement esthétique, ma suggestion est la suivante.

Prends un raccourci, fais un tableau.

Une triple bordure ? Carrément ?

Pourquoi ne pas se retreindre un tout petit peu et utiliser les styles déjà existants ?
http://www.tizag.com/cssT/border.php

Un border-style : double est déjà assez sympa, non ? .. Et ça évite d'avoir recours à des bidouilles lourdes et inutiles.

Désolé, mais j'y tiens !
Je vais essayer les tableaux... Mais j'ai jamais fait de tableaux, moi ! On m'avait bien dit : "Les tableaux sont morts, vive les tableaux !". J'aurais du me méfier.
Merci à vous pour vos réponses quasi-instantanée !

PS : si quelqu'un a une solution "pure css", ca m'intéresse qd meme !

Spoofix a écrit :
Désolé, mais j'y tiens !
PS : si quelqu'un a une solution "pure css", ca m'intéresse qd meme !

Mais il serait difficile en plus !!!!

Voilà un test, mais je te préviens : c'est de la bidouille !
http://alsacreations.com/divers/bordure.htm
(bouton droit pour le code source)

PS : note que ce que te dit Stephan n'est pas faux

hum...

Va falloir bidouiller un peu plus parce que dans Opera, ce n'est pas probant et je serais curieux de voir sous IE mac...

Merci pour cette solution...
En fait, l'astuce vient du float : left, parce que si je rajoute juste ca à mon code existant, ca marche plutot bien. Le hic, c'est que ca me pose d'autres problemes (j'utilise deja float : left pour mon menu et donc je ne peux pas vraiment faire de clear : left apres l'image).
Je crois que je vais me rabattre sur les tableaux (ca sera l'occasion d'apprendre !).
Merci tout de meme, car j'ai pas mal appris sur cet exemple.

L'essais suivant est le mieux que je peux faire sans trop bidouiller.

.bordure { 
   float: left;
   border: 1px solid black; 
   padding: 5px 5px 0 5px; 
}
.bordure img { 
   border: 3px double black; 
}

<div class="bordure">
 <img src="logomdc.gif" width="80" height="80" alt="" />
</div>

Le problème est que le bloc réagit au redimentionnement du texte, ce qui est assez gênant...

Merci à tous pour vos réponses...
Finalement, j'ai fait un tableau
Désolé de vous avoir embêté !
A+

Spoofix a écrit :
Désolé de vous avoir embêté !
A+

Tu n'as embêté personne.
Par contre, ce serait parfait de conclure ton sujet en ajoutant un [Résolu] dans le titre (en l'éditant).
Merci d'avance