Notre magasin

Rue Albert 1er, 7

B-6810 Pin - Chiny

(/fax: 00 32 (0)61/32.00.15

Formation / tutorial FrontPage

FORMATIONS

Le MAGASIN YBET

PRODUITS et SERVICES

Formation Internet entreprise

Activités et présentation

COURS HARDWARE

Rayon d'action  

11. Feuilles de styles, positionnement

1. Introduction - 2. Positionner une zone - 3. Mise en page CSS

1. Introduction.

Nous avons déjà utilisé les feuilles de styles pour personnaliser des styles de paragraphes, textes, cadres et tableaux, ... dans les précédents chapitre. Cette partie va nous permettre de positionner sur une feuille automatiquement certains éléments.

Prenons tout de suite un exemple d'application. Nous souhaitons une zone centrée horizontalement d'une largeur de 1000 pt. La solution actuelle, au vue de nos connaissances de ce cours est de créer un tableau au centre de la feuille:

C'est effectivement la plus facile. Pourtant cette solution va alourdir le codage de la page et poser quelques problèmes lorsque nous allons intégrer un ou plusieurs tableau dans cette zone. La solution est de créer une zone dans la feuille de style. Elle n'est pas non plus sans inconvénients, j'en convient, due notamment à la différence d'utilisation du codage entre les différents navigateurs.

Cette solution va également nous permettre de positionner des colonnes dans la zone qui vont différés en taille suivant l'affichage du navigateur (et de nouveau poser quelques problèmes suivant les navigateurs).

2. Positionnement d'une zone

Pour positionner un objet sur notre écran, nous allons utiliser la propriété CSS position déjà vue au chapitre précédant. Elle peut prendre 4 valeurs possible:

• Static: c'est la valeur par défaut. Les valeurs left, top, right et bottom ne s'appliquent pas.
• Relative: la position de l'objet est définie par l'endroit où l'élément est inséré dans le code HTML. Dans cette valeur, si deux zones sont définies les unes à la suite de l'autre, elle vont se chevaucher.
• Absolute: positionnement par rapport au point gauche de la feuille ou par rapport au parent si ce dernier est relatif ou absolu.
• fixed: n'est pas reconnue par Explorer. Elle permet de positionner l'objet suivant ses coordonnées. Nous ne l'utiliserons pas.

2.1. Absolute

D'autres propriétés vont s'ajouter en fonction de ce choix. Positionnons tout de suite un élément en position absolute. Voici le code dans notre feuille de style:

Voici le code à insérer en HTML:

Nous avons donc insérer un cadre rouge sur notre feuille à 1000 pt en-dessous du bord de la feuille et 300 pt par rapport au bord droit. Génial, ... sauf que suivant la résolution de votre navigateur, la zone va être soit trop haute, soit trop basse par rapport au commentaire. Vous pouvez essayer. 

La solution absolute ne s'adapte finalement que pour positionner une zone dans un endroit bien définit, le plus souvent tout au dessus à droite ou à gauche, sauf si elle est utilise dans un cadre parent. Comme exemple, utilisons la propriété CSS suivante

Voici le code à insérer en HTML:

Vous remarquerez immédiatement sur cette page le petit carré rouge tout en haut à droite. En plus, si vous essayez de sélectionner cette zone, vous remarquerez tout de suite qu'au niveau sélection de texte, il est bien positionné ici et pas tout au-dessus. Cette propriété est parfois utilisée pour le référencement pour positionner des textes d'une manière différente pour les visiteurs et les moteurs de recherche, mais c'est plutôt du bricolage.

2.2. Relatif

La deuxième solution de positionnement possible via les feuilles de styles CSS est la position relative. Ceci peut permettre de positionner une zone dans un cadre parent ou même de créer le cadre parent. 

Commençons par Firefox: . Le code CSS est le suivant. Remarquez que si Width est vide, le texte ne sera pas positionner. Un exemple est repris sur cette page. Si vous l'utilisez en Explorer, il ne sera pas centré

Le code à insérer (le même pour tous les navigateur) est 

Et oui, Internet Explorer gère différemment le CSS des autres navigateurs (ce n'est pas le cas avec les tableaux). Ce n'est pas tout, ceci varie en plus d'une version à l'autre. Pour le rendre "compatible" avec IE, il va falloir modifier notre fichier CSS. D'abord en modifiant le body: marge à 0 et alignement centré. Ensuite dans notre zone global, rajouter l'alignement du texte à gauche. Un peu tordu, mais obligatoire.

Voici une feuille identique fonctionnant avec tous les navigateur (y compris avec Microsoft Explorer). Bien sûr, vous pouvez insérer un margin-top pour faire descendre un peu la zone et même insérer une zone absolute dans cette zone. C'est ce que nous allons faire.

3. Mise en page en CSS

Mon but dans ces notes de cours n'est pas de voire complètement les feuilles CSS, mais de faire une bonne introduction. Pourtant, voici un petit exercice. 

 Une mise en page standard, un tableau aligné centré de 1000pt. Il va nous falloir créé la zone globale, puis insérer en relatif ou en absolu les 4 zones suivant les propriétés demandées.

• En haut une zone header reprenant toute la largeur. La hauteur est libre
• Dans la zone du milieu, une colonne à gauche et une colonne à droite de 200 pt. La zone du milieu doit donc faire 600 pt. Pourtant, pour éviter certains problèmes d'affichage, on va un peu oublier sa taille. La hauteur n'intervient pas. Toute cette zone va être définie comme un conteneur global.
• En bas, le footer, toujours de largeur de 1000pt, hauteur indéfinie. Cette partie est identique à l'en-tête

en gros, trois zones horizontales .... dont la zone centrale coupée en trois

3.1. Header et footer

Cette zone doit être d'une largeur 1000, la hauteur n'est pas définie. Nous allons également utiliser un padding de 5 pt. Remarquez que nous avons fait exprès de ne pas mettre de text-align-left (en connaissant déjà les conséquences, ceci va automatiquement centré le texte)

3.2. Affichage central.

La partie suivante va créer un conteneur que nous appellerons global. Dans ce conteneur, nous intégrerons les trois zones: gauche, centre et droite.

Commençons par reprendre la partie ci-dessus pour créer la zone globale. Nous n'avons pas défini cette fois la marge haute. La couleur de fond n'intervient que si nous insérons du texte à l'intérieur

La zone de gauche est aussi facile, sauf qu'elle va être en position absolue avec une marge gauche (left) de 0 px par rapport au conteneur. Nous lui donnons une largeur de 200 px.

et celle de droite, identique, sauf que c'est right qui passe à 0

Il nous reste néanmoins celle du centre. Les marges à droite et à gauche sont définies à 200 px pour reprendre les colonnes de droites et de gauche. Remarquez que nous n'avons pas définit la largeur. Est-ce que ca va nous poser des problèmes? Oui. La couleur de fond (ici violet) ne prendra pas toute la largeur de la colonne, mais uniquement le fond de remplissage de texte.

la propriété complète doit donc finalement reprendre également la largeur de la partie centrale, soit

3.3 Le code html.

Il ne reste plus qu'à implanter le code en HTML en intégrant à fait les différentes boîtes:

Je vous laisse le soin de faire la même chose en utilisant des pourcentages pour la partie centrale, éventuellement pour l'ensemble du tableau.

<13.10. Feuilles de styles externes

YBET Informatique: formation débutant ou avancé

dans notre salle de formation à Chiny ou en entreprise

Renseignements, tarifs et inscriptions sur notre page formations informatiques