Mise en page en css au lieu des tableaux

**12monkeys** · 06/01/2007, 15h11

Bonjour,

Comme dit je me met à la mise en page grace au css au lieu des tableaux. Cela ne me parrait pas simple...
Une première question : "quand est ce qu'on utilise la mise en page css et la mise en page tableaux..." naturellement j'ai lu des choses là dessus mais je n'y ait rien compris !!!

Ensuite j'ai commencé par une page, exemple :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Index - css</TITLE>
 
<META http-equiv="Content-Style-Type" content="text/css">
 
<STYLE type="text/css">
 
voir ci dessous
 
</STYLE>
 
</HEAD>
 
<BODY>
 
<DIV id="centrer">
 
  <DIV class="borda1"></DIV>
  <DIV class="borda2"></DIV>
  <DIV class="borda3"></DIV>
  <DIV class="bordb1"></DIV>
 
  <DIV class="contenu">
 
    <DIV class="image1">
      <IMG src="im/singes.gif" height="300" width="223" border="0" alt="">
    </DIV>
 
    <DIV class="texte">
Texte 1
<BR>
- Texte 2.
<BR>
- Texte 3.
<BR>
- Texte 4.
<BR>
- Texte 5.
    </DIV>
 
  </DIV>
 
  <DIV class="bordb2"></DIV>
  <DIV class="bordc1"></DIV>
  <DIV class="bordc2"></DIV>
  <DIV class="bordc3"></DIV>
 
</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
 
Alternative 1 :
BODY { margin:0px;padding:0px;background-color:black;text-align:center }/*pour centrer*/
#centrer { margin:0px;margin-left:auto;margin-right:auto;width:1000px;text-align:left }/*pour centrer*/
.borda1 { width:43px;height:43px;position:absolute;left:0px;top:0px;background-image:url("im/bord/a1.jpg") }
.borda2 { width:914px;height:43px;position:absolute;left:43px;top:0px;background-image:url("im/bord/a2.jpg") }
.borda3 { width:43px;height:43px;position:absolute;left:957px;top:0px;background-image:url("im/bord/a3.jpg") }
.bordb1 { width:43px;height:509px;position:absolute;left:0px;top:43px;background-image:url("im/bord/b1.jpg") }
.bordb2 { width:43px;height:509px;position:absolute;left:957px;top:43px;background-image:url("im/bord/b2.jpg") }
.bordc1 { width:43px;height:43px;position:absolute;left:0px;top:552px;background-image:url("im/bord/c1.jpg") }
.bordc2 { width:914px;height:43px;position:absolute;left:43px;top:552px;background-image:url("im/bord/c2.jpg") }
.bordc3 { width:43px;height:43px;position:absolute;left:957px;top:552px;background-image:url("im/bord/c3.jpg") }
.contenu { position:absolute;left:43px;top:43px;width:914px;height:509px;background-image:url("im/singefond.gif") }
.image1 { position:absolute;left:345px;top:30px;width:223px }
.texte { position:absolute;width:614px;left:150px;top:340px;font-size:0.7em;color:white }

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
 
Alterative 2
.borda1 { width:43px;height:43px;float:left;background-image:url("im/bord/a1.jpg") }
.borda2 { width:914px;height:43px;float:left;background-image:url("im/bord/a2.jpg") }
.borda3 { width:43px;height:43px;float:left;background-image:url("im/bord/a3.jpg") }
.bordb1 { width:43px;height:509px;float:left;background-image:url("im/bord/b1.jpg") }
.bordb2 { width:43px;height:509px;float:right;background-image:url("im/bord/b2.jpg") }
.bordc1 { width:43px;height:43px;position:absolute;left:0px;top:552px;background-image:url("im/bord/c1.jpg") }
.bordc2 { width:914px;height:43px;position:absolute;left:43px;top:552px;background-image:url("im/bord/c2.jpg") }
.bordc3 { width:43px;height:43px;position:absolute;left:957px;top:552px;background-image:url("im/bord/c3.jpg") }

Qu'en pensez vous ???
Pour l'alternative 1 l'affichage se fait correctement mais sous IE 6 la sélection du texte et de l'image se font bizarrement (impossible de sélectionner tout le texte)... Ce qui ne parrait pas être le cas sous FF.
Pour l'alternative 2 ce n'est pas le cas.

