Une mise en page sans tableaux en 5 minutes

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

calimo a écrit :Je suis de l'avis de Mongo Bob,

ben enfin, calimo, qu'est-ce qui te prend? D'accord avec moi? Mais ça remet en question tout mon fragile univers intérieur, ça? C'est les vacances qui t'ont radouci?
merci en tout cas

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

Mongo Bob a écrit :
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.

C'est une simple question de hiérarchie dans ta page : <h1> c'est le titre principal (l'en-tête généralement), <h2> sont les titres principaux du contenu, <h3> les sous-titres du contenu, etc.
Imagine-toi faire un sommaire dans ton traitement de texte favori : c'est pareil.

calimo a écrit :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

Bah oui mais le topic concerne la mise en page justement...

L'idée c'est de faire partir les débutants sur une structure HTML simple, pour qu'ils puissent modifier la mise en page comme bon leur semble sans toucher au HTML.
Si on remplace div#header par h1, la plupart ne sauront pas comment ajouter un sous-titre dans la bannière. Si on remplace div#menu1 par ul#menu1, ça va être difficile d'ajouter des éléments comme les validateurs HTML/CSS dans la barre latérale. Etc, etc...

C'est une discussion qu'on a déjà eue : http://www.geckozone.org/forum/viewtopic.php?t=44368

Pour l'instant, au moins 80% des utilisateurs de KompoZer font leur mise en page avec des tableaux. Y compris la plupart des modos des forums de support. Donc plutôt que d'utiliser une structure 100% sémantiquement correcte qui soit difficile à faire évoluer, je préfère proposer une structure simple facilement réutilisable. La sémantique c'est un autre débat, et je ne crois pas que cinq <div> pour délimiter les cinq principales sections surchargent tellement le code.

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

On a vu 2 méthodes parfaitement différentes d'aborder html/css avec des débutants, à mon avis, autant leur apprendre à recourir au <div> en 2ème lieu, mais c'est plus difficile comme démarrage en effet.

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

Je n'ai pas compris ton dernier post. De quelles méthodes « parfaitement différentes » parles-tu ?

Mongo Bob a écrit :
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.

La page d'accueil de KompoZer est basée strictement sur le modéle que je propose ici : cinq <div> sous <body>.
Content que ça te plaise !

Si je mettais "Nvu's unofficial bug-fix release" dans un <h2>, ce bête slogan serait au même niveau que les titres principaux de la page (Licence, Progress, Download ***). Ce qui me semble être une erreur grossière, du point de vue "sommaire".

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

Kaze a écrit :De quelles méthodes « parfaitement différentes » parles-tu ?

la tienne qui démarre avec des <div> et la mienne sans!

Kaze a écrit :La page d'accueil de KompoZer est basée strictement sur le modéle que je propose ici : cinq <div> sous <body>. La page d'accueil de KompoZer est basée strictement sur le modéle que je propose ici : cinq <div> sous <body>.

il me semble qu'elle est plus structurée, non? j'ai jamais dit pas de <div>, j'ai dit pas de <div> inutiles! Tu n'as pas <div header> à la place d'un <h1>, sur Kompozer.net quand même!

Kaze a écrit :ce bête slogan serait au même niveau que les titres principaux de la page (Licence, Progress, Download ***). Ce qui me semble être une erreur grossière, du point de vue "sommaire".

il te vient pas à l'idée que tu peux décaler? Ca va jusqu'à <h6>!
Ecoute, j'ai compris que tu tiens à tes <div>, tu me permettras de suivre ma manière de faire? A+

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

Fatigué là. Je dois attacher trop d'importance aux mise en page de débutants.
----> []

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

tu te méprends, peut-être. Je ne dis pas que ta méthode est pourrave, mais à charge, comme l'indiquait chinon37, de remettre en question ces <div> auprès des débs, une fois que grâce à ce départ, ils ont bien compris les pbs de mise en page, et qu'ils injectent donc la sémantique nécessaire.
Mais déjà, je n'avais pas compris au départ, que tu t'adressais spécialement à des débs.
Tu dois reconnaître l'intérêt d'une méthode qui démarre avec la sémantique puis fignole avec les<div> éventuels, je crois que c'est plus ardu, disons plus lent, comme démarrage... (même si tu préfères ta méthode).

Par ailleurs, sur Kpz.net, l'attribut "lang" avec la valeur "en" devrait être accolée à <html> puisque le site est en langue anglaise :

Code : Tout sélectionner

<html lang="en">
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <link rel="shortcut icon" href="favicon.ico">
    <title>KompoZer - Nvu's unofficial bug-fix release</title>
    <style type="text/css">
    body {
      margin: 0;.....................................................;

sinon :
http://validateur-accessibilite.apinc.o ... =Soumettre

à plus...

Message par **chinon37** » 20 août 2007, 16:41

Plus têtu que Mongo Bob, tu meurs !

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

oh! c'est trop gentil, vraiment!

zeb71 · Message par **zeb71** » 28 août 2007, 22:51

Avant la lecture de ce tuto, je faisait toutes mes mises en pages avec des tableaux;et ce n'est pas par manque de doc :
j'en ai lu des truc sur le css et les div et tout le bazard pour faire des menus.

mais a chaque fois, je ne sais pas pourquoi je ne franchissait pas le pas. trop compliqué? pas persuasif? manque de temps a investir pour apprendre la méthode? je ne sais pas.

mais la, je me lance et en 5 min a peine, me voila avec une mise en page d'enfer. depuis je refais tous mes sites, je me suis plongé dans les div, les box, les feuilles de style etc ...me voila convaincu et d'un coup les autres tutoriels me paraissent plus simple : une vraie révélation.

alors on peut toujours chipoter sur l'orthodoxie de tel ou tel choix, moi ce que je vois, c'est que ce tuto et un monstre de persuasion!
Chapoba !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

eda · Message par **eda** » 04 oct. 2008, 15:17

salut a tous
j'ai suivi le tuto de kaze(d'ailleur il est tres bien)
j'ai tout fait en bonne et du forme mais une fois enregistrer j'ai voulu mettre une image ke j'ai créer sous gimp portant le nom de mon site en fond(en transparence) pour le div"id titre"et donc remplacer le fond gris mais cela ne fontionne pas.
qq1 peut il m'aidé svp

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SIMBAR={CFDD86C2-882A-4CEE-BAA2-6DCB70F310C7}; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)

Mongo Bob · Message par **Mongo Bob** » 04 oct. 2008, 15:26

zeb71 a écrit :alors on peut toujours chipoter sur l'orthodoxie de tel ou tel choix

"chipoter" est un terme péjoratif pour "creuser un sujet", or, creuser un sujet mène toujours à des résultats gratifiants, et je maintiens que les <div> sont trop privilégiés dans ce tuto, ce qui mène à des résultats qui négligent un peu l'accessibilité. Disons que ce tuto est une initiation, mais il faut évoluer, après.
>eda : peux-tu nous transmettre ton code ici qu'on comprenne ce que tu veux dire? (ou donner l'url de la page en ligne?)

eda · Message par **eda** » 04 oct. 2008, 15:50

voici le code mais il est un peut long

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>présentation</title><script
 language="JavaScript">
<!-- Ce script et d'autres sont sur le site gratuit -->
<!-- Code JavaScript !! http://codejava.info -->
<!-- Begin
var Today=new Date();
var ThisDay=Today.getDay();
var ThisDate=Today.getDate();
var ThisMonth=Today.getMonth()+1;
var ThisYear=Today.getFullYear(); // si vous voulez ajouter l'annee
function DayTxt (DayNumber) {
var Day=new Array();
Day[0]="Dimanche";
Day[1]="Lundi";
Day[2]="Mardi";
Day[3]="Mercredi";
Day[4]="Jeudi";
Day[5]="Vendredi";
Day[6]="Samedi";
return Day[DayNumber];
}
var DayName=DayTxt(ThisDay);
function MonthTxt (MonthNumber) {
var Month=new Array();
Month[1]="Janvier";
Month[2]="Febrier";
Month[3]="Mars";
Month[4]="Avril";
Month[5]="Mai";
Month[6]="Juin";
Month[7]="Juillet";
Month[8]="Aout";
Month[9]="Septembre";
Month[10]="Octobre";
Month[11]="Novembre";
Month[12]="Decembre";
return Month[MonthNumber];
}
var MonthName=MonthTxt(ThisMonth);
var d = new Date();
var h = d.getHours();
document.write("<TABLE BORDER=3 BGCOLOR=#CC0000 WIDTH=75 HEIGHT=85 align=right>"+"<TD>"+"<p align=center>"+"<font size=2 >"+DayName+"<br>"+"<font color=#000099 size=+3 >"+ThisDate+"</font>"+"<br>"+MonthName+"<br>"+"</b>"+"</font>"+"</p>"+"</TD>"+"</TR>"+"</TABLE><br><br><br><br><br>");
// End --</script>
<style type="text/css">
*#Menu {
width: 150px;
float: left;
}
*#signature {
clear: both;
}
body {
background-image: url(../Mes%20images/Paris%20Ground%20Zero.jpg);
background-position: center center;
background-repeat: no-repeat;
width: 800px;
position: fixed;
margin-right: auto;
margin-left: auto;
}
*#header {
  border-style: groove;
  background-color: #cccccc;
  text-align: center;
}</style></head><body
 style="position: fixed; width: 800px; margin-right: auto; margin-left: auto;"><div
 id="header">Réaléco</div><div
 style="border-style: groove; background-color: rgb(255, 255, 204); text-align: center; width: 150px; float: left;"
 id="Menu"><span style="text-decoration: underline;">Menu</span><br><a
 href="presentation.html">presentation</a><br><a
 href="video.html">Vidéo</a><br><a
 href="photos.html">Photos</a><br><a
 href="parlon.html">parlons
en</a><br><a href="contact.html">contact</a></div><div
 style="border-style: groove; text-align: center; margin-right: 150px; margin-left: 150px;"><big><span
 style="text-decoration: underline;">Contenu</span><br>Sur
ce site il y a des photos et une vidéo qui ne me laisse pas
indiférent...<br>A vous de juger si ça vous touche ou non...<br>Dans
"parlons en",je dirai ce que je pense de certain organisme...<br>Si
vous avez des remarques a faire ou si vous avez aimé visiter le site ou
d'autre commentaire à faire cliquer sur "contact"<br>Attention<br>Ce
site a pour but de sensibilisé les personnes<br>et non à nuir à
des
entreprises;assocition;etc...<br>ni au gouvernement.</big></div><div
 style="border-style: groove; background-color: rgb(204, 204, 204); text-align: center; clear: both;"
 id="signature">Signature| idoo.com |&nbsp; | <a
 title="Document made with KompoZer" href="http://kompozer.net/"><img
 alt="Document made with KompoZer"
 src="http://kompozer.sourceforge.net/images/kompozer_80x15.png"
 border="0"></a></div></body></html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SIMBAR={CFDD86C2-882A-4CEE-BAA2-6DCB70F310C7}; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)

eda · Message par **eda** » 04 oct. 2008, 16:13

ça donne ça
http://i46.servimg.com/u/f46/11/36/82/68/sans_t10.jpg
ou

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SIMBAR={CFDD86C2-882A-4CEE-BAA2-6DCB70F310C7}; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)

jpbardiau · Message par **jpbardiau** » 04 oct. 2008, 17:57

eda a écrit :voici le code mais il est un peut long

Raison de plus pour le mettre entre balises

Code : Tout sélectionner


[size=75]Message envoyé avec : [color=olive]Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008092416 Firefox/3.0.3[/color][/size]

Geckozone

Une mise en page sans tableaux en 5 minutes

plus qu'un simple tuto

Qui est en ligne ?