Savoir utiliser et positionner les calques (div) - Mediabox - Centre de Formation Adobe - Ressources

Communaut Aide technique, Conseils et Ressources Formations Formations Adobe Creative Suite Tutoriels Ressources et documentations Twitter Veille technologique

Savoir utiliser et positionner les calques (div)

Par SIBELIUS, le 13 aot 2005 Prrequis : connaissance de base des feuilles de style CSS, connaissance des balises HTML Avec la dprciation des tableaux, l'utilisation correcte des calques (balises div) va petit petit devenir indispensable. Les diteurs HTML visuels n'utilisent qu'une infime partie des possibilits des calques, ce qui les rend souvent peu compatibles et peu pratiques. Voici comment se servir de cette balise div de faon optimale, bien que rsum schmatiquement.

Les balises de bloc et les balises en ligne

1. Les balises de type BLOC (block) comme les balises <p>, <ul>, <li>, <div>, <h1><h6>, 2. Les balises de type EN LIGNE (inline) comme <a>, <strong>, <em>, <span>, <img>,

De ces deux groupes dcoulent des spcificits d'affichage :

1. Les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne). Par exemple : une suite de paragraphes ou une liste 2. Les inline se placent toujours l'un ct de l'autre. Par exemple: la mise en gras d'une partie de texte l'aide de la balise

<strong>

Au niveau structurel et imbrications :

1. Une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou inline, et peut avoir une dimension (largeur, hauteur dfinies) 2. Une balise inline ne peut contenir QUE une (ou plusieurs) balise inline, et n'a pas de dimension proprement parler Une mise en page se fera donc l'aide de balises blocs, la balise <div> tant la plus indique pour cet usage. La balise <div> est une balise neutre servant de conteneur, de zone. Elle dsigne une boite rectangulaire invisible que l'on peut configurer souhait (position, couleurs, tailles,)

Le positionnement des blocs

Positionner l'aide des marges
Par dfaut, un bloc se place en haut gauche de son conteneur (ce dernier pouvant tre un autre bloc, une cellule de tableau, le body,) et prend automatiquement toute la largeur de ce conteneur. A partir de l, il est simple de positionner un bloc au sein de son conteneur grce l'utilisation des proprits de marges. Par exemple, pour placer un bloc jaune de 100x100px 15px partir de la gauche et 200px partie du haut du conteneur :
<style type="text/css"> <!-.bloc { width: 100px; height: 100px; background-color: yellow; margin-left: 15px; margin-top: 200px; } --> </style>

Note : il n'est nullement obligatoire d'utiliser le pixel pour placer son bloc; n'importe quelle unit est valable (%, em, auto,)

Positionner en Flottants
La proprit FLOAT permet de positionner un bloc gauche ou droite dans un conteneur (et non-plus l'un en-dessous de l'autre). Le reste du

1 sur 4

Savoir utiliser et positionner les calques (div) - Mediabox - Centre de Formation Adobe - Ressources

conteneur occupera alors l'espace laiss libre. L'utilisation courante consiste aligner une image gauche ou droite d'un texte de contenu : Partie HTML :
<div class="conteneur"> texte bla bla bla .... <img class="gauche" alt="..." src="..." /> </div>

Et la CSS correspondante :
.gauche { float: left; }

NOTE : lorsqu'il y'a des lments dont certains sont flottants, il est toujours prfrable de placer ces lments dans un conteneur commun. Il est possible de cumuler les proprits Float pour obtenir plusieurs blocs cte cte.

Utiliser les positions absolues et relatives

Cette proprit est largement utilise par dfaut sur les logiciels WYSIWYG comme Dreamwever. C'est en partie cause de cette utilisation abusive que les calques ont acquis une mauvaise rputation. En effet, le positionnement absolu ou relatif a des dsavantages du fait de sa rigidit : il ne permet pas (ou difficilement) l'adaptation du site aux diffrentes rsolutions la plupart du temps. Attention cependant : cette rigidit n'est que fictive et due aux valeurs fixes donnes en gnral par les logiciels comme Dreamweaver. On peut trs bien positionner en absolu en pourcentage ou en em. On peut galement trs bien centrer un site avec des positions absolues. Il faut simplement comprendre comment il fonctionne et ne pas se contenter des positionnements la dreamweaver. Sachez galement que c'est le seul moyen de superposer deux blocs (avec la proprit z-index) Lorsqu'il est en position absolue ou relative, le bloc est dit positionn. Il est retir du flux du code html : son positionnement sera le mme quelle que soit l'emplacement de la balise dans le conteneur. Le bloc est plac par rapport son conteneur s'il est lui-mme positionn, ou alors par rapport la page entire (<body>). En position relative, la position est dpendante de la position de l'lment parent (conteneur), mais la hauteur est prise en compte. L o se trouvera la balise <div> sera gnr un espace de type bloc vide correspondant la hauteur de ce <div>. C'est un moyen de placement assez droutant parfois. En absolue, le bloc est gnralement plac l'aide des proprits top et left par rapport au coin suprieur gauche du conteneur. Si les valeurs top et left sont inexistantes, le bloc apparait l o il est dclar ce qui peut servir pour placer correctement dans la page des lments superposs sans avoir de zone vide cre comme avec les positions relatives. Partie HTML :
<div class="conteneur"> texte bla bla bla .... <img class="gauche" alt="..." src="..." /> </div>

Et la CSS correspondante :
.conteneur { position: absolute; left: 30px; } .gauche { position: absolute; left: 0; }

Pour rsumer propos des diffrents positionnements : Les diffrents positionnements sont : soit position: relative soit position: absolute (ou fixed qui ne fonctionne pas sur IE) soit float soit aucune position prcise et des marges pour placer l'objet Chaque positionnement est diffrent des autres, on ne peut cumuler deux positionnements pour le mme objet.

Quelques exemples

2 sur 4

Savoir utiliser et positionner les calques (div) - Mediabox - Centre de Formation Adobe - Ressources

Deux blocs l'un en-dessous de l'autre avec un espace de sparation : Partie HTML :
<div class="bloc1">bla bla bla</div> <div class="bloc2">bli bli bli</div>

Et la CSS correspondante :
.bloc1 { background-color: blue; height: 50px; } .bloc2 { background-color: green; height: 50px; margin-top: 20px; }

Trois blocs cte--cte avec un espace de sparation : Partie HTML :

<div class="bloc1">bla bla bla</div> <div class="bloc2">bli bli bli</div> <div class="bloc3">blu blu blu</div>

Et la CSS correspondante
.bloc1 { background-color: blue; height: 50px; width: 100px; float: left; } .bloc2 { background-color: green; height: 50px; width: 100px; float: left; margin-left: 20px; } .bloc3 { background-color: red; height: 50px; width: 100px; float: left; margin-left: 20px; }

Un bloc contenu dans un autre : Partie HTML :

<div class="conteneur"> <div class="bloc">bli bli bli</div> </div>

Et la CSS correspondante
.conteneur { background-color: blue; height: 100px; width: 100px; } .bloc { background-color: yellow; height: 50px; width: 50px; margin-left: 20px; margin-top: 40px; }

Une image aligne droite d'un texte :

Partie HTML : <div class="conteneur"> <img class="image" src="..." alt="" /> <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...</p> </div> Et la CSS correspondante : .conteneur { width: 40%; background-color: yellow; }

3 sur 4

Savoir utiliser et positionner les calques (div) - Mediabox - Centre de Formation Adobe - Ressources

.image { float: right; }

Spcial : Un calque centr horizontalement : Pour centrer horizontalement un calque (ou un site web) en CSS, il suffit de donner les caractristiques suivantes au calque :
Partie CSS : .conteneur { margin-left: auto; margin-right: auto; }

Il suffit ensuite de placer le reste du site dans conteneur.et votre site sera centr proprement. Trs simple, me direz-vous ! Petit hic : Internet Explorer qui est buggu ne comprend pas cette syntaxe logique et il faut tricher avec lui. Pour que a fonctionne sous IE, il faut aligner le texte de faon centre dans le body (c'est stupide, mais c'est IE). Donc :
Partie CSS : body { text-align: center; }

Il faudra ensuite rtablir l'alignement texte dans le conteneur, ce qui donne au final :
Partie CSS : .conteneur { margin-left: auto; margin-right: auto; text-align: left; /* on r?blit l'alignement normal du texte */ }

Note : veillez donner une largeur au bloc conteneur, sinon il ne sera pas centr ! UN MOT SUR LA SEMANTIQUE : sachez utiliser chaque balise bon escient ! Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu' dlimiter des zones de page Evitez d'utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour a mais pour des donnes tabulaires et statistiques Utilisez les balises <h1><h6> pour vos titres et non des balises <p> amliores Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout fait approprie pour a

Encore des questions? Besoin d'aide? Venez en discuter sur les forums XHTML et CSS ou Dreamweaver. Le contenu de cet article est la proprit de son auteur : SIBELIUS . Toute distribution ou adaptation est interdite sans l'autorisation expresse de l'auteur. Si besoin, vous pouvez essayer de contacter SIBELIUS par l'intermdiaire du forum.

4 sur 4