Une mise en page sans tableaux en 5 minutes

Kazé · Message par **Kazé** » 19 août 2007, 20:19

Bonjour,

pendant que je galère à compiler KompoZer 0.7.10rc6 sur ce meeeeeerveilleux OS qu'est Windows, je commence un petit how-to de la mise en page en <div>. Histoire aussi de faire suite à ce topic et celui-là.
C'est aussi une suggestion pour l'auteur de cet excellent tutoriel CSS : http://info.sio2.be/kpz/3/

(Après relecture de l'ensemble, je crois que c'est surtout une façon de passer le temps pendant les 2h que durent la compilation de KompoZer sur mon PC win32. Inutile de se sentir obligé de tout lire !)

Pour l'exemple, je suppose qu'on veut faire une mise en page classique : un en-tête, un pied de page, deux menus, une grande zone de contenu.

Lancer KompoZer (ah bon ?).
Ecrire 5 lignes :
Code : Tout sélectionner
```
Titre
Menu 1
Menu 2
Contenu
Signature
```
sans paragraphe ni mise en forme.
Cliquer sur la première ligne (Titre) et sélectionner "Conteneur générique (div)" comme format de paragraphe ; des pointillés viennent encadrer la première ligne, c'est bon signe.
Même chose sur les 4 lignes suivantes.
On peut commencer par remplir les menus. Je recommande vivement d'utiliser de simples listes de liens, qui seront très simple à mettre en forme par la suite : http://css.maxdesign.com.au/listamatic/
Là logiquement on se dit qu'il faudrait commencer à mettre ces zones de menu de part et d'autre de celle du contenu...
- Clic dans le premier menu > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Boite" (superbement nommé)
- On veut un menu secondaire de 150px de large à gauche ?
  Float : left (liste déroulante)
  Largeur : 150px
- retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "menu1" comme nom de l'élément > valider
- dans la barre d'état, on devrait lire <div id="menu1">
On réitère pour le menu secondaire :
- Clic dans le deuxième menu > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Boite"
- On veut un menu secondaire de 150px de large à droite ?
  Float : right (liste déroulante)
  Largeur : 150px
- retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "menu2" comme nom de l'élément > valider
- dans la barre d'état, on devrait lire <div id="menu2">
Ca prend forme, mais les menus empiètent sur le pied de page.
- Clic dans le pied de page > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Boite"
- Clear : both (liste déroulante)
- dans l'onglet "Fond", on peut en profiter pour choisir une jolie couleur de fond
- retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "footer" comme nom de l'élément > valider
- dans la barre d'état, on devrait lire <div id="footer">
On peut ensuite commencer à remplir la zone de contenu. On s'aperçoit que dès qu'elle est plus longue que les menus, la mise en page part en sucette.
- Clic dans la zone de contenu > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Boite"
- On spécifie des marges gauche et droite d'au moins 150px.
- retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "content" comme nom de l'élément > valider
- dans la barre d'état, on devrait lire <div id="content">
Joie, bonheur : on a une mise en page correcte sans avoir utilisé de tableaux. On ne s'arrête pas en si bon chemin, on passe à l'en-tête :
- Clic dans l'en-tête > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Fond"
- choisir une jolie couleur ou une image de fond
- retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "header" comme nom de l'élément > valider
- dans la barre d'état, on devrait lire <div id="header">
Dernière étape : centrer le conteneur principal dans la page.
- clic droit sur le <body> de la barre d'état > "Styles internes" > onglet "Boite"
- on utilisera une largeur fixe :
  largeur : 800px
  marges gauce et droite : auto (liste déroulante)
- retour à l'onglet "Général" > "Extraire et créer un style générique" > choisir l'option "tous les éléments de ce type" (oui, y'a un piège) > valider
Ayé, c'est fini. Un Ctrl+S ne peut pas faire de mal.

Un clic sur CaScadeS permet de voir la belle feuille de style interne qu'on a créée.
On peut ajouter une règle "html" pour définir une couleur de fond pour toute la page, distincte de celle du conteneur principal (body).

Vous noterez que le mod'op serait plus simple si on avait des boites de propriétés pour les conteneurs <div> dans KompoZer... vos suggestions sont les bienvenues.
Si des modos jugent utile d'agrémenter ce mini-howto de quelques copies d'écran, qu'ils ne se gênent pas surtout.

Pas de panique : la prochaine fois que je compile KompoZer sous win32, je crois que je passerai le temps avec des cocottes en papier.

Message par **Ymai** » 19 août 2007, 22:48

Kaze a écrit : C'est aussi une suggestion pour l'auteur de cet excellent tutoriel CSS : http://info.sio2.be/kpz/3/

Ayé, chuis bon pour tout refaire sur cette base-là. Mais comment il fait, mais comment il fait?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)

