Une mise en page sans tableaux en 5 minutes

[Mongo Bob]

Certes, mais pourquoi passer par les styles internes plutôt que CSS directement? J'ai dû rater une marche...

Notons bien, Ymai, que les styles internes disséminés ça et là dans la page html sont bien du css pur. C'est la syntaxe et le vocabulaire css qui sont utilisés là.
C'est différent du style html :

Code : Tout sélectionner

<p face="Comic Sans MS">

style interne css :

Code : Tout sélectionner

<p style="font-family: Comic Sans MS;">

en css, les internes sont utiles pour leur prise en compte prioritaire par rapport à la feuille externe (je crois que la feuille incorporée, merci chinon, est entre les deux à ce niveau) : du coup, on peut s'en servir pour faire une modif rapide, pour tester, si on est ok sur la modif, on peut alors reporter dans la feuille externe et supprimer le style interne.

[Mongo Bob]

C'est vrai que pour un débutant toutes ces dénominations sont troublantes :

style interne
style interne exporté qui devient feuille style interne ou incorporée
feuille de style incorporée et exportée qui devient feuille de style externe, séparée, exportée, liée...

Non, Gagea, il n'ya pas de "style interne exporté qui devient feuille style interne ou incorporée", un style interne reste tel quel ou est modifié ou supprimé, l'exportation ne peut être que : incorporée vers externe.

[Gagea]

il n'ya pas de "style interne exporté qui devient feuille style interne ou incorporée", un style interne reste tel quel ou est modifié ou supprimé, l'exportation ne peut être que : incorporée vers externe.

Tu as raison : je voulais dire extrait et non exporté. Voyons si je me suis trompée encore.

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

[Mongo Bob]

Dans ton tuto, tu pourrais parler des styles internes en dernier avec ce seul avantage mis en avant :

les internes sont utiles pour leur prise en compte prioritaire par rapport à la feuille externe (je crois que la feuille incorporée, merci chinon, est entre les deux à ce niveau) : du coup, on peut s'en servir pour faire une modif rapide, pour tester, si on est ok sur la modif, on peut alors reporter dans la feuille externe et supprimer le style interne.

sinon, il est évident qu'ils ont le même défaut que les styles html d'alourdir la page, hors cette raison donc, on ne voit pas très bien pourquoi les utiliser, il ne devraient pas être mis en avant autant dans Kpz : plein de débutants les utilisent en estimant que c'est une façon de faire du css tout à fait correcte.

[chinon37]

je crois que la feuille incorporée, merci chinon, est entre les deux à ce niveau

Oui.
En fait les styles css affichés à l'écran dans le navigateur sont les derniers lus par le navigateur:
Il lit d'abord la feuille externe, puis si elle existe la feuille incorporée, puis s'il y en a, les styles internes.
L'intérêt d'un style interne, hormis l'utilisation qu'en fait Mongo Bob, est de passer outre les consignes de la feuille de style. C'est interressant pour une exception de style dans la page.
Ainsi, si tous les liens sont en bleu, mais que pour une raison lambda, on veut un lien précis écrit en rouge, on pourra mettre un style interne uniquement sur ce lien.
Le navigateur affichera tous les liens en bleu, sauf le lien ayant un style interne, puisque le navigateur interprète le style interne en dernier.

[Gagea]

Non, Gagea, il n'y a pas de "style interne exporté qui devient feuille style interne ou incorporée", un style interne reste tel quel ou est modifié ou supprimé, l'exportation ne peut être que : incorporée vers externe.

Quand c'est Chinon qui dit :

Ensuite, les styles internes sont exportés en feuille de style incorporée [à la page] par extraire et créer un style générique.

tu ne lui dis rien.
Donc un style interne peut être modifié ou supprimé ou extrait.

Pour les messages suivants de ce post, la question est de savoir si cette approche intuitive des CSS en passant par les styles internes est intéressante pour des débutants ou bien s'il vaut mieux ne pas leur en parler. Il faudrait voter... moi je n'en sais rien pour le moment.

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

[Gagea]

En fait les styles css affichés sont les derniers lus par le navigateur

Que veut dire style affiché ? affiché sur quoi ? encore un autre terme que je ne connais pas encore.

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

[Fabrice.Tres.Net]

Gagea,

Pour la mise en forme du titre de niveau h1, il n'est pas nécessaire de passer par un div puisque la balise h1 est aussi de type bloc. La suppression de la marge est directement possible.
A noter qu'on pourra mettre aussi un fond, une image au balise h1.
le parag.6 devient

6 - Mise en forme du titre h1

Si, en visualisant avec le navigateur, nous voyons un espace au dessus et au-dessous du div "header", il convient de mettre à zéro les marges haute et basse du titre h1.

* Clic dans le titre > clic droit dans le <h1> de la barre d'état > "Styles internes" > onglet "Boite"
* Spécifier des marges haute et basse de 0 pixels
* Retour à l'onglet "Général" > "Extraire et créer un style générique" > choisir "Tous les éléments" de "même type" > valider

Désormais tous les titres de niveau 1 de cette page auront une marge de 0.

