accordion
L'effet accordéon (accordion) regroupe des lignes de titre qui, une fois cliquées, affichent un contenu détaillé.
Dans l'exemple fourni par w3schools, les couples button/div sont utilisés.
Le button est stylé en une ligne pleine (100% de largeur),
quand on clique sur ce bouton, la partie div cachée (display: none), apparaît.
Le survol du bouton provoque une transition de la couleur de fond en gris, sur 0,4 seconde.
Puis un clic sur le bouton passe le display en block.
C'est javascript avec addEventListener sur click qui programme les actions associées aux boutons.
nextElementSibling permet d'atteindre l'élément frère suivant le bouton, soit la div immédiatement en-dessous.
La classe active est basculée grâce à this.classList.toggle("active");
On peut considérer que cet exemple est responsive, même sans media query, car les éléments prennent 100% de la largeur.
Voir l'exemple Icons, pour ajouter les signes + et -
accordion
centrer1
Blocs centrés dans une div
La div conteneur a une hauteur définie, les blocs sont centrés verticalement et horizontalement.
Démo
Bloc 1
Bloc 2
Bloc 3
Bloc 4
Source
<style>
.conteneur01 {
width: 50%;
height: 150px;
line-height: 150px;
background-color: lightblue;
text-align: center; /* centre horizontalement */
}
.conteneur01 p{
display: inline-block;
vertical-align: middle;
line-height: 1.3rem;
border: 1px solid black;
text-align: center; /* centre verticalement */
padding: 10px;
}
</style>
<div class="conteneur01">
<p>Bloc 1</p>
<p>Bloc 2</p>
<p>Bloc 3</p>
<p>Bloc 4</p>
<p>Bloc 5<br>La ligne 2 du bloc 5 est plutôt longue, n'est-ce pas ...</p>
</div>
centrer2
Bloc centré dans une page
Centrer verticalement et horizontalement un bloc, sur tout l'espace restant,
par exemple pour une page d'accueil.
Source
<style>
.container02 {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid red; /* repérer la div */
}
.center02{
text-align: center; /* centrer horizontalement dans la div interne */
}
</style>
<div class="container02">
<div class="center02">
Bloc centré verticalement et horizontalement<br>
avec position et tranform
</div>
</div>
centrer4
Centrer une image en arrière-plan dans le body
Fonctionne quelles que soient les dimensions de l'image.
Attention : s'il y a une barre de menu en haut, l'image n'est pas décalée vers le bas, donc elle n'est pas complètement centrée sur l'espace visible.
https://www.w3schools.com/cssref/pr_background-position.asp
Source
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black; /* couleur visible, non couverte par une image plus petite que l'écran */
background-image:url(http://gangand.net/mm/mnu/wallpapers/wp02.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
/* version shorthand */
/* background: black url(http://gangand.net/mm/mnu/wallpapers/wp10.jpg) no-repeat fixed center; */
/* background: lightblue url("img_tree.gif") no-repeat fixed center; */
}
</style>
</head>
<body>
</body>
</html>
