Discussion :

[Tacosx]

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é.

[Muchos]

Bonjour,

Il n'y a aucun tableau dans votre code. Les tableaux se font avec TABLE.

Pour placer des éléments BLOCK les uns à côté des autres, vous pouvez les rendre flottant ou bien modifier leur comportement (les rendre INLINE-BLOCK, par ex.)

[Tacosx]

Effectivement, je me suis certainement mal exprimé, je ne sais pas si je peux appeler ça un "tableau" du moins ça en a l'apparence.

En fait dans mon code HTML il y a les informations (contenu dans les balises <li>) sous forme de liste que je souhaiterais faire apparaitre sous forme de tableaux (un tableau pour chaque spécialités: Reseaux, Dév, SEN).

Dans mon code CSS la mise en forme de la "liste" en question se fait correctement (ajout de bordures, positionnement du texte au centre etc) cependant je n'arrive pas à mettre ses 3 block distincts de façon identique s'est à dire, de même largeur et même hauteur, et côte à côte afin de bien pouvoir différencier chaque spécialités.

En fait ça serait plutôt de simples "cadres" contenant des informations plutôt qu'un tableau. Je ne connais pas les tous les termes spécifiques liés à ses langages.

Dois je utiliser obligatoirement les balises <ol> et <li> ou bien est ce que je peux les remplacer par des <div> ? A mon gout moins "propre".

Merci de votre aide

[NoSmoking]

Bonsoir,
pourquoi ne pas utiliser une TABLE justement ou encore des DIV en display:table, mais je dois avouer que ne n'ai pas bien saisi le rendu final!

[Tacosx]

Bah justement s'est la question que je me posais, je vais donc essayer avec des <div>.

J'ai fais un schéma (à la va vite ^^) pour "montrer" le rendu final.
(Je n'ai pas fais les détails du genre le curseur afin de pouvoir faire défiler les compétences sur chaque tableaux).