Mise en boîte (partie 2/2)

Dans le genre, "je suis là juste pour vous embrouiller l'esprit", je crois que je vais gagner le premier prix là
Je vais vous apprendre ici à repousser les lois de la physique à modifier les lois du CSS (brrr...).

Les images ( <img /> ) sont des balises de type inline, et vous préféreriez que ce soient des blocks ? Pas de problème !
Les titres ( <h1> ) sont de type block, et ça vous a toujours embêté, vous préféreriez que ça soient des balises inline ? Aucun problème !

Il existe une propriété CSS très puissante, elle s'appelle display (à manipuler avec précaution, sinon vous risquez de tout faire péter :p)
Cette propriété peut prendre les valeurs suivantes :

• block : la balise concernée deviendra de type block.
• inline : la balise concernée deviendra de type inline.

En fait, display peut prendre beaucouuuup d'autres valeurs (c'est ça d'être une propriété puissante ;)), mais je vous en fais volontairement grâce et je vous montre juste les 2 plus utilisées.

Pour transformer une balise inline en balise de type block, vous allez devoir taper :
display:block;

Par exemple, si je veux que TOUTES mes images soient de type block, j'écrirai donc ceci :

Code : CSS



Rien n'impose que TOUTES vos images soient de type block, hein. J'espère que vous l'avez compris depuis le temps : on peut très bien utiliser l'attribut "class" sur une balise pour qu'elle ait une présentation différente.
Par exemple :

Code : HTML

Bien entendu, il faudra écrire le code CSS suivant pour que la deuxième image soit de type block :

Code : CSS

J'espère que je ne vous apprends rien sur le fonctionnement de l'attribut class, sinon retournez voir le premier chapitre de la partie II au triple galop



Bah c'est pareil, sauf qu'on utilise display:inline;
Je ne vous refais pas un exemple de code, je pense que vous êtes assez grands pour deviner tous seuls comment il faut faire

Petite remarque en passant : on transforme généralement des inline en block, mais on fait plus rarement l'inverse. Il faut dire que les balises block ont pas mal d'avantages : on peut modifier leur taille, leur bordure, leurs marges etc... Bref, tout ça vous le savez déjà

La première technique que nous allons voir, ce sont les flottants. C'est un nom un peu bizarre je vous l'accorde, mais c'est en fait pas si sorcier que ça.
Pour que vous voyiez bien de quoi on parle, voici ce que nous allons apprendre à faire :




Cela permet en gros d'"entourer" un élément (ici une image) par du texte. Ca permet d'avoir une jolie présentation facilement.

J'imagine que la question qui vous brûle les lèvres maintenant est : "Mais quelle est donc la propriété magique qui fait flotter ?!".
La réponse est... float ("flottant" en anglais). Cette propriété peut prendre 2 valeurs, que vous pourriez d'ailleurs avoir deviné tous seuls :

• left : l'élément flottera à gauche.
• right : l'élément flottera... à droite ! Oui bravo

L'utilisation des flottants est très simple, tellement simple qu'on a parfois tendance à se compliquer la vie (et je parle en connaissance de cause). En fait, il n'y a que 2 choses à faire :

1. Vous appliquez un float à une balise.
2. Puis vous continuez à écrire du texte à la suite normalement.

Faire flotter une image

Nous allons apprendre ici à faire flotter une image (qui est de type "inline" je vous rappelle). Voici le code XHTML que nous devons taper dans un premier temps :

Code : HTML



Ce qu'il faut bien comprendre maintenant, c'est qu'on a juste besoin de modifier le CSS de l'image, et non pas du paragraphe. Le paragraphe n'a pas besoin d'être modifié, il sera automatiquement placé comme il faut.
Voici le seul bout de code CSS qu'on a besoin de taper, qui permet de faire flotter l'image à gauche :

Code : CSS


Amusez-vous aussi à faire flotter l'image à droite, c'est tout bête : mettez float:right; et le tour est joué !

Créer une lettrine (exercice)

Parfois, il m'arrive de faire un cauchemar. J'imagine que je suis en train de rédiger un long cours sur les flottants en CSS, et que tout le monde bâille, s'endort, bref s'ennuie. Brrr... Cette vision me fait froid dans le dos à chaque fois

