Créer un accordéon (messages) - Page 5 Bouton_activeCréer un accordéon (messages) - Page 5 Bouton_hoverCréer un accordéon (messages) - Page 5 Fb-hoverCréer un accordéon (messages) - Page 5 Fb-active
AccueilForumÉquipe 
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!

Derniers sujets
» Fiche de Présentation RPG
Créer un accordéon (messages) - Page 5 EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Créer un accordéon (messages) - Page 5 EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Créer un accordéon (messages) - Page 5 EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Créer un accordéon (messages) - Page 5 EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Créer un accordéon (messages) - Page 5 EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Créer un accordéon (messages) - Page 5 EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Créer un accordéon (messages) - Page 5 EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Créer un accordéon (messages) - Page 5 EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le deal à ne pas rater :
Cartes Pokémon : la prochaine extension Pokémon sera EV6.5 Fable ...
Voir le deal

CSSActif :: Corbeille :: Archives de CSSActif :: Tutoriels & CodesPartagez
 

Créer un accordéon (messages)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2, 3, 4, 5
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Créer un accordéon (messages) - Page 5 Empty
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
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptySam 26 Fév 2011, 12:38
Revenir en haut Aller en bas
http://twilightobsessionfr.com
Steff
Steff
{ Membre }
{ Membre }

Féminin Messages : 41



Créer un accordéon (messages) - Page 5 Empty
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.
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 14:56
Revenir en haut Aller en bas
Tupac
Tupac
{ Membre actif }
{ Membre actif }

Masculin Messages : 368



Créer un accordéon (messages) - Page 5 Empty
Bonsoir

J'ai le même problème je suis aussi chez Archive-Host il vous suffit de patienter
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 15:15
Revenir en haut Aller en bas
http://twilightobsessionfr.com
Steff
Steff
{ Membre }
{ Membre }

Féminin Messages : 41



Créer un accordéon (messages) - Page 5 Empty
Oui j'ai vu, on va être patient alors Very Happy Ç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.
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 15:19
Revenir en haut Aller en bas
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Créer un accordéon (messages) - Page 5 Empty
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
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 17:23
Revenir en haut Aller en bas
Phantasmagoria
Phantasmagoria
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1636



Créer un accordéon (messages) - Page 5 Empty
    Hello ^^

    @ Indie Rhapsody => Tu peux nous montrer un aperçu? Parce que je pense que j'ai eu le même problème ^^'
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 17:36
Revenir en haut Aller en bas
TheAviation
{ Membre }
{ Membre }

Masculin Messages : 9



Créer un accordéon (messages) - Page 5 Empty
Merci beaucoup pour ce tutoriel qui m'a bien servis ! Smile
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyDim 27 Fév 2011, 17:46
Revenir en haut Aller en bas
http://uop-return.forumactif.org/forum.htm
.Lucky_dream ♥
.Lucky_dream ♥
{ Membre }
{ Membre }

Féminin Messages : 89



Créer un accordéon (messages) - Page 5 Empty
Je n'y arrive vraiment pas, j'ai tout essayé, je ne comprends rien. l'effect accordéon ne fonctionne pas
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyLun 28 Fév 2011, 09:31
Revenir en haut Aller en bas
Hiro
Hiro
Ninja Codeur
Ninja Codeur

Masculin Messages : 1179



Créer un accordéon (messages) - Page 5 Empty

Yop'

Codes + aperçu stp'

Tu as peut-être fait une erreur Bravo !
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyLun 28 Fév 2011, 09:33
Revenir en haut Aller en bas
http://uop-return.forumactif.org/forum.htm
.Lucky_dream ♥
.Lucky_dream ♥
{ Membre }
{ Membre }

Féminin Messages : 89



Créer un accordéon (messages) - Page 5 Empty
j'ai tout supprimé tellement ça m'a pris la tête
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyLun 28 Fév 2011, 11:05
Revenir en haut Aller en bas
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Créer un accordéon (messages) - Page 5 Empty
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

Créer un accordéon (messages) - Page 5 A27012918ee80c686fc6aaaa6ba7e89220110301135425
(vignette cliquable)
et quand je passe la souris dessus; tout se met bien en place comme ça


Créer un accordéon (messages) - Page 5 Acd69bcb0a6009fe0b12859223fd730b20110301135425
(vignette cliquable)
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyMar 01 Mar 2011, 09:55
Revenir en haut Aller en bas
Hiro
Hiro
Ninja Codeur
Ninja Codeur

Masculin Messages : 1179



Créer un accordéon (messages) - Page 5 Empty
Peut-tu nous passer tes codes stp' Bravo !
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyMar 01 Mar 2011, 10:06
Revenir en haut Aller en bas
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Créer un accordéon (messages) - Page 5 Empty
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 ^_^
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyMar 01 Mar 2011, 13:27
Revenir en haut Aller en bas
Tupac
Tupac
{ Membre actif }
{ Membre actif }

Masculin Messages : 368



Créer un accordéon (messages) - Page 5 Empty
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:
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyMar 01 Mar 2011, 21:22
Revenir en haut Aller en bas
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Créer un accordéon (messages) - Page 5 Empty
L'erreur était donc là!
Merci beaucoup, ça marche parfaitement maintenant =D
<3
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyMer 02 Mar 2011, 19:47
Revenir en haut Aller en bas
http://uop-return.forumactif.org/forum.htm
.Lucky_dream ♥
.Lucky_dream ♥
{ Membre }
{ Membre }

Féminin Messages : 89



Créer un accordéon (messages) - Page 5 Empty
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
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptySam 05 Mar 2011, 09:18
Revenir en haut Aller en bas
Tupac
Tupac
{ Membre actif }
{ Membre actif }

Masculin Messages : 368



Créer un accordéon (messages) - Page 5 Empty
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:
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptySam 05 Mar 2011, 09:56
Revenir en haut Aller en bas
http://uop-return.forumactif.org/forum.htm
.Lucky_dream ♥
.Lucky_dream ♥
{ Membre }
{ Membre }

Féminin Messages : 89



Créer un accordéon (messages) - Page 5 Empty
ahh super merci ça fonctionne
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptySam 05 Mar 2011, 11:29
Revenir en haut Aller en bas
http://kenryoku.frenchboard.com/forum.htm
Petit Démon Rêveur
Petit Démon Rêveur
{ Membre }
{ Membre }

Féminin Messages : 42



Créer un accordéon (messages) - Page 5 Empty
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.
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 EmptyLun 07 Mar 2011, 18:13
Revenir en haut Aller en bas
Contenu sponsorisé




Créer un accordéon (messages) - Page 5 Empty
MessageSujet: Re: Créer un accordéon (messages)   Créer un accordéon (messages) - Page 5 Empty
Revenir en haut Aller en bas
 

Créer un accordéon (messages)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 5 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5

 Sujets similaires

-
» Créer un accordéon vertical (messages)
» Créer un Accordéon
» Créer un Accordéon Vertical
» Questions sur le tuto "Créer un accordéon vertical"
» Créer une ancre (messages)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Tutoriels & Codes-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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 | Signaler un abus | Forum gratuit