[Placement] Utiliser le CSS au lieu d'un tableau

**Marco85** · 19/12/2006, 13h14

Bonjour à tous,

J'ai réussi à faire ce que je veux faire (c'est chouette !) avec un tableau. Cependant, je lis partout qu'il faut arrêter d'utiliser les tableaux et utiliser la puissance du CSS pour le placement.

Voici mon code actuel :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="Default" href="design.css" />
    </head>
 
   <body>
 
	<table>
		<tbody>
			<tr>
				<td>
					<img src="image.png" alt="Image"/>
				</td>
				<td>
					<img src="image.png" alt="Image"/>
				</td>
				<td>
					<img src="image.png" alt="Image"/>
				</td>
			</tr>
			<tr>
				<td>Contemporaines</td>
				<td>Traditionnelles</td>
				<td>Traditionnelles d'autrefois et plus encore</td>
			</tr>
		</tbody>
	</table>
 
   </body>
</html>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
table
{
	margin: auto;
}
 
td
{
	text-align: center;
	vertical-align: center;
	width: 110px;
}

Comment utiliser le CSS pour obtenir le même résultat mais sans les tableaux ?

Merci d'avance,

Marco85

Edité 1 fois : Modification de code (balise img).

**landryx** · 19/12/2006, 13h24

salut

c'est assez simple. le css à plusieurs propriétés dont tu pourrais avoir besoin pour obtenir ton rendu. je crois que ce site peopose des cours et des tutos dessus..et au fait la balise img est autofermante

Code :

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

1
2
 
<img src="" alt="" />

**MasterOfChakhaL** · 19/12/2006, 13h26

Salut,

Je ne me suis pas spécialement penché sur ton code mais je me disais cela.

On t'a conseillé d'utiliser le css, c'est pas moi qui va t'en dissuader.
Mais je pense qu'il sera plus simple de faire du css si "tu penses css", que si "tu penses tableaux"

Ton code n'est pas très long pour l'instant, ca ne devrait pas être trop douloureux de recommencer avec une bonne base.
Commence par voir ce qu'il est possible de faire en css.
Si tu veux un exemple, je te suggère ce cours: Div et CSS : une mise en page rapide et facile

**Marco85** · 19/12/2006, 17h02

Envoyé par MasterOfChakhaL

Ton code n'est pas très long pour l'instant, ca ne devrait pas être trop douloureux de recommencer avec une bonne base.
Commence par voir ce qu'il est possible de faire en css.

Merci pour ce conseil très sensé !!!

C'est donc ce que j'ai commencé à faire. Et voici mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="Default" href="design.css" />
    </head>
 
   <body>
 
		<div id="container">
			<div class="model">
				<img src="image.png" alt="Image 1"/>
				<span class="text">Text descriptif 1</span>
			</div>
			<div class="model">
				<img src="image.png" alt="Image 2"/>
				<span class="text">Text descriptif 2</span>
			</div>
			<div class="model">
				<img src="image.png" alt="Image 3"/>
				<span class="text">Text descriptif 3</span>
			</div>
			<div class="separator"/>
		</div>
 
   </body>
</html>

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
#container
{
	text-align: center;
}
 
.model
{
	padding-left: 5px;
	padding-right: 5px;
	float: left;
	width: 150px;
}
 
.text
{
	display: block;
	margin: auto;
	text-align: center;
}
 
.separator
{
	clear: both;
}

C'est presque bon mais malheureusement, je n'arrive pas à "centrer" l'ensemble par rapport à la page. Je croyais que le text-aling: center; du #container serait suffisant mais mainfestement ce n'est pas le cas. Comment faut-il faire ?

Merci d'avance,

Marco85

**MasterOfChakhaL** · 19/12/2006, 17h09

re,

si c'est bien un centrage horizontal que tu souhaite, alors regarde ce point de la FAQ: Comment centrer horizontalement des éléments en CSS

[Placement] Utiliser le CSS au lieu d'un tableau

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager