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

Version imprimable

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:

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:

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

19/12/2006, 12h24
landryx
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:mouarf:
Code:

1 2 <img src="" alt="" />
19/12/2006, 12h26
MasterOfChakhaL

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

Citation:

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:

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:

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

19/12/2006, 16h09
MasterOfChakhaL

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