Discussion :

[Kira1981]

Bonjour

J'ai un petit souçi a résoudre sur des vignettes.
Je dois tourner autour du pot depuis deux jours.
J'ai quatre vignettes dans un bloc donc deux au dessus et deux en dessous et j'ai des bordures en sachant que je voudrais avoir la même épaisseur de bordure pour chaque vignettes.
donc voici mon code html :

Code html :

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

1
2
3
4
5
6
7
8
<div class="form-style-8">
<div id="first"></div>
<div id="second">
<div class="vignette float-left"></div>
<div class="vignette float-left"></div>
<div class="vignette float-left"></div>
<div class="vignette float-left"></div></div>
</div>

et voici mon code CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*debut bloc 2*/
.form-style-8{
	width: 820px;
	height: 410px;
	padding: 2px auto;
	margin: 0px auto;
}
#first
{
    background-image: url('img/saut.jpg');
    height: 400px;
    float:left;
    margin-top:5px;
    border:1px solid #000;
    width:48%;
}
#second
{
    height: 408px;
    float:right;
    margin-top:5px;
    width:48%;
	border:none;
}
.clear {
	clear: both;
}
/*************vignettes*****
***************************/
.vignette {
	margin:0 auto;
	height:197px;
	width:192px;
	border:2px solid #000;
}
.float-left {
	float:left;
}
/**********fin vignettes***********
/*fin bloc 2*/

[NoSmoking]

Bonjour,
tu peux avantageusement utiliser la pseudo-classe:nth-child(an+b) pour cibler tes éléments, cela donnerait

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.vignette:nth-child(even) {
  border-left-width: 1px;
}
.vignette:nth-child(n+3) {
  border-top-width: 1px;
}
.vignette:nth-child(odd) {
  border-right-width: 1px;
}
.vignette:nth-child(-n+2) {
  border-bottom-width: 1px;
}

en faisant de la sorte, redistribution de la largeur de bordure, cela te garantie que tes éléments auront même hauteur et même largeur.

↪ La pseudo-classe :nth-child(an+b)

Nota: tu pourrais également simplifier ton CSS mais bon ...

[Kira1981]

Merci, je vais essayer ce sélecteur.

[Kira1981]

Bonjour,
j'ai un sélecteur qui ne fonctionne pas.
c'est le "nth-child(odd) et je ne comprend pas trop pourquoi?
j'ai juste fait une petite modif au code sinon j'avais un gros décalage dans mes vignettes.
Voila ce que j'ai fait en CSS, reste à comprendre pourquoi mon nth-child(odd) ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.vignette {
	margin:0 auto;
	height:196px;
	width:191px;
	border:2px solid #295A45;
}
.vignette:nth-child(even) {
  border-left-width: 1px solid #295A45;
}
.vignette:nth-child(odd) {
  border-right-width: 1px solid #295A45;
}
.vignette:nth-child(n+3) {
  border-top-width: 1px;
}
.vignette:nth-child(n+1) {
  border-bottom-width: 1px;
}
.float-left {
	float:left;
}
.clear {
	clear: both;
}

[NoSmoking]

Attention à la déclaration de tes propriétés

Code css :

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

1
2
3
.vignette:nth-child(even) {
  border-left-width: 1px solid #295A45;
}

c'est la width que tu définies et non la bordure compléte, donc

Code css :

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

1
2
3
.vignette:nth-child(even) {
  border-left: 1px solid #295A45;
}

ou encore

Code css :

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

1
2
3
4
5
.vignette:nth-child(even) {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #295A45;
}

[DMC]

Bonjour kira1981,

J'arrive peut être un peu tardivement pour te proposer deux autres solutions différentes (par forcement meilleurs juste différentes) :
- bordures avec décalage de marges
- bordures fait avec les espaces entres les vignettes

https://codepen.io/Zonecss/pen/VOaBdp