Alors, pour éviter que le pire de mes cauchemars se produise, j'ai eu l'idée de vous faire travailler un peu sur un exercice amusant (du moins je l'espère :p).

Vous savez ce qu'est une lettrine ? Non.
Bon c'est pas gagné

Une lettrine, c'est la première lettre d'un paragraphe écrite beaucoup plus grosse. On en voit tout le temps dans les journaux (si vous lisez le journal ;o). Voici ce que vous devez arriver à faire :



La seule consigne, c'est d'utiliser le code XHTML suivant, que vous n'avez pas le droit de changer :
Code : HTML

Votre consigne, c'est de créer un fichier CSS qui permettra de créer cette présentation sous forme de lettrine. Vous ne pouvez pas modifier le fichier XHTML, mais par contre sur le CSS tous les coups sont permis : vous pouvez utiliser les propriétés que vous voulez.

Au boulot !

...
...
...

Drrring ! Allez c'est l'heure de la correction !
Bien évidemment il fallait utiliser un float:left;, mais comment faire pour que la première lettre uniquement soit affectée ? Sans changer le XHTML ?
Si vous avez trouvés tous seuls qu'il fallait utiliser le pseudo-élément :first-letter (= "première lettre"), eh bien bravo ! C'était la seule vraie difficulté, après le reste coule de source et on peut s'amuser à mettre les propriétés qu'on veut.
Il faut penser en particulier à utiliser font-size, pour modifier la taille de la première lettre pour qu'elle fasse disons... 3 hauteurs de lignes. Pour cela, j'ai mis la valeur "3em" (= 3 hauteurs de lignes), mais si vous avez tapé "300%" c'est tout aussi bon ! Par contre, il vaut mieux éviter de mettre une valeur en pixels comme "50px" parce qu'on ne connaît pas la taille d'une ligne (ça peut changer).

Voici le code que j'ai fait pour réaliser la lettrine :

Code : CSS


Ne vous arrêtez pas là ! Rien ne vous empêche d'écrire la lettrine en blanc sur fond noir, ou même d'utiliser une image de fond ! Laissez donc libre cours à votre imagination

Stopper un flottant

Quand vous mettez en place un flottant, le texte l'"entoure", ça on l'a compris.
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en-dessous du flottant ? On pourrait faire plusieurs <br /> à la suite, mais ça serait pas pratique ni très propre...

En gros, on aimerait pouvoir faire ça :



Il existe en fait une propriété CSS (sans blague) qui permet de dire : "Stop, ce texte doit être en-dessous du flottant et non plus à côté". C'est la propriété clear qui peut grosso modo prendre 3 valeurs :

• left : le texte se poursuit en-dessous après un float:left;
• right : le texte se poursuit en-dessous après un float:right;
• both : le texte se poursuit en-dessous, que ce soit après un float:left; ou après un float:right;

Pour simplifier, on va utiliser tout le temps le clear:both, qui marche après un flottant à gauche et après un flottant à droite (ça marche à tous les coups quoi).
Pour illustrer son fonctionnement, on va prendre ce code XHTML :

Code : HTML

Code : CSS


Et voilà le travail
On applique un clear:both; au paragraphe que l'on veut voir continuer sous l'image flottante, et le tour est joué !

Hormis les flottants, il existe 3 façons de positionner un block en CSS :

• Le positionnement absolu : il nous permet de placer un block n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre etc...)
• Le positionnement fixe : c'est pareil que le positionnement absolu, mais cette fois le block reste toujours visible, même si on descend plus bas dans la page. C'est un peu comme le background-attachment:fixed; (si vous vous en souvenez encore ;))
• Le positionnement relatif : c'est le plus compliqué des trois. En gros, ça nous permet de déplacer un block par rapport à sa position normale.

Il faut d'abord faire son choix entre les 3 modes de positionnement disponibles. Pour cela, on utilise la propriété CSS position à laquelle on donne une de ces valeurs :

• absolute : positionnement absolu.
• fixed : positionnement fixe.
• relative : positionnement relatif.

Nous allons étudier chacun de ces positionnements un à un.

Le positionnement absolu

Vous savez que, pour effectuer un positionnement absolu, il faut taper :
position:absolute;

