Discussion :

[facilus68]

Bonsoir,

Je voudrais créer une liste de div de telle sorte que ca apparait comme cela :

BLOC DIV 1 ------ BLOC DIV 2 (ligne 1)
BLOC DIV 3 ------ BLOC DIV 4 (ligne 2)
BLOC DIV 5 ------ BLOC DIV 6 (ligne 3)

ainsi de suite ... la liste est statique pas dynamique.

Le div est représenté comme un rectangle

Quesque vous me suggériez pour implementer cela ?

Merci

[rodolphebrd]

Bonjour,

en partant d'une liste non-ordonnée et en utilisant la pseudo-classe nth-of-type:

Code :

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

1
2
3
4
5
6
7
8
<ul> 
 <li> article 1 </li> 
 <li> article 2 </li> 
 <li> article 3 </li> 
 <li> article 4 </li> 
 <li> article 5 </li> 
 <li> article 6 </li> 
</ul>

Code css :

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
ul{
  list-style:none;
  width:408px;
  text-align:center;
}
li{
  width: 200px;
  height: 50px;
  line-height:50px;
  font-weight:bold;
  font-size:2em;
  margin:2px;
 }
li:nth-of-type(odd){
  background:salmon;
  float:left;
}
li:nth-of-type(even){
  background:silver;
  float:left;
}

http://codepen.io/maxwbailey/pen/yuJtF

[facilus68]

Merci rodolphebrd pour ta suggestion et aussi pour le site de test que tu ma communiquée

Es ce que je peux generaliser la css pour les listes droites et gauches ?

C'est a dire faire un style pour les div droite et un pour les div gauche ?

[rodolphebrd]

J'ai édité mon code pour répondre à votre question...
C'est cette partie qui vous intéressera.

Code css :

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

1
2
3
4
5
6
7
8
li:nth-of-type(odd){
  background:salmon;
  float:left;
}
li:nth-of-type(even){
  background:silver;
  float:left;
}

[facilus68]

Je n'arrive pas a les aligner, j'obtiens cela :

http://www.hostingpics.net/viewer.ph...ivdiv1line.png

Code css :

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
ul.cat{
  list-style:none;
  width:408px;
  text-align:center;
}
ul.cat li{
  width: 200px;
  height: 50px;
  line-height:50px;
  font-weight:bold;
  font-size:2em;
  margin:2px;
  padding:5px
 }
ul.cat li:nth-of-type(odd){
  background:silver;
  float:left;
}
ul.cat li:nth-of-type(even){
  background:salmon;
  float:right;
}
 
ul.cat h1 {
  font-size: 20px;
  line-height: 15px;
}

[rodolphebrd]

Si vous rajouter un padding de 5px il faut le prendre en compte dans les dimensions du conteneur (largeur= width + somme des margin + somme des padding).

Il vous faudra ajouter 20px (5+5+5+5) au 408px existant.

Code css :

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

1
2
3
4
5
ul.cat{
  list-style:none;
  width:428px;
  text-align:center;
}

http://codepen.io/maxwbailey/pen/tagrv