Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [7]

Blocs flottants - suite

Résumé de l’étape précédente :

- les blocs flottants permettent de créer une maquette sur plusieurs colonnes

- la propriété float fait sortir le bloc flottant du flux courant de la page ; ce qui peut poser des problèmes de présentation. Pour palier à cela, il faut créer un conteneur spécial comportant la propriété suivante :

clear : both;

Ce sélecteur « nettoyeur » doit être placé après le bloc flottant.

- un sélecteur de classe permet de créer un style portant un intitulé personnalisé pour n’importe quel type de balise HTML. Contrairement au sélecteur d’ID, le sélecteur de classe peut être employé plusieurs fois sur la page. Sur le fichier CSS, l’intitulé d’un sélecteur de classe est toujours précédée d’un point (.spacer). Côté HTML, la balise ouvrante doit être tapée ainsi (pour un paragraphe de classe spacer) : <p class="spacer">.

- si l’on définit une largeur pour un bloc, cette dimension sera respectée, y compris si ce bloc comporte un élément de dimension plus grande ; au risque que cet élément dépasse de son conteneur parent. Telle est en tous cas la règle définit par les CSS ; cette dernière étant respectée par Firefox et non par Internet explorer.

Nous en étions donc là :

JPEG - 63.1 ko

Le bloc gauche est en place, il faut maintenant passer au bloc de droite.

On recommence :

Côté CSS, je crée le sélecteur d’ID. Remarquez, ligne 34, l’alignement à droite. La propriété float ne peut prendre que deux valeurs : right ou left.

J’ai appliqué une hauteur fixe (ligne 40) à titre provisoire, pour matérialiser ce bloc. La couleur de fond et la bordure, d’ailleurs, jouent le même rôle. Toutefois, lorsque je placerais mon menu, je retirerai la hauteur (voir l’étape précédente à ce sujet) mais je garderai l’instruction permettant de définir une couleur de fond, quitte à lui indiquer une propriété transparente. Il est effectivement recommandé de toujours renseigner le background d’un bloc.

JPEG - 16.1 ko

Côté HTML, j’insère ce nouveau bloc droite, juste après la balise de fermeture de gauche.

Il est nécessaire que le « nettoyeur » (.spacer) soit placé après ce second bloc flottant.

JPEG - 21.2 ko

J’enregistre et je charge la page sur les navigateurs.

JPEG - 64.6 ko

Petite correction : je souhaite appliquer une marge à ce bloc droite ; pour cela j’indique une valeur de 1em en marge externe (ligne 39).

JPEG - 15.3 ko

Vérification sur les navigateurs.

JPEG - 62.5 ko

J’affiche ensuite les pages « grand format ».

D’abord avec Firefox :

JPEG - 26.4 ko

Puis Internet Explorer.

JPEG - 28.5 ko

Suite et fin !

 

Projet RECETTE [7]