Merci de votre aide.

**Bisûnûrs** · 06/01/2007, 15h47

Tu peux aussi lire les cours prévus à cet effet :

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**12monkeys** · 06/01/2007, 16h59

J'avais pas vu

Je vais de ce pas le lire.

**MasterOfChakhaL** · 06/01/2007, 19h09

en fait, je pense qu'il est un peu impropre d'opposer mise en page tableau et mise en page css.

Le css est une technologie qui permet de définir une mise en forme en dehors du code html.
Le tableau est un élément html que l'on peut tout a fait utiliser, par exemple, si tu veux représenter un tableau (de données par exemple), quoi de mieux qu'un tableau. Tu peux également utiliser des propriétés css sur le tableau qui te permettront de l'habiller et d'en faire quelque chose de vraiment beau.

Ce que tu as du lire, je pense, te disais certainement qu'il ne fallait pas utiliser des tableaux pour la mise en page (pour placer une entête ou une colonne sur la gauche par exemple) car lorsque l'on fait ca on le détourne de son usage.

En gros, il ne faut pas comrendre "oubliez les tableaux" mais plutot "utilisez vos tableaux pour faire des tableaux".
Et le css dans tout ca? et bien il habille le html. Le css gère l'esthétique alors que le html permet de structurer ton document en fonction du sens de ce que tu écris (entre les balises, ton texte lisible). Sens <=> Sémantique. Je suppose que c'est un mot que tu as du voir passer dans tes lectures.

J'espère que ce que j'écris ne t'embrouilleras pas plus, ce n'étais vraiment pas le but.
Si tu as besoin de précision, n'hésite pas à ouvrir un nouveau post. Ca permettra de récolter d'autres avis que le mien.

Le tuto que t'as indiqué Bisûrnûs est très bien je trouve pour commencer à comprendre les grandes lignes de comment on met en page un document html avec css. Si tu comprends bien tout, ca sera un très bon début.

**12monkeys** · 07/01/2007, 01h32

Merci de votre aide

Finalement le tuto je l'avais déjà vu, mais je l'ai réétudié attentivement, ça ne fais pas de mal...

@ MasterOfChakhaL :

Je n'oppose pas mise en page css et mise en page html, mais je dois avouer que j'ai du mal à comprendre quand utiliser l'un et l'autre...

Ce que tu dis :

Ce que tu as du lire te disais certainement qu'il ne fallait pas utiliser des tableaux pour la mise en page

c'est bien ce que j'ai lu et c'est bien ça que je n'ai pas compris.

Ton explication me fait un peu mieux comprendre les choses : les grandes structures : css et div ; et si le texte est structuré en colonnes alors utiliser des tableaux html. C'est ça ?

En ce qui concerne la mise en forme en css, j'ai bien compris le tuto, mais ensuite c'est la mise en oeuvre concrète qui est difficile... Je vais m'exercer.
Pour ce qui est de mon exemple, si j'ai bien compris vaut mieux utiliser float que position:absolute ???

**MasterOfChakhaL** · 08/01/2007, 09h37

C'est pas tout à fait ce que je voulais dire,

En parlant de tableau, je pense plutot à des données qui se définissent par leur colonne et leur ligne. Et ceci en dehors de toute considération de mise en page. Comme cela

Code x :

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

1
2
3
4
5
6
   | A | B | C | D
---+---+---+---+---
 1 | a | r | e | u
---+---+---+---+---
 2 | # | ( | § | {

Si tu fais une liste de clients pour lesquels tu dois indiquer le nom, le prénom, une adresse... Tu feras certainement un tableau de manière naturelle et tu n'auras pas tort.

En dehors de ce genre d'utilisation il ne faut pas utiliser de <table>.

De manière idéale, ton code html doit être totalement indépendant du résultat visuel que tu souhaites obtenir. Les div vont te permettre de diviser ton document en grande section. Par exemple: entete, menu, contenu, pied de page (pour faire original).
Ensuite le css te permet de gérer l'aspect visuel. Tu peux, notamment définir le positionnement et la taille de ces sections (pourquoi pas en colonne).

Mise en page en css au lieu des tableaux

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager