CSS : mise en forme globale
Maintenant que nous savons modifier l'apparence des éléments, nou allons nous intéresser à l'agencement.
Agencement, côté XHTML
Les notions de inline et de block sont essentiels dans l'organisation d'une page web : les éléments block sont suivi d'un retour à la ligne, contrairement aux éléments inline
Si on visualise cela sous forme d'un tableau (ce qui est faux, cela ne sert que d'illustration), on peut dire que les éléments inline permettent de changer de colonne et les éléments block de changer de ligne. C'est évidemment un peu plus subtil que cela...
Les balises de mise en valeur des mots (<em>, <b>, <oblique>,...), de citation courte (<q>), de lien (<a>) sont des balises inline : lorsqu'on les utilise, le texte continue à la suite.
Les balises de paragraphes (<p>), de citation longue (<blockquote>), d'insertion d'image, de titres ou encore de listes ou de tableaux, sont quant à elles de type block.
Nous avons déjà utilisé la balise <span> pour faire de la mise en forme locale dans un texte. Elle sert à attribuer une classe à du contenu, de manière inline : sans retour à la ligne. La balise <div> est son équivalent pour le mode block : on regroupe dans une division tous les éléments devant apparaître ensemble. Les balises <div> peuvent être imbriquées les unes dans les autres. Le CSS permet ensuite de les positionner les unes par rapport aux autres et de définir pour chaque un style.
Notez qu'il est possible de modifier le type inline ou block d'un élément depuis le CSS (rendre une liste horizontale par exemple)
Mise en pratique
Nous allons maintenant reprendre notre page XHTML et insérer les divisions adéquates à une mise en page fonctionnelle.
Pour l'entête
<div id="entete">
<h1> Mon Site!</h1>
</div>
Pour le menu principal
<div id="menu1">
<p> Voici une liste </p>
<ul>
<li> premier </li>
<li> second </li>
</ul>
</div>
Pour le sous-menu (pour faire une navigation à double entrée)
<div id="menu2">
<p> Voici une liste numérotée </p>
<ol>
<li> premier </li>
<li> second </li>
</ol>
</div>
Pour le contenu pur
<div class="texte">
<h2> Première partie de mon contenu</h2>
<p> Mon premier paragraphe : à ce sujet, regardez sur le web ce qu'il se dit du Lorem Ipsum ! </p>
...
<h2> Les liens </h2>
<p>mon lien: <a href="http://cours.loosli.fr">Quelques cours</a></p>
<p>N'hésitez pas à aller le <span class="visite"> visiter </span>, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
</div>
<div class="texte">
<table>
<tr>
<td> 1 </td><td> 2 </td>
</tr>
<tr>
<td> voilà </td><td> voici </td>
</tr>
</table>
<p> Et maintenant, le super tableau imbriqué </p>
<table class="imbrique">
<tr class="premiereligne">
<td> 1 </td><td> 2 </td> <td> 3 </td> <td> 4 </td>
</tr>
<tr>
<td> voilà </td><td> voici </td> <td> par ici </td> <td> par là </td>
</tr>
<tr>
<td>
<table>
<tr>
<td> miam </td> <td> miam </td>
</tr>
<tr>
<td> tut </td> <td> tut </td>
</tr>
</table>
</td>
<td> voici encore </td> <td> pas par ici </td> <td> ni par là </td>
</tr>
</table>
</div>
Pour l'image
<div class="image">
<p>
Vous souhaitez vous rendre vers un endroit magique ?
Rien de plus simple, cliquez sur l'image :<br />
<a href="http://cours.loosli.fr"><img src="./images/hawai.jpg"
alt="Photo de Hawaii" title="Clique pour voyager !" id="logo" /></a>
</p>
</div>
Et ainsi de suite...
Pour l'affichage, s'il n'y a pas de feuilles de style, ce que nous venons de faire n'a aucun effet : le contenu est présenté dans l'ordre où il apparaît dans le XHTML.
Essayez la CSS suivante (enregistrez dans un fichier justelesdiv.css et liez ce fichier à votre XHTML)
#entete
{
background-color:red;
}
#menu1
{
background-color:orange;
}
#menu2
{
background-color:pink;
}
.texte
{
background-color:blue;
}
.image
{
background-color:yellow;
}
Joli non ?
Il existe plusieurs modes de positionnement (static, fixe, relatif, absolu). Nous allons voir le principe de chacun d'entre eux puis les mettre en pratique.
Position statique : celle par défaut, l'ordre est celui du fichier XHTML
Position fixe : la division reste à un position fixe par rapport au navigateur
Position relative : la division se place aux autres
Position absolue : la division est placée par rapport à la division non statique qui le contient, à défaut le navigateur
On modifie le positionnement à l'aide des mots clés left, right, bottom, top qui indiquent des distances. Les éléments peuvent se superposer, on peut alors définir l'ordre de la pile (qui est devant qui) à l'aide de la commande z-index.
Tentez cette modification du CSS
.image
{
background-color:yellow;
position:fixed;
bottom:0px;
}
Puis celle-ci
#entete
{
background-color:red;
position:absolute;
top:100px;
}
Ou encore
.texte
{
background-color:blue;
position:relative;
float:left;
width:70%;
}
Ici on peut remarquer le float qui indique où doit se positionner l'élément par rapport aux éléments suivants... (left ou right)
#entete
{
background-color:red;
position:relative;
top:10px;
padding-top:30px;
}
#menu1
{
background-color:orange;
padding-bottom:10px;
position:relative;
left:0px;
right:0px;
top:10px;
}
#menu1 ul li
{
display:inline;
border:1px solid black;
margin:3px;
padding:3px;
}
#menu1 p
{
visibility:hidden;
}
#menu2
{
position:relative;
left:0px;
background-color:pink;
margin-top:20px;
width:25%;
padding-left:10px;
}
.texte
{
background-color:blue;
position:relative;
float:right;
width:73%;
top:100px;
}
.image
{
background-color:yellow;
position:fixed;
bottom:0px;
width:25%;
padding-left:10px;
}
