CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Créer un accordéon (messages) | |
| |
Indie Rhapsody
{ Membre }
Messages : 11
| Bonjour bonjour! Tout d'abord merci pour le tuto *_* Je trouve l'idée absolument géniale <3 Par contre, ce qui serait encore plus génial, c'est que ça marche correctement xD Mes panneaux se mettent les uns aux dessous des autres, et il faut que je passe ma souris dessus, pour qu'ils se mettent en place, donc bon c'est pas trop l'effet recherché xD J'ai un second souci aussi: ma PA est fait sous forme de tableau, et l'accordéon le déforme en fait, et j'ai beau chercher, je comprends pas pourquoi xD La PA: - Code:
-
<center><img src="http://www.weplug.com/images_1/9807057472b560d58527a2c0d408c93b20110225214934.jpg"><table width="95%"><tr><td width="60%" colspan="2" valign="top"><span class="pa_title">Help In Design, c'est quoi?</span><div class="pa_block"> Vous avez<i> Photofiltre, Photofiltre Studio, Unfreez, The Gimp</i> ou encore <i>Photoshop</i>? Vous voulez créer un design, un <i>CSS</i>, ou un avatar ? <b>Help in Design</b> est fait pour vous ! Des professeurs sont à votre écoute pour vous faire progresser dans votre domaine, et vous donnent des cours bénévolement ! De plus vous aurez l'occasion de participer à des duels, des concours, et d'autres jeux à base de créations graphiques ! Venez nous retrouver sur un forum où l'ambiance est toujours au rendez-vous ! <br>HID est le forum de référence dans le milieu des cours de graphisme depuis près de<b> 3 ans.</b></div></td>
<td valign="top" width="20%"> <span class="pa_title">Navigation</span><div class="pa_block">
<a href="http://help-in-design.1fr1.net/reglement-f79/reglement-du-forum-t1.htm"><span class="navig">Règlement</span></a> <br><a href="http://help-in-design.1fr1.net/informations-f110/"><span class="navig">Informations</span></a><br> <a href="http://help-in-design.1fr1.net/presentations-f3/"><span class="navig">Présentation</span></a><br> <a href="http://help-in-design.1fr1.net/demande-de-cours-f32/"><span class="navig"> Etre élève</span></a><br> <a href="http://help-in-design.1fr1.net/devenir-professeur-f33/"><span class="navig"> Devenir Prof</span></a>
</div> </td>
<td valign="top" width="20%"><a href=""><img src="http://www.weplug.com/images_1/d953cbe362c7b95dd384515eb5f987ca20110226155240.gif" alt="spotlight"></a></td></tr>
<tr><td valign="top" width="35%"><span class="pa_title">Top Partenaires</span><div class="pa_block">
<a href="http://thegreat-escape.ze.cx/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://remember-austen.forumactif.com/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://starlight-night.aceboard.fr/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://graphix-illusion.fr/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://acide-edulcore.forumperso.com/forum.htm"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://berkeley-u.forum-actif.net/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://you-can.forumactif.com/forum.htm"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <a href="http://yellow-tricycle.forumactif.org/"><img src="http://img7.hostingpics.net/pics/542331Bouton.png" border="0" ></a> <br></center><div align="right"> <a href="http://help-in-design.1fr1.net/partenariats-f29/nos-partenaires-t4.htm">Autres</a> - <a href="http://help-in-design.1fr1.net/partenariats-f29/demande-de-partenariat-t3.htm">Devenir Partenaire</a></div>
</div><br>
<span class="pa_title">Link Us</span><div class="pa_block">
<center><img src="http://img4.hostingpics.net/pics/716472Partenariat1.gif"> <img src="http://img4.hostingpics.net/pics/739012Partenariat2.gif"> </center>
</div></td>
<td colspan="2" valign="top" width="45%"><span class="pa_title">Informations & Nouveautés</span><div class="pa_block"> <b> Le forum s'offre un nom de domaine, et est maintenant disponible à cette adresse: <a href="http://www.help-in-design.com">http://www.help-in-design.com</a></b></font> <br> Nouveau design, sur la série à succès How I Met you Mother, venez la commenter <a href="http://help-in-design.1fr1.net/t7173-version-du-06-02-2011">ici</a> <br> Partenariat spécial entre HID et TF; <a href="http://help-in-design.1fr1.net/t7174-concours-en-partenariat-avec-twilight-france#176442">en savoir plus</a></div></td> <td valign="top" width="20%"> <span class="pa_title">Les cours</span><div class="pa_block"> <table style="width: 90%"> <tr> <td style="border:1px;"><center><b>PS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PFS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PF</b></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>GIMP</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>CSS</b></center></td> <td style="border:1px;"><center><i>Fermé</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>Animation</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>HTML</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> </table></div></td></tr><tr> <td valign="top" width="35%"><div class="pa_block">Forum administré par Follk, Indie Rhapsody, Aloysia*, Hysteriaa et Map of the Problematique Forum sous copyright. Design par Indie Rhapsody & Map of the Problematique Optimisé sur Mozilla Firefox et Google Chrome </div></td><td colspan="3" valign="top" width="65%"> <span class="pa_title">Le Staff</span> <div class="gensmall"> <br>
<script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'100px', h:'108px'}, 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:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Follk" /></div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Indie Rhapsody" /></div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Aloysia*" /></div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Map Of The Problematique" /> </div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="LittleSum'" /> </div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="The Devil Rebellion" /></div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Ailiz" /> </div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="MoodyTryMe" /> </div></li>
<li style="overflow: hidden; width:600px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="who's next?" /></div></li></ul></div> </td></tr></table> </center> Le CSS - Code:
-
.haccordion{ padding: 0; width: 550px; }
.haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; }
.haccordion li{ margin: 0; padding: 0; display: block; width: 100%; height: 115px; overflow: hidden; float: left; }
#hc1 li{ margin:0 0px 0 0; width: 550px; }
#hc1 li .hpanel{ padding: 0px; background: transparent; border: #ffffff solid 4px; }
.haccordion li .hpanel{ width: 100px; height: 100px; }
#hc1 li {width: 118px; height: 124px; } #hc1 li .hpanel{width: 205px; height: 124px; }
J'espère qu'il ne manque rien, et que vous pourrez m'aider ^^' Merci d'avance <3 | | |
| | | Steff
{ Membre }
Messages : 41
| C'est surement dû à la taille de tes images, j'ai eu le même problème. Par contre tes images dans ton accueil font 600px et je vois que sur ta feuille CSS tu as la taille à 550px. Essaies de changer cette taille (dans le CSS par 600px).
Moi par contre, j'ai un petit problème, jusqu'à hier tout fonctionnait bien, aujourd'hui mon accordéon reste figé. J'ai été voir sur Harchive Host et ils ont un problème. J'ai essayé d'uploader mon fichier js ailleurs mais ça ne fonctionne pas plus. Est ce que quelqu'un connaitrait un hébergeur de fichier js ? Je connais celui de free, mais maintenant ils gardent les fichiers un mois. | | |
| | | Tupac
{ Membre actif }
Messages : 368
| Bonsoir
J'ai le même problème je suis aussi chez Archive-Host il vous suffit de patienter | | |
| | | Steff
{ Membre }
Messages : 41
| Oui j'ai vu, on va être patient alors Ça m'embête je voulais installer mon nouveau thème pour le 1er Mars lol. Et sinon, j'ai vu sur le tuto qu'il était marqué que ça ne fonctionnait pas sur IE mais j'ai fais le test et ça fonctionnait bien, ainsi que sur Chrome, Opéra et Safari. | | |
| | | Indie Rhapsody
{ Membre }
Messages : 11
| Merci Steff =D Par contre, j'ai harmoniser toutes les valeurs, et mon accordéon passe largement sur ma PA sur une seule ligne, mais tout s'obstine à mal fonctionner à chaque actualisation, un peu gênant ^^'
Mais ça ne déforme plus ma PA, c'est déjà un bon point xD
De toute façon, Archive Host ayant un souci: bloqué jusqu'à réparation >< xD
| | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Hello ^^
@ Indie Rhapsody => Tu peux nous montrer un aperçu? Parce que je pense que j'ai eu le même problème ^^' | | |
| | | TheAviation
{ Membre }
Messages : 9
| Merci beaucoup pour ce tutoriel qui m'a bien servis ! | | |
| | | .Lucky_dream ♥
{ Membre }
Messages : 89
| Je n'y arrive vraiment pas, j'ai tout essayé, je ne comprends rien. l'effect accordéon ne fonctionne pas | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Yop' Codes + aperçu stp' Tu as peut-être fait une erreur | | |
| | | .Lucky_dream ♥
{ Membre }
Messages : 89
| j'ai tout supprimé tellement ça m'a pris la tête | | |
| | | Indie Rhapsody
{ Membre }
Messages : 11
| - Massive8despair a écrit:
Hello ^^
@ Indie Rhapsody => Tu peux nous montrer un aperçu? Parce que je pense que j'ai eu le même problème ^^' Quand j'arrive sur la page, ça me donne ça: chaque icone correspond à un panneau (vignette cliquable) et quand je passe la souris dessus; tout se met bien en place comme ça (vignette cliquable) | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Peut-tu nous passer tes codes stp' | | |
| | | Indie Rhapsody
{ Membre }
Messages : 11
| Il était déjà sur la page précédente, mais comme il a été un peu modifié... hop le voila: PA - Code:
-
<script type="text/javascript" src="http://www.archive-host.com/files/870176/e9d39ac351c14e8f00ae91d287bbc2e684bf8f71/gradualfader.js">
/*********************************************** * Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/
</script>
<center><img src="http://www.weplug.com/images_1/9807057472b560d58527a2c0d408c93b20110225214934.jpg"><table width="90%"><tr><td width="60%" colspan="2" valign="top"><span class="pa_title">Help In Design, c'est quoi?</span><div class="pa_block"> Vous avez<i> Photofiltre, Photofiltre Studio, Unfreez, The Gimp</i> ou encore <i>Photoshop</i>? Vous voulez créer un design, un <i>CSS</i>, ou un avatar ? <b>Help in Design</b> est fait pour vous ! Des professeurs sont à votre écoute pour vous faire progresser dans votre domaine, et vous donnent des cours bénévolement ! De plus vous aurez l'occasion de participer à des duels, des concours, et d'autres jeux à base de créations graphiques ! Venez nous retrouver sur un forum où l'ambiance est toujours au rendez-vous ! <br>HID est le forum de référence dans le milieu des cours de graphisme depuis près de<b> 4 ans.</b></div></td> <td valign="top" width="20%"><a href="" class="gradualfader"><img src="http://www.weplug.com/images_1/d953cbe362c7b95dd384515eb5f987ca20110226155240.gif" alt="spotlight"></a></td> <td valign="top" width="20%"> <span class="pa_title">Navigation</span> <center><br> <a href="http://help-in-design.1fr1.net/reglement-f79/reglement-du-forum-t1.htm"><span class="navig">Règlement</span></a> <a href="http://help-in-design.1fr1.net/informations-f110/"><span class="navig">Informations</span></a> <a href="http://help-in-design.1fr1.net/presentations-f3/"><span class="navig">Présentation</span></a> <a href="http://help-in-design.1fr1.net/demande-de-cours-f32/"><span class="navig"> Etre élève</span></a> <a href="http://help-in-design.1fr1.net/devenir-professeur-f33/"><span class="navig"> Devenir Prof</span></a> </center>
</td>
</tr>
<tr><td valign="top" width="40%"><span class="pa_title">Top Partenaires</span><div class="pa_block">
<a href="http://thegreat-escape.ze.cx/" class="gradualfader"><img src="http://www.weplug.com/images_1/f835d92d8b195eb8cb72c5530357640120110228173240.jpg" class="affi"></a> <a href="http://remember-austen.forumactif.com/" class="gradualfader"><img src="http://www.weplug.com/images_1/b432c632f970a4a690aa47a58d8b5aeb20110228173241.jpg" class="affi"></a>
<a href="http://berkeley-u.forum-actif.net/"class="gradualfader"><img src="http://www.weplug.com/images_1/7c9dba4aa1a057d29e0dacb879e03aa020110228173241.jpg" class="affi"></a>
<a href="http://you-can.forumactif.com/forum.htm" class="gradualfader"><img src="http://www.weplug.com/images_1/8ab60a19a63a0e42a84546adfd17796120110228173241.jpg" class="affi"></a>
<a href="http://yellow-tricycle.forumactif.org/" class="gradualfader"><img src="http://www.weplug.com/images_1/9021f6b776cd6d6c07dd7983e2f0f91b20110228173241.jpg" class="affi"></a>
<br></center><div align="right"> <a href="http://help-in-design.1fr1.net/partenariats-f29/nos-partenaires-t4.htm">Autres</a> - <a href="http://help-in-design.1fr1.net/partenariats-f29/demande-de-partenariat-t3.htm">Devenir Partenaire</a></div>
</div><br>
<span class="pa_title">Link Us</span><div class="pa_block">
<center><img src="http://www.weplug.com/images_1/91be92f3f936ab72464c5ad5e24cec7920110228171202.jpg" class="gradualfader"> <img src="http://www.weplug.com/images_1/fe26fbaebaefefffc5c1efd37c4675b920110228171202.jpg" class="gradualfader"> </center>
</div></td>
<td colspan="2" valign="top" width="45%"> <span class="pa_title">Informations & Nouveautés</span><div class="systeme_onglets">
<div class="onglets" align="right"> <span class="onglet_0 onglet" id="onglet_01" onmouseover="javascript:change_onglet('01');">01</span> <span class="onglet_0 onglet" id="onglet_02" onmouseover="javascript:change_onglet('02');">02</span> <span class="onglet_0 onglet" id="onglet_03" onmouseover="javascript:change_onglet('03');">03</span> </div> <div class="contenu_onglets"> <div class="pa_block" width="350px"> <div class="contenu_onglet" id="contenu_onglet_01"><a href=""><img src="http://www.weplug.com/images_1/0e2be758799c8173979c7c840c5a504820110227000312.jpg";></a></div>
<div class="contenu_onglet" id="contenu_onglet_02"><a href=""><img src="http://www.weplug.com/images_1/69cdd4140ca9611dabb2f310f4745d9b20110227215205.jpg"></a></div>
<div class="contenu_onglet" id="contenu_onglet_03"><a href=""><img src="http://www.weplug.com/images_1/c23942ec5346e19a13a2c94e1ee9eb9c20110227215206.jpg"></a></div> </div></div> </div></div> <script type="text/javascript"> //<!-- var anc_onglet = '01'; change_onglet(anc_onglet); //--> </script>
</td> <td valign="top" width="15%"> <span class="pa_title">Les cours</span><div class="pa_block"> <table style="width: 90%"> <tr> <td style="border:1px;"><center><b>PS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PFS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PF</b></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>GIMP</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>CSS</b></center></td> <td style="border:1px;"><center><i>Fermé</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>Animation</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>HTML</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> </table></div></td></tr><tr> <td valign="top" width="40%"><div class="pa_block">Forum administré par <B>Follk</b>, <b>Indie Rhapsody, Aloysia*,</b> et <b>Map of the Problematique.</b> Design par <i>Indie Rhapsody</i>. <br>Forum sous copyright. Optimisé sur Mozilla Firefox et Google Chrome en 1280*1024 et 1600*900</div></td><td colspan="3" valign="top" width="60%"> <span class="pa_title">Le Staff</span> <div class="gensmall"> <br>
<script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'100px', h:'100px'}, 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:380px; display: block;"><div class="hpanel"> <a class="info"><img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Follk" /><span><b> Follk</b><br> <a href="">La contacter?</a></span></a></div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Indie Rhapsody" /></div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Aloysia*" /></div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Map Of The Problematique" /> </div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="LittleSum'" /> </div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="The Devil Rebellion" /></div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Ailiz" /> </div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="MoodyTryMe" /> </div></li>
<li style="overflow: hidden; width:380px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Sunlight" /></div></li> </ul></div> </td></tr></table> </center>
<script type="text/javascript"> gradualFader.init() //activate gradual fader </script>
CSS - Code:
-
.haccordion{ padding: 0; width: 380px; }
.haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; }
.haccordion li{ margin: 0; padding: 0; display: block; width: 100%; height: 100px; overflow: hidden; float: left; }
#hc1 li{ margin:0 0px 0 0; width: 380px; }
#hc1 li .hpanel{ padding: 0px; background: transparent; border: #ffffff solid 4px; }
.haccordion li .hpanel{ width: 100px; height: 100px; }
#hc1 li {width: 100px; height: 100px; } #hc1 li .hpanel{ width: 100px; height: 100px; }
Je pense plus ou moins me débrouiller en codage, mais là,je dois avouer que ça me dépasse T_T Et j'ai beau faire le tour du code en long en large et en travers... je vois pas où ça coince =/ Merci en tout cas ^_^ | | |
| | | Tupac
{ Membre actif }
Messages : 368
| Bonsoir Indie Rhapsody Je me suis permis de modifier votre code. J'ai modifié la largeur des panneaux du code de la page d'accueil,vous aviez mis 380px alors qu'il fallait mettre la largeur des panneaux refermé soit 30px. - Spoiler:
- Code:
-
<script type="text/javascript" src="http://www.archive-host.com/files/870176/e9d39ac351c14e8f00ae91d287bbc2e684bf8f71/gradualfader.js">
/*********************************************** * Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/
</script>
<center><img src="http://www.weplug.com/images_1/9807057472b560d58527a2c0d408c93b20110225214934.jpg"><table width="90%"><tr><td width="60%" colspan="2" valign="top"><span class="pa_title">Help In Design, c'est quoi?</span><div class="pa_block"> Vous avez<i> Photofiltre, Photofiltre Studio, Unfreez, The Gimp</i> ou encore <i>Photoshop</i>? Vous voulez créer un design, un <i>CSS</i>, ou un avatar ? <b>Help in Design</b> est fait pour vous ! Des professeurs sont à votre écoute pour vous faire progresser dans votre domaine, et vous donnent des cours bénévolement ! De plus vous aurez l'occasion de participer à des duels, des concours, et d'autres jeux à base de créations graphiques ! Venez nous retrouver sur un forum où l'ambiance est toujours au rendez-vous ! <br>HID est le forum de référence dans le milieu des cours de graphisme depuis près de<b> 4 ans.</b></div></td> <td valign="top" width="20%"><a href="" class="gradualfader"><img src="http://www.weplug.com/images_1/d953cbe362c7b95dd384515eb5f987ca20110226155240.gif" alt="spotlight"></a></td> <td valign="top" width="20%"> <span class="pa_title">Navigation</span> <center><br> <a href="http://help-in-design.1fr1.net/reglement-f79/reglement-du-forum-t1.htm"><span class="navig">Règlement</span></a> <a href="http://help-in-design.1fr1.net/informations-f110/"><span class="navig">Informations</span></a> <a href="http://help-in-design.1fr1.net/presentations-f3/"><span class="navig">Présentation</span></a> <a href="http://help-in-design.1fr1.net/demande-de-cours-f32/"><span class="navig"> Etre élève</span></a> <a href="http://help-in-design.1fr1.net/devenir-professeur-f33/"><span class="navig"> Devenir Prof</span></a> </center>
</td>
</tr>
<tr><td valign="top" width="40%"><span class="pa_title">Top Partenaires</span><div class="pa_block">
<a href="http://thegreat-escape.ze.cx/" class="gradualfader"><img src="http://www.weplug.com/images_1/f835d92d8b195eb8cb72c5530357640120110228173240.jpg" class="affi"></a> <a href="http://remember-austen.forumactif.com/" class="gradualfader"><img src="http://www.weplug.com/images_1/b432c632f970a4a690aa47a58d8b5aeb20110228173241.jpg" class="affi"></a>
<a href="http://berkeley-u.forum-actif.net/"class="gradualfader"><img src="http://www.weplug.com/images_1/7c9dba4aa1a057d29e0dacb879e03aa020110228173241.jpg" class="affi"></a>
<a href="http://you-can.forumactif.com/forum.htm" class="gradualfader"><img src="http://www.weplug.com/images_1/8ab60a19a63a0e42a84546adfd17796120110228173241.jpg" class="affi"></a>
<a href="http://yellow-tricycle.forumactif.org/" class="gradualfader"><img src="http://www.weplug.com/images_1/9021f6b776cd6d6c07dd7983e2f0f91b20110228173241.jpg" class="affi"></a>
<br></center><div align="right"> <a href="http://help-in-design.1fr1.net/partenariats-f29/nos-partenaires-t4.htm">Autres</a> - <a href="http://help-in-design.1fr1.net/partenariats-f29/demande-de-partenariat-t3.htm">Devenir Partenaire</a></div>
</div><br>
<span class="pa_title">Link Us</span><div class="pa_block">
<center><img src="http://www.weplug.com/images_1/91be92f3f936ab72464c5ad5e24cec7920110228171202.jpg" class="gradualfader"> <img src="http://www.weplug.com/images_1/fe26fbaebaefefffc5c1efd37c4675b920110228171202.jpg" class="gradualfader"> </center>
</div></td>
<td colspan="2" valign="top" width="45%"> <span class="pa_title">Informations & Nouveautés</span><div class="systeme_onglets">
<div class="onglets" align="right"> <span class="onglet_0 onglet" id="onglet_01" onmouseover="javascript:change_onglet('01');">01</span> <span class="onglet_0 onglet" id="onglet_02" onmouseover="javascript:change_onglet('02');">02</span> <span class="onglet_0 onglet" id="onglet_03" onmouseover="javascript:change_onglet('03');">03</span> </div> <div class="contenu_onglets"> <div class="pa_block" width="350px"> <div class="contenu_onglet" id="contenu_onglet_01"><a href=""><img src="http://www.weplug.com/images_1/0e2be758799c8173979c7c840c5a504820110227000312.jpg";></a></div>
<div class="contenu_onglet" id="contenu_onglet_02"><a href=""><img src="http://www.weplug.com/images_1/69cdd4140ca9611dabb2f310f4745d9b20110227215205.jpg"></a></div>
<div class="contenu_onglet" id="contenu_onglet_03"><a href=""><img src="http://www.weplug.com/images_1/c23942ec5346e19a13a2c94e1ee9eb9c20110227215206.jpg"></a></div> </div></div> </div></div> <script type="text/javascript"> //<!-- var anc_onglet = '01'; change_onglet(anc_onglet); //--> </script>
</td> <td valign="top" width="15%"> <span class="pa_title">Les cours</span><div class="pa_block"> <table style="width: 90%"> <tr> <td style="border:1px;"><center><b>PS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PFS</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>PF</b></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>GIMP</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>CSS</b></center></td> <td style="border:1px;"><center><i>Fermé</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>Animation</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> <tr> <td style="border:1px;"><center><b>HTML</b></center></td> <td style="border:1px;"><center><i>ouvert</i></center></td> </tr> </table></div></td></tr><tr> <td valign="top" width="40%"><div class="pa_block">Forum administré par <B>Follk</b>, <b>Indie Rhapsody, Aloysia*,</b> et <b>Map of the Problematique.</b> Design par <i>Indie Rhapsody</i>. <br>Forum sous copyright. Optimisé sur Mozilla Firefox et Google Chrome en 1280*1024 et 1600*900</div></td><td colspan="3" valign="top" width="60%"> <span class="pa_title">Le Staff</span> <div class="gensmall"> <br>
<script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'100px', h:'100px'}, 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:30px; display: block;"><div class="hpanel"> <a class="info"><img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Follk" /><span><b> Follk</b><br> <a href="">La contacter?</a></span></a></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Indie Rhapsody" /></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Aloysia*" /></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Map Of The Problematique" /> </div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="LittleSum'" /> </div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="The Devil Rebellion" /></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Ailiz" /> </div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="MoodyTryMe" /> </div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"><a href="lien" target="_blank"> <img src="http://www.weplug.com/images_1/aaea50e7ded06455fa1634019cfeb88520110214183451.jpg" alt="Sunlight" /></div></li> </ul></div> </td></tr></table> </center>
<script type="text/javascript"> gradualFader.init() //activate gradual fader </script>
| | |
| | | Indie Rhapsody
{ Membre }
Messages : 11
| L'erreur était donc là! Merci beaucoup, ça marche parfaitement maintenant =D <3 | | |
| | | .Lucky_dream ♥
{ Membre }
Messages : 89
| Alors, j'ai un soucis, alors j'ai fais un accordéon quand je rafraichi la page, mes images sont les unes au dessus des autres et quand je passe ma souris dessus, l'accordéon se met en place. AVANT passage souris http://img52.xooimage.com/files/0/f/d/accord-on-av-2641fcb.png APRES passage souris http://img53.xooimage.com/files/9/e/7/accord-on-ap-2641f67.png PA - Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'200px', h:'320px'}, 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:350px; display: block;"><div class="hpanel"> <img src="http://img194.imageshack.us/img194/6182/brit35.png"></a></div></li>
<li style="overflow: hidden; width:350px; display: block;"><div class="hpanel"> <img src="http://img11.hostingpics.net/pics/149765e12.png"></a></div></li>
<li style="overflow: hidden; width:350px; display: block;"><div class="hpanel"> <img src="http://i19.photobucket.com/albums/b176/lil_winky/ni91.png"></a></div></li>
</ul>
</div> CSS - Code:
-
.haccordion{ padding: 0; width: 350px; }
.haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; }
.haccordion li{ margin: 0; padding: 0; display: block; width: 100%; height: 320px; overflow: hidden; float: left; }
#hc1 li{ margin:0px; }
#hc1 li .hpanel{ padding: 0px; background: transparent; }
.haccordion li .hpanel{ width: 20px; height: 30px; }
#hc1 li{width: 118px; height: 320px; } #hc1 li .hpanel{width: 205px; height: 320px; }
.hpanel { float: left; }
merci de m'aider | | |
| | | Tupac
{ Membre actif }
Messages : 368
| Bonjour .Lucky_dream Vous aviez mis 350 en largeur d'image alors qu'il fallait mettre 30 la largeur de vos images une fois fermée. - Spoiler:
- Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'200px', h:'320px'}, 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:30px; display: block;"><div class="hpanel"> <img src="http://img194.imageshack.us/img194/6182/brit35.png"></a></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"> <img src="http://img11.hostingpics.net/pics/149765e12.png"></a></div></li>
<li style="overflow: hidden; width:30px; display: block;"><div class="hpanel"> <img src="http://i19.photobucket.com/albums/b176/lil_winky/ni91.png"></a></div></li>
</ul>
</div>
| | |
| | | .Lucky_dream ♥
{ Membre }
Messages : 89
| ahh super merci ça fonctionne | | |
| | | Petit Démon Rêveur
{ Membre }
Messages : 42
| Bonsoir ! J'avais ce code de côté sans savoir si je l'utiliserais un jour et finalement je l'ai testé. J'ai réglé quelques soucis en bidouillant, mais le seul problème qui persiste c'est que le coulissement ne se fait pas. Je n'ai que des petits bouts d'images. Je pense qu'il s'agit d'un souci dans le CSS : - Code:
-
.haccordion{ padding: 0; width: 650px; }
.haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; }
.haccordion li{ margin: 0; padding: 0; display: block; width: 100%; height: 300px; overflow: hidden; float: left; }
#hc1 li{ margin:0 0px 0 0; width: 650px; }
#hc1 li .hpanel{ padding: 0px; background: transparent; }
.haccordion li .hpanel{ width: 650px; height: 300px; }
#hc1 li{width: 30px; height: 300px; } #hc1 li .hpanel{width: 120px; height: 300px; } Et le HTML des fois que j'aurais fait une bêtise : - Code:
-
<td colspan="3">Prédef<div class="gensmall"><script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'120px', h:'300px'}, 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; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/gabrie10.jpg" alt="gabriel"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/kamael10.jpg" alt="kamael"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/metatr10.jpg" alt="metatron"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/mickae10.jpg" alt="mickael"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/raphae10.jpg" alt="raphael"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/raziel10.jpg" alt="raziel"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/sandal10.jpg" alt="sandalphon"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/asmoda10.jpg" alt="asmodee"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/balial10.jpg" alt="belial"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/laviat10.jpg" alt="leviathan"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/mammon10.jpg" alt="mammon"></a></div></li> <li style="overflow: hidden; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="http://i66.servimg.com/u/f66/15/06/64/52/belzab10.jpg" alt="belzebuth"></a></div></li> </ul></div></td> Mes images ont une largeur de 120px et une hauteur de 300px. Mon template est bien publié donc je ne sais pas trop ce qui cloche ^^" Merci à qui pourra m'aider. | | |
| | | Contenu sponsorisé
| | | | | Créer un accordéon (messages) | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|