Box déroulante html5
Posté : 07 mai 2011, 12:55
Bonjour,
Je souhaite afficher des rubriques contenant un titre et plusieurs lignes d'information.
Mon idée est d'afficher une box avec uniquement le titre. En cliquant sur "plus", ça déroulerait la boite et afficherait toute l'information.
Voici mes deux fichiers :
----------------------------------
Merci pour votre aide.
Erika
Je souhaite afficher des rubriques contenant un titre et plusieurs lignes d'information.
Mon idée est d'afficher une box avec uniquement le titre. En cliquant sur "plus", ça déroulerait la boite et afficherait toute l'information.
Voici mes deux fichiers :
Code : Tout sélectionner
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rubrique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="boxrubrique">
<h2>Titre de la rubrique</h2>
<p>bla bla</p>
<p>bla bla</p>
<p>bla bla bla</p>
</div>
</body>
</html>Code : Tout sélectionner
.boxrubrique {
width: 30em;
background-color: #89ac11;
color: #fff;
margin-top: 1em;
padding-top: 2em;
padding-right: 2em;
padding-bottom: 1em;
padding-left: 2em;
}
h2 {
margin-top: 0;
font-size: 1.6em;
}
.boxrubrique {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
/* pour obtenir l'effet ombré ces trois balise*/
box-shadow: 3px 3px 6px #666;
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow : 3px 3px 6px #666;
}
Erika