C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Créer un Accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



Pour toute question concernant ce tutoriel, ouvrez un sujet avec votre question et un lien vers le présent tutoriel dans la section suivante, merci : Aide CSS&HTML

Créer un Accordéon

Niveau: Difficile | Par: Kaiji | Validé par: Kaiji | En date du: 17/06/2010

Bonjour ! Smile
Dans ce tutoriel, je vais vous apprendre à effectuer un accordéon (dans votre page d'accueil uniquement). Vous y trouverez l'exemple dans le lien suivant, qui est le lien créateur du script :
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
L'accordéon est la création de Dynamic Drive, ce script n'appartient pas à CSSActif. © Je tiens à préciser, avant même de commencer, que ce code n'est pas valide sous Internet Explorer !

{ I - Le CSS

Comme tout script, l'Accordéon a un CSS qui lui est propre. Dans un premier temps, il vous faudra donc mettre le code suivant dans votre feuille de style (CSS) et l'arranger selon vos goûts.

Code:
.haccordion{
padding: 0;
width: 800px;
}


.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}


.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}

#hc1 li{
margin:0 0px 0 0;
width: 800px;
}

#hc1 li .hpanel{
padding: 0px;
background: transparent;
}

.haccordion li .hpanel{
width: 20px;
height: 20px;
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}

width: 800px; représente la longueur maximale de votre accordéon, lorsqu'un panneau est ouvert et les autres repliés. Veillez à ne pas mettre une valeur trop grande car ça déformerait votre page, et n'en mettez pas une trop petite non plus si vous ne souhaitez pas voir votre accordéon coupé de manière très inesthétique...
overflow: hidden; / display: block; / float: left; sont 3 valeurs qu'il ne faut surtout pas toucher, puisqu'elles représentent l'emplacement de l'accordéon (la superposition des images, etc...)
Margin et padding représentent l'espace entre les différents panneaux de l'accordéon. Si vous n'en voulez pas, laissez tout simplement 0px.
.haccordion li représente l'apparence globale de l'accordéon, à vous de modifier les valeurs de height (hauteur) et width (longueur) selon ce que vous voulez.
hpanel apparaît lorsque le panneau est ouvert. Haccordion li .hpanel correspond donc à l'apparence globale de l'accordéon une fois un panneau ouvert, et hc1 li .hpanel correspond à l'apparence d'un panneau lorsqu'il est ouvert. A vous de jouer, encore une fois, avec width et height.

C'est tout pour la partie CSS, mais il nous reste encore 3 parties à voir.

{ II - La Page HTML

La page HTML se trouve dans PA > Modules > Gestion de pages HTML
Créez-en une nouvelle, et copiez/collez le code suivant sans y apporter la moindre modification :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
<!--Make sure your page contains a valid doctype at the very top-->

<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type="text/javascript">

haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
  accordionid: 'hc2', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
  selectedli: [-1, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: true //<- No comma following very last setting!
})

</script>

<script type="text/javascript" src="
http://pmsc.free.fr/J03/1045165647.js"></script>
</script>
</body>
</html>

C'est tout pour la page HTML. Ca va, pas trop dur ! =)

{ III - La Page d'Accueil

Bien sûr, il faut bien que le code apparaisse, et donc que l'accordéon soit codé quelque part... Et bien c'est dans la page d'accueil de votre forum. Sous-catégorie "Généralités" dans l'onglet "Affichage" de votre panneau d'admin.
Collez-y ce code :

Code:
<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:VALEURpx; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="IMAGE" alt=""></a></div></li></ul></div>

Dans ce code, nous n'allons modifier que ceci paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'}, et ceci :

Code:
<li style="overflow: hidden; width:VALEURpx; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="IMAGE" alt=""></a></div></li>

paneldimensions correspond aux dimensions des panneaux :
peekw = largeur lorsque le panneau est fermé
fullw = largeur lorsque le panneau est ouvert
h = height = hauteur

Le deuxième code correspond au code d'un panneau (n'oubliez pas de modifier "VALEUR" qui correspond encore une fois à la largeur totale du panneau). Pour rajouter un panneau, il vous faut copier/coller ce code-là autant de fois que vous voulez de panneau, entre :

Code:
<div id="hc1" class="haccordion"><ul></ul></div>