Message par **Ymai** » 20 août 2007, 08:57

Kaze a écrit :[*]On peut ensuite commencer à remplir la zone de contenu. On s'aperçoit que dès qu'elle est plus longue que les menus, la mise en page part en sucette.
Clic dans la zone de contenu > clic droit dans le <div> de la barre d'état > "Styles internes" > onglet "Boite"

On spécifie des marges gauche et droite d'au moins 150px.

retour à l'onglet "Général" > "Extraire et créer un style générique" > entrer "content" comme nom de l'élément > valider

Amusant, mais déroutant: quand on remplit la zone "content" à ce moment, une marge inférieure d'une centaine de px (à mon avis, moins que 150, mais c'est à vue de nez) est appliquée... sous le <div>. Ce qui fait que le <div> du pied de page descend à chaque ligne entrée dans le "content".

Mais il suffit de redimensionner la fenêtre de KpZ pour que le bloc "pied de page" remonte sagement à sa place sous le menu le plus long.

La méthode telle que décrite ci-dessus est sous quelle licence? J'ai bien envie de la reprendre "texto". C'est clair, sans fioriture, efficace. Et, en plus, avec les bordures pour délimiter les blocs, il n'y a plus d'excuse pour ne pas comprendre.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)

Message par **chinon37** » 20 août 2007, 11:17

ci dessous un aperçu de la mise en page proposée par Kaze en deux pages html :
1- sans contenu (avec ajout de couleurs pour repérer les blocs)

2- avec un peu de contenu pour se rendre compte de la mise en page finale. les seules modif de "style" sont apportées à la feuille de style css par les onglets texte, bordures et fond

Kazé · Message par **Kazé** » 20 août 2007, 11:46

Ymai a écrit :Amusant, mais déroutant: quand on remplit la zone "content" à ce moment, une marge inférieure d'une centaine de px (à mon avis, moins que 150, mais c'est à vue de nez) est appliquée... sous le <div>. Ce qui fait que le <div> du pied de page descend à chaque ligne entrée dans le "content".

J'ai repéré des choses similaires sur les menus, en utilisant des positionnement absolus. Je n'ai pas pensé à redimensionner la fenêtre, j'ai juste fait un Ctrl+S / Ctrl+R et tout était rentré dans l'ordre.
J'ai tout une collection de bugs liés au positionnement d'objets à l'écran, et qui sont hérités de Mozilla Composer. Ceci dit je n'ai pas vérifié si le bug ci-dessus était reproductible avec MC ou Nvu...

Ymai a écrit :La méthode telle que décrite ci-dessus est sous quelle licence?

Ouh là, fais-en bien ce que tu veux ! On va dire que c'est du domaine public.

Par rapport à ton tutoriel il n'y a que deux changements :

