Bonjour à tous !

Débutant dans le domaine du HTML5 et du CSS3 je suis à la recherche d'aide concernant un positionnement particulier en CSS.

J'aurais souhaité pouvoir au sein de ma page web y insérer 3 tableaux côte à côte de la même taille, et que ses tableaux disposent d'un curseur afin de pouvoir faire défiler les informations qu'ils contiennent.

J'ai déjà commencé à écrire mon code et il y aura certainement des modifications à effectuer (je suis preneur pour toutes les remarques qui pourront me faire progresser.)

Voici mon code HTML qui sera la base de mon tableau:

Code html : 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
<ol>
	<section>
	<li><span class="Spe">Réseaux</span> 
		<ol>
			<li> Maitrise des réseaux TCP/IP </li>
			<li> Connaissance des différents types de réseaux (VPN, LAN, P2P etc) </li>
			<li> Configuration et maintenance serveurs (Cablâges, routeur, switch) </li>
			<li> Maitrise des logiciels Wireshark, PacketTracer Cisco, Active Directory </li>
			<li> Virtualisation avec VirtualBox ou VM Workstation </li>
		</ol>
	</section>
	</li>
 
	<section>
	<li><span class="Spe">Développement</span>
		<ol>
			<li> HTML5 &amp; CSS3 </li>
			<li> PHP &amp; MySQL </li>
			<li> JQuery </li>
			<li> VB.Net </li>
			<li> C# orienté objet (POO) </li>
			<li> Maitrise du langage SQL et du SGBD PostGreSQL </li>
		</ol>
	</section>
	</li>
 
	<section>
	<li><span class="Spe">Systèmes Electroniques et Numériques</span>
		<ol>
			<li> Utilisation et maitrise des différents systèmes d'exploitation Windows </li>
			<li> Connaissance des différents systèmes d'exploitation Linux </li>
			<li> Utilisation de logiciel bureautique tel que Excel, Word, Powerpoint etc </li>
			<li> Savoir diagnostiquer une panne informatique et y remédier </li>
			<li> Notions en alarme et sécurité </li>
			<li> Etude de lois de physique et d'électronique </li>
			<li> Etude de filtres, transistors ainsi que de cartes électroniques diverses </li>
		</ol>
	</section>
	</li>
</ol>

Voici donc mon code CSS, s'est a ce moment que je ne comprends pas quelles propriétés il faudrait que j'ajoute afin de placer mes 3 tableaux côte à côte:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* Affichage tableau compétence */
ol
{
	list-style-type: none;
}
ol ol
{
	border-top: solid 1px #555;
}
ol li li
{
	background-color: #eeefe0;
	color: #000;
	border: solid 1px #555;
	border-top: none;
}
.Spe
{
	width: 100%;
	padding: 5px 0px;
	font-weight: bold;
	color: #f16025;
}
 
/* transformation des éléments de type inline en type block en modifiant la propriété display et on les rend flottants en utilisant la propriété float. */
.conteneur
{
    display: block;
    margin-left: 25%;
    margin-right: 25%;
}
 
li, ol
{
	display: block;
	margin: 0;
	padding: 0;
    text-align: center;
}
ol li
{
	width: 10em;
	margin: 0em 1em 0em 0em;
	line-height: 1.5em;
	border: solid 1px #f16025;
    display: block;
    float: left;
}
ol li li
{
	width: 100%;
	height: 7em;
	font-size: 0.8em;
	color: #666;
	border: none;
	background-color: #eeefe0
}
.Spe
{
	display: block;
	width: 8em;
	padding: 0em 1em 0em 1em;
	font-weight: bold;
	color: #f16025;
 }
/* Affichage tableau compétence */
Mes tableaux apparaissent donc sur le bord gauche de ma page et les uns en dessous de autres, comment faire afin qu'ils puissent être centrés et côte à côte ?

Je vous remercie d'avance pour l'aide qui me sera apporté.