Mise en page en css au lieu des tableaux

Version imprimable

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:

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:

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:

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.

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

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

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/
06/01/2007, 16h59
12monkeys

J'avais pas vu :oops:
Je vais de ce pas le lire.
06/01/2007, 19h09
MasterOfChakhaL

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.
07/01/2007, 01h32
12monkeys

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 :

Citation:

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 ???
08/01/2007, 09h37
MasterOfChakhaL
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:

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).
08/01/2007, 13h31
12monkeys

C'est bien ce que j'avais cru comprendre... 8-)

Je me suis mis au css pour la mise en forme, pour les grands cadres (comme tu dis : entete, menu, contenu, pied de page...) j'ai compris le principe et j'arrive à l'appliquer...

Ca se complique pour le contenu de ces grands cadres, il faut que je révise. D'ailleurs je suis en train de décortiquer une page (page d'accueil de la fnac pour ne pas la citer) pour voir un peu comment ils font (faut bien apprendre de quelque pars...). La première chose que je remarque à ce propos c'est qu'ils semblent utiliser les balises H1 à 6 et LI, UL DD, DT... pour organiser la mise en page, cela me laisse quelque peu perplexe.

Autre chose qui me parrait bizarre dans ce que je fais cette fois ci et dont j'ai déjà parlé plus haut : c'est le fait d'avoir des choses bizarres quand on sélectionne avec la souris les objets sur la page (images, texte...). Le fait d'utiliser certains "positionnements" css (comme position:absolute ou relative ou float...) influent ils sur ça ???

Merci de votre aide...
09/01/2007, 16h14
MasterOfChakhaL

Citation:

Envoyé par 12monkeys

Autre chose qui me parrait bizarre dans ce que je fais cette fois ci et dont j'ai déjà parlé plus haut : c'est le fait d'avoir des choses bizarres quand on sélectionne avec la souris les objets sur la page (images, texte...). Le fait d'utiliser certains "positionnements" css (comme position:absolute ou relative ou float...) influent ils sur ça ???

Salut,

Quand tu fais une page html sans css, la page est recu par ton navigateur qui la lit de haut en bas, dans l'ordre du source. C'est ce qu'on appelle le flux normal. Pas de problème de sélection.

Quand avec le css, tu touches aux propriétés de positionnement, tu influences ce flux.
position: static; laisse le flux inchangé, on ne le voit pas souvent car comme c'est la valeur par défaut, il n'y a pas besoin de la préciser.
position: relative; ton bloc reste dans le flux mais si tu définis top, left, bottom ou right, alors tu décales le rendu graphique par rapport à la position dans le flux normal.
position: absolute; tu sors ton bloc du flux. Tu peux également définir top, left... . La différence est que l'origine est prise par rapport au premier parent positionné (la propriété position est définie). S'il n'y en a pas, l'origine est le body. Tu peux créer des chevauchement de bloc ainsi.
position: fixed; (n'existe pas chez IE) le bloc est sorti du flux. L'origine est la fenêtre du navigateur.

Tu peux également modifié le flux en utilisant la propriété float (le bloc est décalé vers la gauche resp. droite du conteneur (float: left resp. right; ). Le reste des éléments qui sont dans le même conteneur s'écoule dans le flux normal en contournant le bloc flottant (pas de chevauchement).

Attention: sans précision particulière, la taille d'un bloc est déterminé par ce qu'il contient, les éléments qui ne sont plus dans le flux normal ne sont plus pris en compte. Pour mettre en évidence cela, tu peux faire un conteneur avec une bordure, dans ce conteneur, tu places un élément avec la propriété float et tu regardes ce qui se passe (IE ne gère pas bien les float, le résultat attendu peut être vu avec Firefox, opera ...)

Pour revenir à ta question sur les sélections bizarres, tu observes cela quand le flux est modifié