Notez que vous pouvez retirer
Code:
<a href="LIEN" target="_blank"></a>
si vous ne souhaitez pas introduire de lien dans votre panneau, et que vous pouvez y mettre Image + TEXTE en modifiant ceci
Code:
<img src="IMAGE" alt="">
par ceci
Code:
<img src="IMAGE" style="float:left; padding-right:8px; width:LARGEUR DE L'IMAGEpx; height:HAUTEUR DE L'IMAGEpx" />BLABLABLABLABLA
Sinon vous pourrez complètement enlever
Code:
<img src="IMAGE" alt="">
si vous ne voulez pas d'image dans votre accordéon.
Voilà pour la page d'accueil ! Et maintenant, la dernière partie.

{ IV - Le script

Afin que le coulissement fonctionne, il faut bien sûr placer un script dans un template. Rendez-vous sur http://www.dynamicdrive.com/dynamicindex17/haccordion.htm et cliquez sur
Citation :
haccordion.js (one variable near the top inside this file you should customize)
Une série de codes apparaissent alors à votre écran. Copiez/collez le tout dans le bloc-note et enregistrez votre fichier au format .js
Rendez-vous ensuite sur un site d'hébergement acceptant le format Javascript, par exemple http://www.archive-host.com , inscrivez-vous et hébergez votre fichier. Prenez le lien qu'il vous donne, puis rendez-vous dans les templates de votre forum (onglet affichage). Dans le template "Overall_header_new" cherchez la balise
Code:
</head>
et juste avant, collez ce code-ci en y mettant votre lien archive-host (ou autre, selon l'hébergeur)

Code:
<script type="text/javascript" src="TON LIEN ARCHIVE HOST"></script>

Enregistrez, publiez le template, et votre accordéon est fait !


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.


Dernière édition par Kaiji le Mer 16 Nov 2011, 12:41, édité 6 fois
MessageSujet: Créer un Accordéon   Jeu 17 Juin 2010, 08:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


NOTE AUX DEBUTANTS : Nous vous prions de bien vouloir commencer par le commencement. Ce tutoriel avait été la source de beaucoup de problèmes dans la mesure où beaucoup l'ayant essayé ne s'en sortaient plus avec leurs codes. Si vous n'avez pas le niveau, entraînez-vous sur d'autres codes plus accessibles et revenez vous attaquer à celui-ci lorsque vous serez plus aptes à prendre le taureau par les cornes ! Cela vous évitera une crise de nerfs et l'épuisement des codeurs. Merci de votre compréhension.

Q
Sans passer le curseur sur l'accordéon, je vois ma première image, un espace, la moitié de la seconde, et la troisième rejetée sous les autres... Comment ça se fait ?

R
C'est à toi de faire les réglages en fonction de tes images avec les infos que j'ai données dans le tuto. La 3ème image se met en-dessous parce que la taille que tu as définie à l'accordéon par rapport aux images est trop petite, et il doit rejeter la 3ème image en-dessous pour respecter la taille donnée. Un conseil, commence par modifier les valeurs que tu as mises dans ta page d'accueil, quand ce sera fait, tu n'auras quasiment pas à toucher le css, voire pas du tout en fonction de tes réglages. =)


Q
Est-ce qu'on pourrait avoir une taille conseillée ?

R
Non, malheureusement. Tout dépend des images que vous choisissez, il vous faut donc bidouiller vous-même.


Q
L'accordéon ne fonctionne pas sous IE, alors les membres qui utilisent ce navigateur le verront comment ?

R
Les membres sous IE verront les panneaux les uns en dessous des autres.


Q
Est-ce que les accordéons marchent dans les messages ?

R
Seulement s'ils sont intégrés dans une iframe.


Q
J'ai crée l'accordéon mais je voulais savoir si c'est possible de faire toute une page d'accueil avec? Genre au lieu des images, j'aurai des petits tableaux?

R
Oui bien sûr.


Q
Le coulissement ne se fait pas, comment ça se fait ?

R
Réhébergez le script et vérifiez que votre template overall_header a bien été publié.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Créer un Accordéon   Mer 16 Nov 2011, 12:40
Revenir en haut Aller en bas
 

Créer un Accordéon

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» V accordéons et amplis
» Logiciel d'accordéon
» Roland l'odyssé de l'accordéon le 06 10 2011
» Infos pour racoorder mon FR1B avec un E66 à boutons accordéo
» Cherche Accordéon Roland

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit