Discussion :

[Philousk]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :



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

Philousk

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<figure>
  <img src="..." alt="">
</figure>

avec le CSS suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Philousk]

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 h1 + img
	{
		float: left;
		height: 100px;
		margin: 15px;
		border: 1px solid black;
		outline: 5px dotted brown; 		
	}

[NoSmoking]

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

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