Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [5]

Conteneurs blocs

Lors de l’étape précédente, nous avons commencé à voir de façon plus détaillée les CSS ; notamment :

- quelques déclarations de mise en forme qu’il faut connaître (couleur, taille, police, fond, etc.)

- héritage et unités de mesure relatives, avec un support spécifique sur cette question,

- les styles pour définir l’apparence des liens.

Il est indispensable que les étapes abordées jusqu’à présent soient bien comprises, avant de continuer.

Au lieu de laisser les styles par défaut pour les propriétés « basiques » tels que la couleur du texte, il est toujours préférable d’indiquer des paramètres personnalisés (même si ces derniers sont identiques aux paramètres par défaut de la plupart des navigateurs).

Je complète donc le style appliqué au body pour la couleur du texte :

JPEG - 26.6 ko

Je confirme que la couleur du texte est noire.

Cela n’apportera aura aucune différence visible, mais ainsi, mon fichier sera plus en « conformité avec les recommandations »…

JPEG - 27 ko

Passons, maintenant, aux choses sérieuses. Regardons la page :

JPEG - 52.5 ko

Jusqu’à présent, le contenu de la page est, non seulement aligné au « fer à gauche », mais aussi « collé » au bord gauche de la page.

Or je voudrais que, tout en restant fer à gauche, la page s’affiche centrée en largeur au milieu de la fenêtre et avec un fond (blanc) permettant de la différencier du fond de la fenêtre (voir ci-dessous).

Pour arriver à un résultat aussi trivial, il va quand même falloir intégrer quelques notions théoriques indispensables, essayer de ne s’en tenir qu’à l’essentiel et contourner quelques pièges.

Voici la méthode proposée :

- je dois d’abord créer un bloc conteneur qui englobera tout mon corps de page

- puis ensuite je modifierai les propriétés CSS de ce conteneur pour qu’il s’aligne au centre.

Pour cela, j’affiche, dans un premier temps, le fichier index.html. Je me place juste après la balise d’ouverture du body et je tape une nouvelle balise :

<div id="global">

JPEG - 33.7 ko

Regardons cette balise en détail, car il y a beaucoup de nouvelles choses (importantes) :

- La balise <div> </div> est particulièrement adaptée pour jouer le rôle de « bloc conteneur ». Considérons, désormais, que dès qu’il faut placer une zone de texte dans un bloc non « typé » l’idéal est d’employer la balise générique de conteneur div. Inversement, considérons comme typé des sélecteurs tels que : liste (ul), paragraphe (p), image (img), tableau (table), etc.

- Petit détail qui a son importance : il est essentiel de bien taper l’espace entre <div et id.

- Qu’est-ce signifie ce  id="global" ? Pour répondre à cette question, il est nécessaire d’expliquer cette partie du code de façon très détaillée :

Sélecteur personnalisé  : le CSS permet non seulement, tel que nous l’avons fait jusqu’à présent, de personnaliser des styles en faisant référence à des balises HTML génériques ; ce que l’on appelle sélecteurs de type, mais il est également possible de créer des sélecteurs personnalisés ; par exemple : "global".

Donc "global" est un sélecteur d’ID qui s’applique, ici, à une balise div. J’aurai tout aussi bien pu appeler ce sélecteur "katarina", "kangourou" ou "kilimandjaro". Notez bien, toutefois, qu’il est préférable que les noms donnés aux styles personnalisés se raccordent à une certaine logique ; ne serait-ce que pour s’y retrouver plus facilement dans la lecture de son propre code ou de celui du voisin. Dans notre cas, il s’agit de créer un conteneur qui englobe la totalité de la page : je l’appelle donc – sans grande originalité - "global". Autre restriction, concernant la syntaxe des intitulés de styles personnalisés : proscrire tout caractère accentué (par exemple "globalité" n’est pas un sélecteur d’ID valide).

Sélecteur d’ID "global" est un sélecteur de type ID, cela signifie qu’il est unique. Autrement dit, cette page ne doit pas comporter d’autres conteneurs <div id="global"> (et même aucun autre sélecteur portant le même ID). La règle s’applique à tout sélecteur de type ID : on ne l’emploi qu’une seule fois dans la page. Comme nous le verrons, il est évidemment possible de faire appel à des styles personnalisés qui peuvent être utilisés plusieurs fois dans la page ; dans ce cas, il ne s’agit jamais de sélecteurs d’ID mais de sélecteurs de classe (nous y reviendrons un peu plus loin).

Je ferme cette balise en me plaçant à l’autre bout de la page, juste avant la balise de fermeture du body (voir ci-dessous).

Remarquez que le sélecteur "global" est déclaré à l’ouverture, mais pas à la fermeture. Pour boucler la balise, on se contente, comme d’habitude d’indiquer :

</div>

Le problème c’est que, dans la pratique, une page Html – Css est généralement truffée de balises <div> (ID ou classes). Dans ces conditions, il peut devenir difficile de savoir à quel<div> correspond tel </div> si votre page contient plusieurs (dizaines) de variantes de cette balise.

Voilà pourquoi j’insère immédiatement un commentaire :

<!--global-->

afin d’indiquer que cette balise de fermeture correspond bien au conteneur global (<div id="global">).

De façon complémentaire, afin que le code soit plus lisible et clair, il est recommandé d’indenter le code (ce que nous verrons un peu plus tard).

JPEG - 20 ko

La balise globale étant intégrée dans le fichier HTML, regardons, maintenant, comment cette balise est traitée coté CSS :

JPEG - 34 ko

Voici les points les plus importants à retenir :

- le dièse #, dans le fichier CSS, signifie qu’il s’agit bien d’un conteneur unique. En CSS, # fait référence au sélecteur id du code HTML correspondant.

- vous remarquez, par contre qu’il n’y a aucun espace, ni guillemets.

- voici le code permettant de centrer horizontalement dans la fenêtre :

margin-right: auto;

margin-left: auto;

- par contre, vous constatez que j’ai appliqué des marges personnalisées en tête margin-top et en pied margin-bottom.

- remarquez, enfin, l’instruction :

text-align :left;

Nous verrons que cette propriété est indispensable pour que le résultat s’affiche correctement sur les différents navigateurs.

Le reste doit vous être familier ; remarquez que j’ai intégré le fond blanc d’arrière plan.

JPEG - 30.8 ko

Je vérifie, maintenant, si le conteneur sera toujours centré dans la fenêtre quel que soit la taille de cette dernière. Pour cela je modifie manuellement la taille de la fenêtre de mon navigateur Firefox.

Oui, ça marche.

JPEG - 63.3 ko

Voyons à présent comment cela se présente avec Internet explorer.

Oups !!! Bienvenue en CSS…

JPEG - 77.3 ko

J’affiche la fenêtre plein pot. Aucun doute : Internet Explorer ne veut rien entendre. La page reste callée à gauche.

L’occasion m’est donnée (à bon compte) d’exprimer toute la détestation que m’inspirent les produits Microsoft. Une fois passée ma hargne, il va bien falloir trouver une solution.

JPEG - 32.1 ko

Retour sur mon fichier CSS (ci-dessous) pour y appliquer ma première entorse à la belle logique huilée des règles CSS. Utilisant un hack largement répandu sur Internet, je modifie la propriété d’alignement de la balise body :

text-align : center;

C’est totalement stupide : cela revient à indiquer que, par défaut, tout contenu de ma page sera centré ; d’où la nécessité que le conteneur enfant - <div id="global">
- soit défini comme étant aligné à gauche (voir plus haut) ; afin de modifier l’héritage du conteneur parent (body).

JPEG - 19 ko

C’est bon !

JPEG - 32.5 ko

Du coup, je décide d’afficher côte à côte les deux navigateurs afin de repérer les différences d’interprétation.

Sache précaution : il en effet fort désagréable de devoir recommencer le codage d’une page qui semblait achevée parce qu’on se rend compte, au dernier moment, de différences d’interprétation importante d’un navigateur à un autre. Mieux vaut, donc, vérifier le plus tôt possible l’affichage des pages sur plusieurs navigateurs.

Même si je me fais l’ardent promoteur des navigateurs basés sur le moteur d’affichage libre Gecko (dont fait partie Firefox), je suis bien obligé de constater qu’une énorme quantité d’internautes fait appel à Internet Explorer. Il serait même plus sûr que j’affiche la même page, en l’état, sur d’autres navigateurs et sur d’autres systèmes d’exploitation (Opera, Safari, Konqueror).

Je constate, en tous cas, que sur une page aussi rudimentaire, les différences d’interprétation entre Firefox et Internet explorer sont quand même importantes, notamment en ce qui concerne les marges verticales.

JPEG - 79 ko

L’objectif étant d’arriver à un résultat le plus proche possible sur les deux navigateurs. Je vais donc « mettre les compteurs à zéro » pour la plupart des sélecteurs de type.

Je commence avec h1 h2 et h3. Il existe une méthode plus radicale, permettant de déclarer d’un seul coup des marges nulles pour un ensemble de balises. Je n’aime pas trop ces réglages « à la globale », en fait cela peut devenir une vraie source de problème si on les empile les uns à la suite des autres ; car on ne sait plus trop qui pilote quoi (c’est le pire qui puisse vous arriver avec le CSS). Mon code est simple pour l’instant : je préfère passer en revue les sélecteurs les uns après les autres. La mise à zéro des marges est temporaire ; il faudra bien appliquer des valeurs. Je comprendrai beaucoup mieux le comportement des navigateurs si je change progressivement les valeurs nulles les unes après les autres.

JPEG - 16.2 ko

Oui y’a du mieux, n’est-ce pas ?

JPEG - 92.9 ko

On continue le réglage à zéro marge.

Je modifie la valeur du sélecteur p (paragraphe).

JPEG - 6.3 ko

Et j’en fais de même pour ma liste. Pour rappel : ul déclare une liste non-ordonnée et li concerne chaque item de la liste.

JPEG - 13.5 ko

Yes !

Je suis arrivé au résultat souhaité, au moins dans un premier temps. Il y a bien quelques petites différences d’interprétation, notamment sur les puces, mais comme, de toutes façons, je dois modifier les marges de la liste, il y a fort à parier que cela devrait s’arranger.

JPEG - 90.1 ko

Lisez la suite !

 

Projet RECETTE [5]