|
Page 2 sur 5
Exemple css - css arrondi
Dans ce tutoriel, vous allez vous familiariser davantage avec le langage css, en examinant l'une des utilités des blocs div emboités.
On se propose de créer la page web suivante:
Elle est constituée d'un bloc conteneur (bordure en vert) et d'un bloc fils flottant à gauche.
Comme vous le constatez, le bloc fils a des coins arrondis. La mise en oeuvre de ces coins arrondis est facilité par l'utilisation des blocs emboités.
Pour voir comment le faire, nous allons présenter le code de cette page xhtml en commentant chacun des blocs de code qui la constituent:
Initialement, le code de la page a la forme qui suit. Pour l'achever, il faudra, par la suite, renseigner la partie <body> et la partie <style>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type= "text/css">
</style>
</head>
<body>
</body>
</html>
Dans le corps de la page (balise <body>), on place le code suivant. Le bloc gauche étant constitué de 4 blocs emboités, le bloc gauche lui même et 3 autres qui sont placés à l'intérieur de celui-ci:
<body>
<div id="Principal">
<div id="gauche">
<div>
<div>
<div>
Test de blocs div emboîtés à la manière des poupées russes.
</div>
</div>
</div>
</div>
</div>
</body>
Dans la suite, en commentant les styles css, on verra l'utilité de cette disposition qui ressemble à des calques superposés.
<style type= "text/css">
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
color:blue;
text-align: left;
}
Ces paramètres s'appliquent à toute la page (balise "body"). Le texte de couleur bleu et de taille 12px, sera justifié à gauche.
#Principal{
width:800px;
border: 2px solid green; /* redéfinition de bordure */
background-color:#FFFFFF; /* fond coloré */
}
Le bloc conteneur "Principal" a une largeur de 800px et une bordure verte de 2 pixels d'épaisseur.
#gauche {
margin:20px;
width: 152px;
background: transparent url(images/module_middle.jpg) left repeat-y;
}
Le bloc "gauche" de largeur 152 pixels, a une marge de 20 pixels (espacement à gauche, en haut, à droite et en bas avec son bloc parent).
Ce bloc a un fond de couleur transparente, et une image de fond (module_middle.jpg) qui se répète le long de la hauteur. C'est l'image de fond de premier niveau figurant dans le shéma suivant :
#gauche div {
width: 152px;
background: transparent url(images/module_top.jpg) top left no-repeat;
}
Le bloc fils de l'élément "gauche" a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en haut à gauche du bloc (top left). C'est l'image de second niveau figurant dans le schéma ci-dessus.
#gauche div div {
width: 152px;
background: transparent url(images/module_bottom.jpg) bottom left no-repeat;
}
C'est le bloc fils du bloc fils de l'élément "gauche". Il a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en bas à gauche du bloc (bottom left). C'est l'image de troisième niveau figurant dans le schéma ci-dessus.
#gauche div div div {
width: 132px;
height:300px;
padding: 10px;
background: transparent;
C'est le bloc fils le plus profond qui contient le texte à afficher. Il a un fond transparent. Le padding de 10 pixels, définit l'espacement intérieur de ce bloc, entre ses bords et son contenu. Le texte, par exemple, qui y est affiché, ne sera pas collé contre le bord du bloc.
}
</style>
C'est ainsi, que viennent se superposer ces 4 blocs, l'un en dessus de l'autre. Le bloc le plus profond "#gauche div div div " sera le plus haut et l'élément parent "#gauche" sera au niveau le plus bas. Ils restent tous visibles parce qu'ils ont tous une couleur de fond transparente. Par contre les images top et bottom viennent cacher localement l'image de premier niveau. L'image de troisième niveau ne cache pas celle de deuxième niveau parce qu' elles sont placées à des endroits différents (top et bottom).
Pour tester la page sur votre ordinateur locale, téléchargez les images de fond middle , top et bottom.
|