Pour faciliter et encourager l'usage des css, il faudrait introduire assez tôt la notion des styles des titres. On pourrait avoir: définir la structure de sa page, puis définir une ébauche des principaux styles, par exemple juste les titres de niveau 1, 2 et 3
Cela donnerait (désolé c'est la version GB)

Peut-être que les novices accrocheraient plus facilement.
Qu'en penses-tu, Gagea, toi qui a de l'expérience?

[Fabrice.Tres.Net]

En fait les styles css affichés sont les derniers lus par le navigateur

Que veut dire style affiché ? affiché sur quoi ? encore un autre terme que je ne connais pas encore.

Chinon parle de celui qui sera affiché par le navigateur en cas de concurrence (entre les différentes définitions).

On a vu qu'il est possible d'y avoir du css a plusieurs endroits:
- fichier css (H1 en bleu)
- incorporé dans le fichier (regroupé en début de fichier) (H1 en rouge)
- associé directement à une balise donnée dans le code html (H1 en vert).

Ils sont lus dans l'ordre cité par le navigateur, et donc c'est grossièrement le dernier lu qui gagne en cas de choix différent! Les titres de niv. 1 s'afficheront en vert !

édité: en gras pour essayer d'introduire de la clarté

[Mongo Bob]

Quand c'est Chinon qui dit :
Citation:
Ensuite, les styles internes sont exportés en feuille de style incorporée [à la page] par extraire et créer un style générique.

tu ne lui dis rien. Sourire

Pas vu. Et c'est vrai que je fais peu de css par l'interface de Kpz, donc, par l'interface de celui-ci, on peut dire "extraire".

Pour les messages suivants de ce post, la question est de savoir si cette approche intuitive des CSS en passant par les styles internes est intéressante pour des débutants ou bien s'il vaut mieux ne pas leur en parler. Il faudrait voter... moi je n'en sais rien pour le moment.

Contre. J'en ai parlé mais je crois pas que ça fasse partie d'une initiation pour débutants.

Chinon parle de ce qui est affiché par le navigateur.

comprends pas, ils sont tous affichés par le navigateur! Je crois que le terme "affichés" est de trop! Au secours! C'est l'embrouille!

[GAUNCE]

Je pense qu'il voulait dire ce qui est affiché dans la partie html, car si tu ouvres ta page code tu ne vois pas les paramètres de ta(tes) feuille de style!

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

[Mongo Bob]

Y'a eu une correction depuis :

Chinon parle de celui qui sera affiché par le navigateur en cas de concurrence (entre les différentes définitions).

je dirais donc : celui auquel le navigateur donnera la préférence pour l'affichage de style : Styles internes > Feuille incorporée > Feuille externe.
(> = "plus fort que")

[Gagea]

Bonjour,
Je viens de revoir ma page avec les apports de vous tous, particulièrement de Fabrice en ce qui concerne les titres. Je ne sais d'ailleurs pas si j'ai bien compris car je suis passée directement par Cascades et non par clic droit dans la barre des taches (comme indiqué par lui).
Enfin, visionnez et donnez-moi à nouveau vos impressions.
Personnellement je trouve que, même si ce procédé intuitif n'est pas à recommander, il aide beaucoup à clarifier ces notions pour des débutants. Disons que c'est une étape dans l'apprentissage mais qu'il ne faut pas en rester là.

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

[GAUNCE]

Bonjour,
J'ai lu chez Alsa créations un article qui disait: "Pourquoi quitter les tableaux si c'est pour les remplacer par des div?" sous-entendu, c 'est la même chose en gros. Si on gére son tableau en CSS, soit une ID à table, c'est pareil?!.
Pourquoi, par exemple, ne pas mettre une ID à ul directement au lieu de créer deux div? Le but étant, au sein d'un div "page" de la remplir par les balises autres: la série des h, ul, span, p etc...plutôt qu'un empilage de div qui ressemble furieusement à un tableau avec des cellules!...

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

[Mongo Bob]

plutôt qu'un empilage de div qui ressemble furieusement à un tableau avec des cellules!...

tout à fait à 150/%!
C'est pourquoi par ailleurs, je m'insurgai contre ce tuto ici même (page 1 de ce topic) contre Kaze dont je jugeais qu'il privilégiait trop les divs :
http://www.geckozone.org/forum/viewtopi ... 432#396432
la discussion fut ardue par après, chacun tenant à son choix, mais passionnante!
Soyons clair, il ya un truc tout simple que certains oublient : n'importe quel élément de type bloc peut s'afficher comme un <div>, d'où : pourquoi autant de divs? On dirait que seuls ceux-ci peuvent s'afficher en blocs? avec bordures etc...
Je traduis (je traduis à ma manière) ce qu'explique Alsacréations sur la fameuse "divite aigüe" par : ne prenez pas un <div> là ou un <h1> (<h2>, 3, 4... 6), un <ul>, un <li>, un <p>, va s'afficher exactement pareil qu'un <div>. Le 1er truc que j'ai retenu sur le fameux tuto NVU modulaire fourni par Framasoft, est tout est bloc, et n'oublions pas que les élements non-blocs, donc "en ligne", peuvent être forcés pour être affichés en type bloc.
Onglet Boîte, Affichage, choix Bloc, En ligne ou Aucun : grâce à CSS, donc tout est possible, "les css, mangez en, c'est bon"!
De tout ça, il ressort donc : inutile de virer les tableaux pour faire des div à la place, ce qui ne veut quand même pas dire "faites parfois des tableaux" (la seule fois, c'est quand on les destine à des données cellulaires, type tableur en ligne), mais faites un <h2> ou un <p> par exemple, à la place d'un <div>, si possible.
Le <div> comme le <span> sont les seuls élements (le 1er type bloc, le 2ème type en ligne, c'est voulu) qui n'ont aucune signification, et c'est parfois très utile, tiens : le <div> pour y coller une image et la positionner mieux, par exemple ou lui donner des bordures (en strict, c'est interdit de coller une image directement dans le <body>), pourquoi faudrait-il un bloc avec une signification spéciale? C'est l'image qui a de la signification, pas ce qui la contient d'où : <div> particulièrement justifié!
Bon, je vais mater un peu mon goulasch, j'y ai collé 5 cuillerées à soupe de paprika, ben oui, mais j'aime le paprika, aussi, bon à +...