Il est possible avec CSS de placer un élément ou l’on souhaite, dans une page.
Et de réaliser ainsi une mise en page évoluée, bien au dela de la simple présentation de contenu.
Pour positionner un élément dans une page on utilisera les propriétés :
- position
- left
- right
- top
- bottom
Les positions se mesurent généralement en pixels. L’origine du repère (coordonnées 0,0) est en haut à gauche.
Le Positionnement absolu
Les positions des éléments seront repérées dans la fenêtre du navigateur, par la distance par rapport aux bords de la fenêtre.
Ainsi pour mettre un élément à 30 pixel du bord en haut a gauche on écrira :
h1 {
position:absolute;
top: 30px;
left: 30px;
}
et pour le mettre en bas à droite (toujours à 30 pixels du coin) :
h1 {
position:absolute;
bottom: 30px;
right: 30px;
}
L’affichage de l’élement est ABSOLU et donc indépendant du contenu de la page, notamment des élément qui apparaissenet ‘avant’ ou ‘après’ dans le document MySQL.
Ceci sera plus clair sur un exemple, soit le code suivant, qui réutilise notre positionnement absolu à 30 pixels :
Avant titre Avant titre Avant titre
Avant titre Avant titre Avant titre
<h1 style= »position:absolute; top: 30px; left: 30px; »>
Titre 1
</h1>
Apres titre Apres titre Apres titre
Apres titre Apres titre Apres titre
cela donne à l’écran :
Lorsque les éléments sont dans des boites, on positionnera…la boite.
Ceci est possible de manière relative ou de manière absolue.
Le positionnement relatif
La valeur de la propriété position est « relative ».
La différence avec précédemment est que la position est calculée.par rapport au contenu,
qui précède ou qui suit l’élément et non plus indépendaemment.
Reprenons l’exemple précédent en changeant simplement la propriété ‘position’.
Avant titre Avant titre Avant titre
Avant titre Avant titre Avant titre
<h1 style= »position:relative; top: 30px; left: 30px; »>
Titre 1
</h1>
Apres titre Apres titre Apres titre
Apres titre Apres titre Apres titre
Cela nous donne désormais à l’écran :
Recouvrement et z-index
Si l’on utilise les positions absolues, en décalant légèrement les uns par rapport aux autres il est facilement possible de faire des recouvrements.
Sur une image (un magnifique Daredevil original de Johnny Romita !) par exemple :
<span style= »position:absolute; top: 0px; left: 0px; « >
<img width=200 height=200 src=dd.jpg>
</span>
<span style= »position:absolute; top: 60px; left: 60px; »>
<img width=200 height=200 src=dd.jpg>
</span>
<span style= »position:absolute; top: 120px; left: 120px; »>
<img width=200 height=200 src=dd.jpg>
</span>
nous donnerait à l’écran :
les images s’empilent naturellement, DANS L’ORDRE les unes sur les autres.
La propriété supplémentaire ‘z-index’ va nous permettre de modifier l’ordre des couches !
ET le code suivant :
<span style= »position:absolute; top: 0px; left: 0px; z-index:3; »>
<img width=200 height=200 src=dd.jpg>
</span>
<span style= »position:absolute; top: 60px; left: 60px; z-index:2; »>
<img width=200 height=200 src=dd.jpg>
</span>
<span style= »position:absolute; top: 120px; left: 120px; z-index:1; »>
<img width=200 height=200 src=dd.jpg>
</span>
donnera :
Positionnement flottant
Il est possible grace à la propriété ‘float’ de positionner des éléments de la page, les uns à coté des autres, au lieu de les avoir les uns dessous les autres, par défaut.
Texte multi colonnes
On peut grace à cela envisager de mettre du texte sur plusieurs colonnes verticales, et faire une mise en page de type Journal. Les colonnes ‘flottant’ les unes à coté des autres.
Soit le code HTML suivant, sans Style particulier les 2 colonnes seront l’une à la suite de l’autre…
<div id= »colonne1″>
<h2> Colonne 1 </h2>
<p>et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte</p>
</div>
<div id= »colonne2″>
<h2> Colonne 2 </h2>
<p>et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote</p>
</div>
Mais en fixant la largeur à 150 pixels et mettant un attribut ‘float’ left, puis en rajoutant quelques fioritures sur le texte (police, justification et marges) comme ceci :
<style>
div {
font-family: courier;
margin:20px;
text-align:justify;
font-size:10px;
}
#colonne1 { float:left;
width: 150px; }
#colonne2 { float:left;
width: 150px; }
</style>
On obtiendra le résultat escompté :
Texte entourant une image
Voyons par exemple, le code suivant qui affichera une image, puis dessous (sur une nouvelle ligne) du texte.
<div id= »photo »>
<img src= »dd.jpg » alt= »Daredevil »>
</div>
<p>et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte, toujours du texte, et du texte a cote, encore du texte…</p>
Pour que l’image soit à gauche et que le texte l’entoure, il suffit de définir la largeur de la boîte contenant l’image, et d’utiliser la propriété float avec la valeur « left » :
Ainsi donc le code suivant
<html>
<head>
<style>
body {font-size:12px;}
#photo {
float:left;
width: 80px;
}
</style>
</head>
<body>
<div id= »photo »>
<img src= »dd.gif » alt= »Daredevil »>
</div>
<p>et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte,
</p>
</body>
</html>
donnera :
Un template classique avec bandeau, sommaire et contenu
Soit le code HTML suivant :
<body>
<div id= »bandeau »><h1>bandeau bandeau bandeau bandeau</h1></div>
<div id= »sommaire »>
<ul>
<li> Chapitre 1 </li>
<li> Chapitre 2 </li>
<li> Chapitre 3 </li>
<li> Chapitre 4 </li>
</ul>
</div>
<div id= »page »>
et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote,
encore du texte, toujours du texte, et du texte a cote, encore du texte,
toujours du texte, et du texte a cote, encore du texte, toujours du texte,
et du texte a cote, encore du texte, toujours du texte, et du texte a cote…
</p>
</div>
</body>
</html>
Il apparait par défaut séquentiellement, encore une fois :
Avec le style suivant, cela prend forme …
<STYLE>
div { text-align:justify; }
#bandeau {
width:500px;
height:50px;
background-color:#999999;
}
#sommaire {
float:left;
width:150px;
height:300px;
color:#FFFFFF;
background-color:#000000;
}
#page {
float:left;
width:350px;
height:300px;
background-color:#EEEEEE;
}
</STYLE>
</head>
et on aura à l’écran :
