28220 sujets

CSS et mise en forme, CSS3

Image avec cadre noir + liseret blanc

Bonjour,

j'essaie de trouver le moyen le plus simple pour styler une image comme celle-ci

http://www.hardstyle-force.ch/divers/suisse4.jpg

C'est à dire lui mettre un cadre noir + un petit liseret blanc...

Je suis embêté car je n'arrive pas à mettre 2x border, bien sur, ou alors appliquer un fond avec un padding sur <img>, cela ne marche pas sous IE...

Comment faire le plus simplement, en sachant que je ne connaitrais pas la taille des images ?
Modifié par Noisequik (08 Aug 2005 - 12:29)
Salut,

J'utilise 
img {
border:2px solid #b52a23;
background:#d1d5be;
padding:5px;
margin:5px;
}


Et ça marche aussi sous IE. Modifie les couleurs.
Tu peux utiliser un padding blanc d'un pixel accompagné d'une bordure noire d'une dizaine de pixels sur l'élément <img>. Mais attention : IE6 ne créera le padding comme tu l'attends qu'en mode de rendu strict, c'est à dire avec les DTD qui conviennent.
(Voir ce tutoriel)

En revanche, IE5.0 et IE5.5 Windows n'afficheront que le bord noir: il semble qu'une image dans le modèle de boîte miscrosoft ne puisse pas avoir de padding, tout comme une femme honnête n'a pas de plaisir Smiley cligne
Oui c'est bien le problème que j'avais.

Je ne peux pas changer le doctype pour résoudre ce problème, je vais donc "sacrifier" les utilisateurs de IE qui n'auront pas le privilège de voir ma bordure blanche Smiley lol

Papyjo : je confirme que ton code ne marchera pas sous IE6 avec un doctype transitionnel Smiley decu

A moins que qqn trouve une solution...
img {
	background: white;
	padding: 1px;
	border: black solid 10px;	
}

La proposition de Laurent Denis : donne ce résultat, et fonctionne avec tous mes navigateurs sur Mac, avec un doctype html4. strict.
Si tu ne peux changer de doctype, tu peux faire comme l'image que tu as mis en exemple : C'est à dire que l'image elle même à ses bordures. Un petit script, ou mieux, un droplet dans Photoshop, tu glisses ton dossier d'images dessus et hop, en 1/4 de seconde toutes tes images ont leurs bordures
Modifié par Aureance (08 Aug 2005 - 15:32)
Noisequik a écrit :

Papyjo : je confirme que ton code ne marchera pas sous IE6 avec un doctype transitionnel


Ah, il y erreur, là, Noisequik Smiley cligne Le fait que le doctype soit transitional ou non ne changera rien au doctype switching d'IE6 en XHTML1.0.

En revanche, si tu utilises des doctypes transitionnal incomplets, ça change tout Smiley ravi

Voir Les DTD HTML4.01 et XHTML1.0 : comment choisir ? et Choix d'une DTD: le doctype switching n'est pas pour nous pour vérifier la DTD que tu utilises.

Sinon, la solution pour IE5.0 et IE5.5 est:
<style type="text/css">
<!-- 
div {
background-color: #000;
padding: 10px;
float: left;
}
img {
border: 1px solid #fff;
} 
-->
</style>
</head>
<body>
<div><img src="fond5000.jpg" alt="image" /></div>
</body>


Avec la contrainte de devoir faire flotter ton conteneur.


EDIT par Felipe: Pbe url
Modifié par Laurent Denis (08 Aug 2005 - 18:31)
oui j'ai confondu...

Je n'aurai pas du mettre le prologue XML qui fait balancer IE en mode quirk...

Maintenant je pense que je vais laisser comme ça et peut etre voir pour une solution en php, vu que mes images sont uploadées et resizées par ce moyen là, ca doit pas etre trop dur de mettre une bordure + un liseret Smiley lol
Sujet clos
Aller à