Ajouter deuxième bordure pointillée pour une image dans le css.

Bonjour chers forumeurs expérimentés,

Comme le titre l'indique, je voudrais savoir Comment faire ?

La première bordure est solide 1px black, la deuxième, 5px brune et pointillée dans css seulement...

Pour l'instant, mon code css est le suivant :

Code:

---

1 2 3 4 5 6 7 8

h1 ~ img { float: left; height: 100px; margin: 15px; border: 1px solid black; border: dotted 5px brown; /* à vérifier*/ }

---

Et le passage html concerné :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="contenu-principal"> <h1 id="section1">Première section</h1> <img src="ressources/Images/avions/avion1.jpeg" alt="avion1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   </div>

---

Voilà, je galère, je ne sais pas quel référence css employé et comment l’utiliser.

Le résultat devrait ressembler à ceci :

Pièce jointe 441164

Merci à l'âme charitable voulant m'aider !

Philousk

Bonjour,
tu peux toujours regarder du côté border-image pour réaliser cela ou faire plus simple en mettant un conteneur autour de ton image, par exemple

Code:

---

1 2 3

<figure> <img src="..." alt=""> </figure>

---

avec le CSS suivant

Code:

---

1 2 3 4 5 6 7 8 9 10

figure { float: left; margin: 0 1em; padding: 2px; border: dotted 5px brown; } img { border:1px solid black; display: block; }

---

Merci je vais expérimenter ta méthode assurément, mais finalement, j'ai aussi réussi avec la commande outline !:P

Code:

---

1 2 3 4 5 6 7 8

h1 + img { float: left; height: 100px; margin: 15px; border: 1px solid black; outline: 5px dotted brown; }

---

Citation:

---

... mais finalement, j'ai aussi réussi avec la commande outline !:P

---

Même si je n'aime pas utiliser des éléments d'accessibilité à ces fins cela reste une bonne solution concernant les images ;)