Mais ça ne suffit pas !
On a dit qu'on voulait un positionnement absolu, mais encore faut-il dire où on veut que le block soit positionné sur la page.
Pour faire cela, on va réutiliser 4 propriétés CSS que vous commencez certainement à bien connaître :

• left : position par rapport à la gauche de la page.
• right : position par rapport à la droite de la page.
• top : position par rapport au haut de la page.
• bottom : position par rapport au bas de la page.

On peut leur donner une valeur en pixels, comme "14px", ou bien une valeur en pourcentage, comme "50%".

Si ce n'est pas très clair pour certains d'entre vous, ce schéma devrait vous aider à comprendre :



Avec ça, vous devriez être capables de positionner correctement votre block

Il faut donc utiliser la propriété position et au moins une des 4 propriétés ci-dessus (top, left, right ou bottom). Si on écrit par exemple :
position:absolute;
right:0px;
bottom:0px;
... cela signifiera que le block doit être positionné tout en bas à droite (0 pixels par rapport à la droite de la page, 0 par rapport au bas de la page).

Pour le coup, on va utiliser la balise universelle <div> (de type block). Je vais rédiger un paragraphe, et je vais mettre dans le block <div> deux ou trois mots :

Code : HTML


Rien d'extraordinaire, vous avez un paragraphe suivi d'un block div qui contient un peu de texte. Jusque là, rien de bien excitant.
Maintenant, ajoutons un peu de CSS pour positionner où on veut notre block div :

Code : CSS


J'ai mis un fond jaune et une bordure pour qu'on repère mieux le block.

Comme vous pouvez le constater, le block se met au-dessus du paragraphe. Il le masque. Ca, c'est un des grands avantages et défauts du positionnement absolu : il n'y a aucun contrôle, vous pouvez mettre votre block vraiment où vous voulez sur la page, mais il faut faire attention à ce qu'il ne masque pas de texte.

Voici un autre exemple pour vous montrer qu'on peut vraiment mettre le block n'importe où :

Code : CSS

Le positionnement fixe

Le fonctionnement est exactement le même que pour le positionnement absolu, sauf que cette fois le block reste fixe, même si on descend plus bas dans la page.



Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout à l'heure, on s'aide de top, left, right et bottom pour placer notre block où on veut sur la page.

Le position:fixed; est particulièrement utile pour faire un menu qui reste toujours visible :

Code : CSS


Si vous vous demandez pourquoi le menu est tout en bas et que ça ne marche pas du tout, c'est que vous utilisez Internet Explorer 6
A cause de ce problème sous Internet Explorer, nous ne pourrons pas vraiment utiliser de menu fixe sur notre site. On préfèrera généralement se rabattre sur une position absolue, comme on a vu un peu plus haut.

Le positionnement relatif

Plus délicat, le positionnement relatif peut vite devenir une grosse prise de tête si on n'y fait pas très attention. Personnellement, je ne l'utilise pas beaucoup.
Le positionnement relatif sert généralement à faire des "ajustements".

Prenons par exemple un texte important, situé entre 2 balises <strong>.
Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le repérer :

Code : CSS


Cette fois, le schéma que je vous ai montré tout à l'heure pour les positions absolue et fixe ne marche plus. Pourquoi ? Parce que l'origine a changé : le point de coordonnées (0, 0) ne se trouve plus en haut à gauche de votre fenêtre comme c'était le cas tout à l'heure. Non, cette fois l'origine se trouve en haut à gauche de la position actuelle de votre élément.
Tordu n'est-ce pas ? Bah oui, c'est une position relative. Ce schéma devrait vous aider à comprendre où se trouve l'origine des points :



Donc, si vous faites un position:relative et que vous appliquez une des propriétés top, bottom, left, right, le texte sur fond rouge va se déplacer par rapport à la position où il se trouve.

Je vous l'avais dit que c'était tordu En fait, il faut faire des tests pour bien comprendre.
Prenons donc un exemple : je veux que mon texte se décale de 55 pixels vers la droite et de 10 pixels vers le bas. Je vais donc demander à ce qu'il soit décalé de 55 pixels par rapport au "bord gauche", et de 10 pixels par rapport au "bord haut" :

Code : CSS


Le texte s'est décalé par rapport à sa position initiale, comme ceci :



Voilà le principe. A vous de voir si vous avez besoin de l'utiliser, maintenant vous savez comment ça marche