Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
24 septembre 2007 1 24 /09 /septembre /2007 01:00

détail du 'Dragon' de Max Escher

Voilà bien LE papier emm… à écrire, parce qu'il n'y a aucune invention. Mais …

De quoi on va causer ?

Mais, lorsqu'on a soigné le choix des polices de caractères, des motifs décoratifs, des couleurs, des marges, etc. on peut vouloir ajuster finement la disposition de ses pages de blogs. La plate-forme OverBlog, si elle permet vraiment beaucoup de choses, ne peut pas tout prévoir et il faut bien alors s'instruire sérieusement sur HTML et CSS : pas tant l'art et la manière d'en écrire que les principes qui sont derrière.

Au fait,  ajuster finement la disposition  ça veut dire quoi ?

  • Des choses spectaculaires comme l'ajout d'un menu déroulant – grand classique de l'arrachage de cheveux pour lequel vous trouverez de nombreuses solutions dont aucune n'est idéale (la mienne encore moins que d'autres).
  • Des choses discrètes comme faire en sorte que les articles soient toujours à la même hauteur dans l'écran, qu'il y ait ou non une pagination (c'était le cas ici jusqu'à peu de temps).
  • Des choses un peu moins discrètes comme de faire apparaître un logo sur le côté gauche de toutes les pages, en dehors des colonnes de modules.
  • (liste non exhaustive)

Toutes ces questions de géométrie d'une page demandent de bien comprendre le jeu des margin et padding (ça, on connaît – ah ouais ?), mais aussi des float (légère pâleur), des position : relative ou position : absolute (pâleur intense), voire de overflow ou z-index (syncope).

Comment on va s'y prendre ?

Ceci n'est pas un recueil de recettes ou d'astuces. Bien qu'il y soit souvent question d'OverBlog (la plateforme où réside le blog que vous êtes en train de lire), bien que les exemples y fassent souvent référence, la matière de ces articles n'est pas spécifique à OverBlog, n'est même pas propre aux blogs. Il ne s'agit que d'expliquer (d'essayer, au moins) certaines questions générales de disposition d'une page HTML sur un écran.

L'itinéraire

Vous allez en prendre pour neuf (vi, vi : neuf) articles :

  1. Entrée en matière
    Vous y êtes. De quoi il sera question, quelques idées, un peu de vocabulaire utile pour la suite.
  2. Les boîtes
    Du groupe de mots jusqu'à la mosaïque d'images, tout ce qu'il y a dans une page s'organise en pavés rectangulaires : les  boîtes . Revue de la question.
  3. Inline et block
    Distinction apparemment ésotérique mais fondamentale (émf) pour la suite
  4. Flux, float, position
    Explication de la notion de flux, elle aussi émf, premier aperçu des propriétés float et position.
  5. Flottants : la théorie
    La prise de tête commence…
  6. Flottants : la pratique
    Quelques exemples et contre-exemples, espérés utiles.
  7. Dimensions et débordement
    Width, height et overflow. Le bloc conteneur, encore une notion émf.
  8. Le positionnement absolu
    Moins compliqué qu'on ne croirait.
  9. Empilement vertical
    z-index

Chaque article ou presque comporte au moins une démonstration animée (JavaScript activé dans votre navigateur, please) pour illustrer le propos parfois ardu. Prenez le temps de jouer avec ces démos, elles ont leur importance : cinq minutes de pratique clarifient bien des discours.

Malgré le ton détendu et les jeux de mots déplorables, je me suis efforcé de ne pas écrire n'importe quoi ni n'importe comment. L'idée de ces articles est née de conversations avec des bloggeurs dans la panade, à la recherche de l'astuce miraculeuse qui ferait marcher une recette soufflée par d'autres. En renonçant à la magie noire, en comprenant (ce qui demande un effort) ce que faisait la recette miraculeuse, autrement dit ce que font HTML et CSS, la solution venait d'elle-même. Puissent ces articles vous en apporter autant.

Les textes sacrés

Bon, vous allez voir qu'on peut survivre …  Aucune invention , avais-je annoncé : ces articles ne sont qu'une paraphrase de certains chapitres de la spécification CSS2 du W3C, seulement réordonnée à mon idée et enrichie d'exemples OverBlog et de démonstrations.

Vous avez dit  spécification  ? Une spécification est un document destiné aux développeurs de logiciel. Ce n'est, au départ, ni un tutoriel, ni un manuel de référence, mais ce que devrait savoir faire un navigateur, autrement dit un cahier des charges. Une spécification est donc le plus souvent un document technique, très précis, très complet, très illisible : en comparaison, Kant et Spinoza sont des auteurs frivoles.

Cependant, et faute de véritables documents de référence pour le grand public, les spécifs W3C ont fini par en tenir lieu et ont bénéficié d'un vrai effort de rédaction : ce sont des documents bien construits et accessibles au lecteur attentif et intelligent (vous, par exemple). Essayez, vous serez surpris.

L'auteur est prudent

Dernier point : ce papier et les suivants, comme tous les autres, se contentent d'expliquer ce que j'ai compris, les questions que je me suis posées, celles qu'on m'a parfois posées. Je ne suis agrégé de rien du tout, il peut y avoir des oublis ou des obscurités, voire des erreurs (horreur !) dans ce que j'écris. Je vous serai sincèrement reconnaissant de me les signaler en commentaire.

Allez, on plonge

Une page HTML, c'est joli. Avec un petit effort de CSS, c'est encore plus joli. M'enfin, il faut bien soulever le capot une fois dans sa vie pour y comprendre quelque chose : même le plus inspiré des peintres doit apprendre à tenir correctement un pinceau. Sans être indispensable, ça aide.

HTML : komanséfoutu ?

Donc, quand on regarde une page HTML (le code source d'une page de blog, par exemple) on découvre un apparent fouillis de balises. Très vite (non ?) on comprend que ce fouillis est organisé : les balises définissent des blocs, emboîtés les uns dans les autres. Toute la page rentre dans un très gros bloc html, qui en contient deux autres head et body. Le bloc head est une série d'indications techniques, nous ne regarderons dans la suite que body qui contient ce qui s'affichera à l'écran, le  corps  du document (body = corps, c'est pensé, non ?).

Un corps de document peut être très simple, sans aucune balise, mais c'est rare. Le plus souvent, il se divise en blocs qui à leur tour se divisent en sous-blocs qui à leur tour … Bref, ce machin est organisé de façon arborescente.

Arborescence : gné ?

Pas de panique, vous en manipulez une tous les jours : votre disque dur, c'est exactement pareil :

  • tout fichier ( document  ou programme) se trouve dans un dossier et un seul,
  • un dossier peut contenir zéro, un ou plusieurs sous-dossiers mais un dossier donné est inclus dans un seul  sur-dossier ,
  • tous les dossiers, de proche en proche, finissent par être inclus dans un seul et même  ancêtre , le répertoire  racine  (toujours la végétation …) du disque dur, lequel répertoire racine n'est inclus dans aucun autre, d'où son nom,
  • enfin, les fichiers ne peuvent pas contenir de sous-dossiers : ils sont les terminaisons de l'arbre, ses  feuilles , alors que les dossiers en sont les  nœuds .

Hé bien une page HTML, c'est un peu pareil. Application au blog que vous lisez : sans descendre dans les détails les plus fins, la page sous vos yeux est organisée ainsi :

 body--+--global--+--ln_0 (bandeau supérieur) I +--ln_1--+--cl_1_0--+-- (les articles) I I +--cl_1_1--+--box categorie I I +--box calendrier I I +--box articlerecent I I +-- (les autres modules) I I--ln_2 (bandeau inférieur) I +--legals 

Deux parties dans body : le corps du blog,  global , puis le bandeau de mentions légales,  legals . À son tour le corps de blog se divise en trois lignes (ln_0, ln_1 et ln_2), la ligne du milieu se subdivisant en deux cellules, l'une pour les articles (cl_1_0) l'autre pour les modules (cl_1_1) – c'est à peu près pareil sur tous les blogs OB.

Les feuilles de l'arbre sont les bouts de texte, plus ou moins longs, qui composent la page. Un simple span n'est pas encore une feuille : c'est le texte du span qui est la feuille.

En plus des notions de  nœud  et de  feuille  (ou  nœud terminal ), on parle de  parent , d'  enfant  et de  frères  : global est le parent de ln_0, ln_1 et ln_2 qui sont ses enfants et frères entre eux. On parle aussi d'  ascendant  (ou  ancêtre ) et de  descendant  : global est un ascendant de ln_1, mais aussi de cl_1_0, cl_1_1, et tous les modules. Retournez la phrase pour savoir ce qu'est un descendant – le cas des cousins à la mode de Bretagne n'est pas couvert.

Arborescence : akwabon ?

Simple et imagé mais, au-delà du plaisir de s'instruire, à quoi ça sert ?

Les relations de  parenté  au sein de l'arbre déterminent un tas de choses. Il vous semble parfaitement normal qu'une police de caractères attribuée au body soit la même pour tout ce qui s'y trouve (sauf mention explicite du contraire), or il pourrait en aller autrement et que la police de  global  et toute sa descendance soit celle choisie par défaut par le navigateur. Ce mécanisme de transmission d'information s'appelle, sans surprise,  héritage  …

Pour les questions de mise en page qui vont nous occuper ici, le parent sert de référence, de  port d'attache  à l'enfant pour toute sa géométrie. Une observation simple pour le sentir : il vous semble parfaitement normal que, à l'affichage, ln_0, ln_1 et ln_2 soient  dans  global (sauf manœuvre tordue) et ne se chevauchent pas (sauf autre manœuvre tordue). Pourtant il serait aussi  naturel  et légitime de les disposer comme sur la figure …

Où l'on voit enfin le CSS

Et le CSS, dans tout ça ?

Le CSS modifie, de façon parfois spectaculaire, la présentation et l'organisation spatiale du document : c'est ainsi que la colonne de modules cl_1_1 se trouve à droite de cl_1_0 (le pavé des articles) alors que, sans CSS, elle se trouverait en-dessous de ce pavé (et au-dessus du bandeau inférieur).

Le CSS modifie la présentation du document mais pas son arborescence, sa structure. Par exemple, déplacer un bloc à l'intérieur d'un autre (faire apparaître un module dans le bandeau supérieur de la page, mettons) est un effet purement visuel, une illusion d'optique qui ne crée aucun lien de parenté entre eux . À preuve : vous ne pourrez pas, sans recourir à une astuce, arranger le texte du bandeau pour qu'il contourne le module. Le bandeau n'est pas sensible à la présence du module parce que ce module est dans la branche d'à côté.

Voilà tout pour aujourd'hui. On commencera à toucher terre dans le prochain article, promis.

Bonnes lectures

Pour mémoire :

Pas compris ? Pas d'accord ? Parlez-en en commentaire.

commentaires

christina 20/02/2009 00:10

j'me flagelle pas, c'est juste la triste réalité... rassurez-vous, je vais pas en faire une maladie non plus, on s'y fait...

et ne changez rien à vos articles techniques, on les aime justement comme ça, avec esprit, humour, ou astuces vaseuses, appelez ça comme vous voulez... le seul danger est de rendre les gens accros au css/html !

m... je croyais que les trois caractères à recopier avaient disparu
grrr, les revoilà

Aïe mes doigts ! 22/02/2009 11:02


Bon, je garde donc la recette...
Caractères anti-spam : oui, ça va ça vient, j'ai observé ça aussi. Bofff...tant qu'on n'a que ça comme souci...


christina 18/02/2009 22:49

chuis con... euh mais bon, une idée comme ça : si vous mettiez les premières lettres en gras, même les pas futé(e)s feraient peut-être la relation ? (mais ça doit pas y en avoir des masses - c'est comme les blagues, s'il y en a une à qui faut les expliquer longtemps, c'est moi, snif...

Aïe mes doigts ! 19/02/2009 22:52


Arrêtez de vous flageller comme ça, ça va finir par laisser des traces !
Je devrais surtout réduire la teneur en astuces vaseuses de mes papiers techniques, déjà bien assez touffus. Mais ça,c 'est le Graal !


christina 17/02/2009 15:02

et ça veut dire quoi "émf" ?
(ça y était déjà l'autre fois ? ...une passoire j'vous dis)

Aïe mes doigts ! 18/02/2009 22:35


"ésotérique mais fondamental", c'est indiqué dans le début de cet article. Ca m'apprendra à caser des astuces de collégien...


christina 01/09/2008 13:46

ha, j'avais pas vu qu'il fallait cliquer sur "on y va ?"
c'est pour ça que ln et cl ça ne me parlait pas, j'ai jamais vu ce que ça fait vu que dans mon css il y en a que dans les trucs bleus qu'il faut pas y toucher... (j'avais essayé...)
dans, la spécification css, pareil, partout où ça causait de ça, ça restait abstrait pour moi

bon faut tout que je relise

AmD 01/09/2008 14:04


Ah oui, c'est ennuyeux.... :D
Ca m'apprendra à utiliser d'autres tournures que "Lire la suite..."


Djac Baweur 15/10/2007 09:54

Il l'a fait !!! He did it !!! :oD

Aïe mes doigts ! 15/10/2007 10:49

Ouaip.Et ça va fumer, mon p'tit gars, ça va fumer ! :-D

Sandy 14/10/2007 12:59

"En pratique, il faut bien comprendre le jeu des margin et padding (ça, on connaît – ah ouais ?), des float (légère pâleur), des position : relative ou position : absolute (pâleur intense), voire de overflow ou z-index (syncope). "

Ici Sandy morte de rire...

en comparaison, Kant et Spinoza sont des auteurs frivoles.

Ici Sandy se tient les côtes... de rire...

Bon... c'est pas tout ça... J'ai une soudaine migraine moi hihihi

Voyons la suite...

Aïe mes doigts ! 14/10/2007 16:13

Alooors, cette migraine ? :-D

mebahel 14/10/2007 12:32

OMG.
Je lis pas, hein, tu m'excuseras ;-)

Aïe mes doigts ! 14/10/2007 12:48

Ah malheureuse ! A côté de quelles merveilles de pédagogie limpide, d'humour léger et de science insondable vas-tu encore passer ? Brrhhoummm...Il fait beau dehors et je dois avoir besoin d'air, pauvre de moi .......

Archives