écrire les 4 ou 5 lignes avant de les transformer en <div> (l'absence de <div> conteneur rendant les choses plus faciles) ;
utiliser le bouton « Extraire et créer un style générique » devrait être plus intuitif que de créer une feuille de style de A à Z.

chinon37 > alors, as-tu essayé de définir une règle html pour avoir une couleur de fond différente de la couleur du conteneur principal (body) ?

Maintenant il va falloir que je vire le div#page de mes modèles et de ceux d'Eleanora...

Message par **chinon37** » 20 août 2007, 12:10

Voila qui est fait dans le fichier html:
une règle <html> a été ajoutée dans le css avec une couleur de fond "rose pisseux" pour bien différencier du reste.
Je n'ai pas modifié l'image d'aperçu

Mongo Bob · Message par **Mongo Bob** » 20 août 2007, 12:27

Je comprends pas pourquoi autant de <div>. Les <div> n'ont aucune signification, aucune sémantique, autant les réserver pour afficher des images décoratives en fond css, par exemple.
L'argument de Kaze sur le div conteneur (ou global) qui double le <body> est aussi illustré ici!
Ici, les div menu1 et 2 doublent des <ul><li> qui se débrouillent trés bien tous seuls! Ils ne devraient donc pas être utilisés...
Ou alors, pire, le div header remplace un <h1> dont le rôle est justement d'être un header!
Scrogneugneu!
Chaque balise utilisée dans mon lien ci-dessous est un bloc, tout comme un <div>, on voit pas donc pas pourquoi préférer ceux-ci? juste penser à ajuster les marges et paddings, éventuellement, qui sont nuls par défaut dans les <div>, par exception par rapport à l'ensemble des blocs.
Vous avez entendu parler de la divite aigüe?
J'obtiens le même résultat sémantiquement correct sans <div> :
http://jlwebnet.free.fr/menukazeJL.html
pour le choix de <p> pour les content et footer, je sais pas, comme c'est juste un squelette et qu'on sait pas ce qu'il y a dedans, faut voir avec les contenus plus tard...
<prudence>Aurais-je oublié quelquechose?</prudence>
Et ne me donnez pas l'argument que c'est plus compréhensible pour des débutants de faire des <div>(Ymai, non, pas toi!)! Ou alors, offrez-leur une licence de Frontpage, et qu'on en finisse!

<edit>j'ai recommencé avec des marges à 0, puisque je l'ai mentionné, autant le faire, augmenté les marges de #content</edit>

Kazé · Message par **Kazé** » 20 août 2007, 12:39

Mongo Bob a écrit :Ici, les div menu1 et 2 doublent des <ul><li> qui se débrouillent trés bien tous seuls! Ils ne devraient donc pas être utilisés...

On peut aussi vouloir plusieurs listes dans un même bloc 'menu', ou ajouter du texte.

Mongo Bob a écrit :Ou alors, pire, le div header remplace un <h1> dont le rôle est justement d'être un header!

La plupart du temps, une bannière c'est un titre <H1> + un sous-titre <p>

Mongo Bob a écrit :Vous avez entendu parler de la divite aigüe?

Dès qu'on veut soigner un peu la présentation, on est content de retrouver ces <div>. Pire, si tu veux faire des présentations vraiment soignées (exemple-type : des cadres aux bordures arrondies qui fonctionnent sous IE6), tu risques même de devoir rajouter des <div>.

Dis-toi bien que si ZenGarden utilise une telle cascades de blocs dans leur templates, c'est qu'il y a une raison. Là j'essaye de faire un compromis entre la simplicité et l'évolutivité. Propose donc quelques templates CSS à Eleanora ou moi-même, tu verras très vite que ces cinq <div> sont plus que nécessaires.

Mongo Bob a écrit :Et ne me donnez pas l'argument que c'est plus compréhensible pour des débutants de faire des <div> (Ymai, non, pas toi!)!

Si Ymai ne te le dit pas, moi je le fais : pour des débutants c'est plus facile d'utiliser des <div>. On les obtient depuis le menu déroulant de la barre d'outils, ils sont décrits comme « conteneurs génériques », et délimités à l'écran grâce aux pointillés rouges (ceux que tu cherches à supprimer ;-)).

Franchement, 5 <div> sous le conteneur <body>, c'est pas la mort !

Kazé · Message par **Kazé** » 20 août 2007, 12:46

Mongo Bob a écrit :pour le choix de <p> pour les content et footer, je sais pas, comme c'est juste un squelette et qu'on sait pas ce qu'il y a dedans, faut voir avec les contenus plus tard...

J'oubliais un détail important : si tu attribues un ID à un paragraphe, KompoZer va copier cette ID au prochain paragraphe créé. Oui c'est un bug, qui restera dans la 0.7.10.
Bref : les <div> c'est bon, mangez-en.

Mongo Bob · Message par **Mongo Bob** » 20 août 2007, 12:49

On peut aussi vouloir plusieurs listes dans un même bloc 'menu', ou ajouter du texte.

le <div> est justifié dans le cas de plusieurs contenus, oui ah ben, oui, mais je me suis basé strictement sur ton exemple. C'est sûr que par rapport à un développement du site ultérieur...
Ce que je veux dire, c'est que sur un modèle basique de départ, tu ne devrais pas créer autant de <div>!

La plupart du temps, une bannière c'est un titre <H1> + un sous-titre <p>

plutôt un <h1> + un <h2> pas un <p>, alors, du coup dans un <div>, oui sans doute

ZenGarden utilise une telle cascades de blocs dans leur templates

ces plaisantins sans talent?
hors gag : non pas blocs mais <div> tu veux dire...

Là j'essaye de faire un compromis entre la simplicité et l'évolutivité.

Oui...

Mongo Bob · Message par **Mongo Bob** » 20 août 2007, 12:52

J'oubliais un détail important : si tu attribues un ID à un paragraphe, KompoZer va copier cette ID au prochain paragraphe créé. Oui c'est un bug, qui restera dans la 0.7.10.

mmmhhh, jamais souffert de ça, grâce à l'emploi de l'éditeur-texte sans doute.

Bref : les <div> c'est bon, mangez-en.

les <div> c'est pas mauvais, ne vous goinfrez pas

Kazé · Message par **Kazé** » 20 août 2007, 13:07

Le but c'est justement de proposer une mise en page applicable à presque tous les sites...

Mongo Bob a écrit :
La plupart du temps, une bannière c'est un titre <H1> + un sous-titre <p>
plutôt un <h1> + un <h2> pas un <p>, alors

