Forum test phpBB2
Général > Forum > configuration > Popup de connexion
Forum test phpBB2

(forum > description du site)
 
PortailPortail  AccueilAccueil  CalendrierCalendrier  GalerieGalerie  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  phpbb3phpbb3  invisioninvision  punbbpunbb  modernbbmodernbb  

Partagez | 
 

 accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
MlleAlys
RANG
RANG
avatar

Nom du champ profil : valeur
Messages : 66
Date d'inscription : 30/01/2014

Feuille de personnage
nom du champ: valeur
texte/liste:

MessageSujet: accordéon   Mer 20 Mai - 19:35



  Ce texte est dans la partie 1.
 

  Ce texte est dans la partie 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

  Ce texte est dans la partie 3.
 

  Ce texte est dans la partie 4.
 

Code:
<div id="accordion">
    <div id="part1">Ce texte est dans la partie 1.</div>
    <div id="part2">Ce texte est dans la partie 2.</div>
    <div id="part3">Ce texte est dans la partie 3.</div>
    <div id="part4">Ce texte est dans la partie 4.</div>
    <div id="clear"></div>
</div>

Code:
#accordion {
  display: inline-block;
  width: auto;
  margin: 50px auto;
}

#accordion div {
  float: left;
  width: 90px;
  height: 200px;
  padding: 5px;
  overflow: hidden;
  transition: all 1s ease;
}

#accordion:hover div {
  width: 20px;
  padding: 5px 2px;
}

#accordion:hover div:hover {
  width: 318px;
  padding: 5px;
  overflow: auto;
}

#part1 {
  background: blue;
}

#part2 {
  background: green;
}

#part3 {
  background: yellow;
}

#part4 {
  background: red;
}

#accordion #clear {
  float: none;
  clear: both;
  width: auto;
  height: 0;
  margin: 0;
  padding: 0;
}

_________________
signature
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://mllealys2.forumactif.org
 
accordéon
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum test phpBB2 :: Catégorie 1 :: Forum 1.2-
Sauter vers: