Une mise en page sans tableaux en 5 minutes

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 14:41

+1.
Sommairement, un div permet de grouper des éléments ensemble pour en faire une entité globale. Par exemple un article, c'est un titre, des sous-titres, des paragraphes (p), des images,... En groupant, tout cela je peux facilement mettre un fond commun, un cadre le délimitant,...

Mongo Bob · Message par **Mongo Bob** » 12 oct. 2008, 14:49

en effet, il est important de préciser qu'un <div> peut contenir plusieurs éléments, du coup, la sémantique nulle du <div> est encore plus justifiée : il ne signifie rien d'autre que ce que signifient les éléments qu'il contient, comme un roi qui n'a pas d'opinion propre, mais tient à maintenir l'unité de son royaume en se contentant de laisser ses sujets s'exprimer avec leurs dissensions sans prendre parti mais en leur offrant un terrain commun : les éléments contenus auront tous le même fond, par exemple! Mon goulasch!

Message par **chinon37** » 12 oct. 2008, 14:58

Tout à fait d'accord aussi.
Mais ne perdons pas de vue que "Une mise en page sans tableaux en 5 minutes" avait comme objectif premier de faire démarrer une page à des super débutants qui n'y connaissent rien. i.e. qui ne savent même pô ce qu'est une balise h1, p, etc...
Donc on part sur des blocs basiques sans signification propre...
Ensuite, on peut passer à l'épreuve de niveau 2

consistant à remplacer les div inutiles par des balises plus appropriées comme les balises titres, paragraphe ou autres...

Mongo Bob · Message par **Mongo Bob** » 12 oct. 2008, 15:10

je suis pour le fait de commencer tout de suite par les balises signifiantes, je trouve que c'est plus facile, tout le monde sait déjà ce que c'est qu'un titre principal, qu'un paragraphe etc... pour mon goulasch, c'est bon, vous inquiétez pas...

GAUNCE · Message par **GAUNCE** » 12 oct. 2008, 19:43

Bon, je vois que j'ai bien fait de lancer le sujet, mais surtout ne vous arrêtez en si bon chemin, je pense(ou j'espère que ça doit intéresser du monde!) J'en fait bien évidemment partie!.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

eda · Message par **eda** » 12 oct. 2008, 21:28

oui en effet moi aussi je suis tres interessé..
si je comprend bien le truc;dans le tuto de Kaze page une
le bloc "div" de "titre" on le ramplace par H1
le bloc "div" menu on le lesse tel quel
le bloc"div" contenu remplacé par H2
et pour le pied de page on met H3
par exemple

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)

Message par **chinon37** » 12 oct. 2008, 22:04

non, le bloc div contenu ne doit pas être remplacé par h2. Les hx sont des balises de titres.
Pour moi, le bloc contenu doit rester un div qui contiendra des h2, voir des h3 (donc des titres de niveaux 2 et 3, le niveau 1 étant l'en-tête(*)) et des p (paragraphes)
(*)Comme l'a dit Fabrice dans ce sujet ou un autre (la flemme de chercher), il est conseiller de ne mettre qu'un titre de niveau 1 (h1) par page.
Le pied de page ne devrait pas être un titre de niveau 3. Ce n'est pas un titre, mais un bloc "indépendant", donc je garderais aussi le <div>
En somme, seul le div en-tête serait changé... pas de quoi en faire un fromage !

eda · Message par **eda** » 12 oct. 2008, 22:29

ok d'ac...je commence a comprendre...j'espere que ce sujet continura a evoluer
merci encore

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)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 oct. 2008, 23:07

Pour être + précis, ce que Kaze propose dans son exemple

Titre
Menu 1
Menu 2
Contenu
Signature

peut-être interprété comme suit AMA.
La partie Titre doit plutôt être vue comme l'entête de la page qui pourrait contenir une bannière image avec éventuellement le titre de la page (en titre h1 ou non).
Le Contenu contiendra le corps de la page avec un titre, des sous-titres ( 6 niveaux possibles de h1 à h6), le texte simple est mis en paragraphe (balise <p>), des images, des listes, des données tabulaires,...

La Signature est le bas de page avec toutes les données habituelles...

GAUNCE · Message par **GAUNCE** » 13 oct. 2008, 06:21

chinon37 a écrit : En somme, seul le div en-tête serait changé... pas de quoi en faire un fromage !

Non, je pense qu'on peut mettre une id à ul, donc: ul id="menu" et c'est suffisant, ul est de type bloc...et j'allais poser la question: y at'il une autre balise pour le contenu, justement pour n'avoir aucun div dans le div page (enfin dans ce cas là).
Un contenant et des contenus, pas des div gigognes.
Dans ma page essai:
http://amichant.free.fr/archet/index1.html
j'ai essayé sans div dans le div page, j'ai même mis une class à p pour pouvoir utliser des p nus par la suite,c'est peut-être pas très orthodoxe mais le but est toujours une page sans div dans ce cas de figure!...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Message par **chinon37** » 13 oct. 2008, 07:51

Fabrice.Tres.Net a écrit : La partie Titre doit plutôt être vue comme l'entête de la page qui pourrait contenir une bannière image avec éventuellement le titre de la page (en titre h1 ou non).
Le Contenu contiendra le corps de la page avec un titre, des sous-titres ( 6 niveaux possibles de h1 à h6), le texte simple est mis en paragraphe (balise <p>), des images, des listes, des données tabulaires,...

La Signature est le bas de page avec toutes les données habituelles...

+1
Gaunce, pourquoi vouloir absolument supprimer les div?? Les div sont des conteneurs génériques qui permettent beaucoup de souplesse dans la mise en page. Il faut faire une différence entre pas de div et la divite aigue, maladie grave bien que pas contagieuse.

Mongo Bob · Message par **Mongo Bob** » 13 oct. 2008, 12:16

on va quand même pas prendre un <div> pour y coller un menu quand un <ul> avec ses <li> stylé correctement par id ou class remplit exactement le même rôle que le <div>, non?
C'est de la divite!!! Y'a pas de quoi en faire un fromage, quand même

!

Perusse · Message par **Perusse** » 13 oct. 2008, 18:25

Bon... Je suis rendu la !

Kaze a écrit : [*]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.

Donc pas très loin mais je comprend pas...impossible de cliquer sur titre !! La seul chose que je peu faire si je clique c'est de copier/coller etc.

quelqu'un peut m'aider ??

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; fr) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.22

Gagea · Message par **Gagea** » 13 oct. 2008, 18:43

Il s'agit simplement que le pointeur de ta souris se trouve dans le mot Titre. Il ne se passe rien mais le div va se faire à cet endroit.
Tu ouvres le premier menu déroulant "Choisir un format de paragraphe" et tout en bas tu cliques sur Conteneur Générique (div)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Perusse · Message par **Perusse** » 13 oct. 2008, 19:00

merci !

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; fr) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.22

Geckozone

Une mise en page sans tableaux en 5 minutes

Re: Une mise en page sans tableaux en 5 minutes

Qui est en ligne ?