Discussion :

[fredericmarcel]

Y a-t-il une façon simple de disposer les div "ligne1", "ligne2" et" ligne3" qui contiennent chacune 3 élements en inline-block ?
En quelque sorte, c'est un tableau (table) de trois lignes et trois colonnes.
Chaque cellule contient un div centré verticalement et horizontalement.
Le tableau est centré sur la page.
C'est possible ?

https://jsfiddle.net/fredericmarcel/1zwscL0z/3/

Merci de votre aide. [smile]

[Jacques Beauregard]

Bonjour,

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
<div>
  <div class="testdiv">
    div 1-1
  </div>
   <div class="testdiv">
    div 1-2
  </div>
   <div class="testdiv">
    div 1-3
  </div>
</div>
<div>
   <div class="testdiv">
    div 2-1
  </div>
   <div class="testdiv">
    div 2-2
  </div>
   <div class="testdiv">
    div 2-3
  </div>
</div>
<div>
   <div class="testdiv">
    div 3-1
  </div>
   <div class="testdiv">
    div 3-2
  </div>
   <div class="testdiv">
    div 3-3
  </div>
</div>

Code :

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

1
2
3
4
5
.testdiv{
  float:left;
  width:33%;
  text-align:center;
}

[Invité]

Bonjour,

selon ton code :

Code css :

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

1
2
#ligne1, #ligne2, #ligne3 { clear:both; }
.boite1, .boite2, .boite3, .boite4, .boite5, .boite6, .boite7, .boite8, .boite9 { float:left; width:33.3%; margin:0; padding:0; }

Cela dit, l'intérêt des classes est de regrouper sous une même classe plusieurs éléments ayant les mêmes caractéristiques.
en conséquence, dans le HTML, remplace :

• ligne1, ligne2, ligne3 par "ligne"
• boite1, boite2, boite3, boite4, boite5, boite6, boite7, boite8, boite9 par "boite"

Et le CSS se simplifie :

Code css :

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

1
2
.ligne { clear:both; }
.boite { float:left; width:33.3%; margin:0; padding:0; }

[fredericmarcel]

Merci.
Je me demande si je ne peux pas réaliser toutes ses manipulations en créant les éléments de base avec html et css et en les manipulant dynamiquement avec javascript à partir de leur id.
J'ai l'habitude de le faire avec actionscript et je gagnerais un temps précieux car je ne vais pas maîtriser pratiquement css de façon à transposer mon appli flash/actionsscript avant plusieurs semaines.
J'ai passé toute la journée sur ces questions de centrage. C'est franchement décourageant.

[Invité]

Rien ne t'empêche de faire des recherches perso, et de lire des tutos et docs :

• Les meilleurs cours et tutoriels CSS
• FAQ CSS

[fredericmarcel]

Merci. Je vais suivre ton conseil. Bonne journée.