Non : un <h1> et un <p>. Exemple : http://kompozer.net
Les <h2> devraient servir uniquement aux titres de la zone de contenu (div#content).

Mongo Bob a écrit :
ZenGarden utilise une telle cascades de blocs dans leur templates
ces plaisantins sans talent?
hors gag : non pas blocs mais <div> tu veux dire...

Les <div> sont des blocs comme les autres...
Ils n'ont pas de signification sémantique, c'est justement là leur intérêt. La sémantique est assurée par les autres blocs.

Message par **chinon37** » 20 août 2007, 13:56

Je reste du même avis que Kaze.
Le but, si j'ai bien compris est de proposer un "bâti" qui permet de démarrer de façon simple, en utilisant les css, sans plus.
Après, au fur et à mesure des besoins et de l'acquisition des connaissances, rien n'empêche le webmaître en herbe de remplacer les div par des h, p, ou lu si ceux-ci sont plus adaptés...
D'ailleurs, c'est aussi ce que propose Alsacréations dans sa galerie de modèles.

Les <div> pourront s'appliquer à peu près partout. On ne pourra pas en dire autant des autres balises (qui ne sont pas "génériques"). L'avantage du <div>, c'est justement de n'être pas spécifique.

Après, il faut se dire: ça y est, j'ai mes div, je n'en crée pas de nouveaux, je peux me débrouiller avec les titres <hx> et les paragraphes <p>, les listes <ul> et les images <img>...

Mongo Bob · Message par **Mongo Bob** » 20 août 2007, 15:15

chinon37 a écrit :Après, au fur et à mesure des besoins et de l'acquisition des connaissances, rien n'empêche le webmaître en herbe de remplacer les div par des h, p, ou lu si ceux-ci sont plus adaptés...

vu comme ça, oui d'accord, c'était un gabarit de départ, mais est-ce que Kaze est d'accord avec toi, du coup?

Kaze a écrit :Mongo Bob a écrit:
Citation:
La plupart du temps, une bannière c'est un titre <H1> + un sous-titre <p>
plutôt un <h1> + un <h2> pas un <p>, alors
Non : un <h1> et un <p>. Exemple : http://kompozer.net

c'est marrant que tu choisisses cet exemple qui ne semble pas appuyer ta réponse : "Nvu's unofficial bug-fix release" devrait de toute évidence être un <h2>, pourquoi un <p>? A part ça, ce site est un modèle de structure, aucun <div> n'est justement utilisé là où un bloc signifiant serait préférable, il va donc dans mon sens à moi

merci pour l'exemple.
(y'a que les <dl> que je comprends pas, d'ordinaire, ils fonctionnent avec <dt> et <dd>).

Kaze a écrit :Les <h2> devraient servir uniquement aux titres de la zone de contenu

-1 je ne crois pas que leur usage soit limité à ce point.

Kaze a écrit :Les <div> sont des blocs comme les autres...

oui, ce que je tiens à appuyer, c'est que les blocs non div sont des blocs aussi bien que les div et peuvent donc remplir le rôle qu'on semble trop souvent réserver aux div.

chinon37 a écrit :Après, il faut se dire: ça y est, j'ai mes div, je n'en crée pas de nouveaux, je peux me débrouiller avec les titres <hx> et les paragraphes <p>, les listes <ul> et les images <img>...

d'accord, mais mettez au moins un <h1> à la place du <div header> dés le départ, quand même!

W3C nest pas du tout choqué, mais les moteurs de recherche et les lecteurs d'écran?
http://validator.w3.org/check?verbose=1 ... ukaze.html
ma dernière cartouche (quoique dernière...) :
http://validateur-accessibilite.apinc.o ... =Soumettre
Bon, j'ai compris que c'est un gabarit de départ qui peut servir à comprendre la mise en page, mais dés qu'on a compris ça, on vire les <div> et on applique mon modèle à moi, bien sûr?

Ca marche comme ça!

calimo · Message par **calimo** » 20 août 2007, 15:28

chinon37 a écrit :Après, il faut se dire: ça y est, j'ai mes div, je n'en crée pas de nouveaux, je peux me débrouiller avec les titres <hx> et les paragraphes <p>, les listes <ul> et les images <img>...

Je suis de l'avis de Mongo Bob, multiplier les div inutiles n'apporte pas grand chose, et on risque souvent d'oublier de mettre les balises sémantiques nécessaires vu que la mise en page est ok...
Pour moi c'est plutôt l'inverse qu'il faudrait faire : mettre les hx, les p, les ul etc., puis après se demander : où est-ce que je dois mettre un (des) div pour réaliser la mise en page que je souhaite

M'enfin, ça c'est quand on code "à la main", et peut-être une fois dans KompoZer

(ce jour là, peut-être que je me mettrai "enfin" au wysiwyg

)

Geckozone

Une mise en page sans tableaux en 5 minutes

Une mise en page sans tableaux en 5 minutes

Re: Une mise en page sans tableaux en 5 minutes

Re: Une mise en page sans tableaux en 5 minutes

Re: Une mise en page sans tableaux en 5 minutes

Qui est en ligne ?