CSS : Boites css VS Table

**kilian** · 27/10/2009, 08h40

Bonjour,

Etant assez débutant dans le Css je me demande si je veux me mettre en CSS est ce que je dois m'obstiner à faire que du CSS, convertir tous mes tables en CSS.

Par exemple je souhaite faire une boite de ce type,

Que feriez vous à ma place ? Pour moi c'est tellement plus facile de faire cela en table.
Mais je souhaite vraiment me mettre en CSS.

Je vous remercie pour vos conseils.
Cordialement

**Dionyzos** · 27/10/2009, 11h27

Bonjour,

Si tu veux vraiment te mettre au site full CSS, il va en effet falloir faire un minimum d’effort car certaines techniques ne sont pas évidentes à manipuler pour un débutant, comme par exemple les boîtes flottantes.

Effectivement c’est beaucoup plus facile de structurer un site entièrement à l’aide de TABLE, mais d’une part ce n’est pas valide au niveau W3C, mais surtout ca ne te permet pas une souplesse de manipulation des blocs via le CSS.

Par exemple si un jour tu décides de changer l’emplacement ou l’aspect du bloc "Photo", tu ne pourras pas le faire avec un TABLE, à moins de complètement refaire ton code HTML. Alors que s’il s’agit d’un DIV, tu peux le faire uniquement en CSS. Voir même faire plusieurs CSS pour un seul HTML

Bon, voilà pour le "pourquoi du comment"

Maintenant, si tu veux vraiment faire un site 100% "propre", il ne suffit pas de virer les TABLE pour mettre des DIV et de déclarer tout le style en CSS. Il faut également coder ta partie HTML en strict si tu veux que tous les navigateurs (y compris IE) respectent au plus près le standard W3C.

Pour cela, il est impératif de déclarer le bon DOCTYPE :

Code :

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

1
2
3
<!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">

Ensuite, une balise importante à placer dans la HEAD pour que IE 8 soit le plus respectueux possible du standard :

Code :

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

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Après c’est du "jonglage" CSS à base de class et id pour placer les différents blocs.

Voici un exemple de code pour obtenir ce que tu veux en xHTML/CSS :

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
<!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>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>test</title>
<style type="text/css">
    DIV#container {
        width: 500px;
        float: left;
        border: 1px black solid;
    }
    DIV#container DIV {
        margin: 2px;
        float: left;
        font-family: arial;
        font-weight: bold;
        font-size: 14px;
        font-style: italic;
        padding: 10px;
    }
    DIV#photo {
        color: red;
        border: 1px red solid;
        width: 224px;
        height: 100px;
    }
    DIV#text1 {
        color: green;
        border: 1px green solid;
        width: 224px;
        height: 100px;
    }
    DIV#text2 {
        color: blue;
        border: 1px blue solid;
        clear: both;
        height: 100px;
        width: 474px;
    }
    DIV#text3 {
        color: brown;
        border: 1px brown solid;
        clear: both;
        height: 100px;
        width: 474px;
    }
</style>
</head>
<body>
 
<div id="container">
    <div id="photo">Photo</div>
    <div id="text1">Texte</div>
    <div id="text2">Texte</div>
    <div id="text3">Texte</div>
</div>
 
</body>
</html>

Si tu veux plus d’info sur le sujet et progresser, je te conseille de lire les 15 articles intitulés CSS : on reprend tout à zéro !

Si tu veux un apercu de la puissance du CSS, voici un site qui l'illustre parfaitement : Jardin Zen css: La beauté de la conception CSS. Il s'agit d'un site qui applique des centaines de CSS sur un seul et même code HTML.

Voilà, j’espère avoir répondu à ta demande

**kilian** · 27/10/2009, 12h39

Vraiment merci Dionyzos, si tu habites dans le coin de Strasbourg je te paie une bière.

Je connais plus ou moins les sites que tu me proposes. J'ai déjà regardé un peu le site Jardin Zen. J'ai déjà vu des exemples, j'ai pris exemple sur cela...
Mais il faut encore et toujours, car pour l'instant, le css pour moi n'est pas automatique, si je lis un CSS je le comprends souvent ( encore que parfois il faut que je cherche l'action exact de certain paramètre ).

tu es

Je vais m'aider de ce que tu m'as proposé.

A bientôt
Cordialement

CSS : Boites css VS Table

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager