| Accueil | table XHTML-CSS | index XHTML-CSS | précédent | suivant |

Texte déroulant dans une boîte "div"

Lorsque la hauteur d'une boîte div a été définie et que la longueur du texte excède la hauteur de la boîte, on peut provoquer son défilement vertical en ajoutant à la feuile de style la spécification

overflow : auto;

En l'absence de cette spécification, le texte débordera de la boîte. Reprenons les exemples précédents (exemple No 11 et feuille de style No 11) en fixant la hauteur de la boîte div2 et en ajoutant une spécification overflow. Notons que les spécifications CSS du W3C permettent de définir la couleur des barres de défilement par :

scrollbar-face-color : couleur; (couleur des boutons et de la barre)
scrollbar-track-color : couleur; (couleur du fond)
scrollbar-arrow-color : couleur; (couleur des flèches des boutons)
Pour l'instant, ces spécifications ne sont prises en compte que par Internet Explorer et la couleur des barres ne peut pas être modifiée avec les autres navigateurs.


/* Fichier Style11a.css */

/* fond d'écran */
body
{
background-color : rgb(0,0,0);
}

.div1
{
background-color : rgb(60,0,0);
width : 300px;
border-width : 1px;
border-style : solid;
border-color : rgb(255,255,255);
font-family : Arial;
font-size : 9pt;
color : rgb(255,255,255);
}

.div2
{
background-color : rgb(0,60,0);
height : 200px;
overflow : auto;
margin-left : 30px;
margin-top : 30px;
margin-right : 30px;
padding : 10px;
border-width : 1px;
border-style : solid;
border-color : rgb(255,255,255);
scrollbar-face-color : rgb(0,60,0);
scrollbar-track-color : rgb(200,220,200);
scrollbar-arrow-color : rgb(255,255,255);
}

.texte0
{
margin : 0;
}

.texte1
{
color : rgb(255,255,150);
margin : 0;
margin-top : 20px;
}

.texte2
{
margin-left : 30px;
margin-top : 30px;
margin-right : 30px;
margin-bottom : 30px;
padding : 10px;
font-size : 11pt;
font-style : italic;
color : rgb(200,255,255);
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple011a</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style11a.css" />
</head>

<body>

<div class="div1">

<div class="div2">

<p class="texte0">
Cette page montre l'emboîtement des balises "div". La feuille de style définit une hauteur de 200 pixels pour la boîte "div2" avec adjonction de la spécification <b>overflow : auto</b>. On peut alors faire défiler le texte qu'elle contient par la barre de défilement qui apparaît sur la droite. La largeur de la boîte "div2" n'est pas spécifiée. Elle prend toute la largeur disponible compte tenu des marges. <br/>Les boîtes internes héritent des propriétés des boîtes qui les englobent : ce paragraphe de style "texte0" est dans la boîte "div2", elle même contenue dans la boîte "div1". Il hérite de la police de caractères de "div1". Ses marges sont annulées par son style "texte0"
</p>

<p class="texte1">
Ce paragraphe est dans la boîte "div2" et répond au style "texte1". Ce style modifie la couleur de la police de caractères héritée de "div1", annule les marges, puis fixe la marge haute à 20px
</p>

</div>

<p class="texte2">
Ce paragraphe est directement placé dans "div1" et répond au style "texte2" qui redéfinit la taille, le style de la police de caractères héritée de "div1" et fixe les marges
</p>

</div>


</body>
</html>


Afficher cette page


suivant