Question "Acordéon" Bouton_activeQuestion "Acordéon" Bouton_hoverQuestion "Acordéon" Fb-hoverQuestion "Acordéon" Fb-active
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
» Système d'onglets simple et personnalisable
Question "Acordéon" EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Question "Acordéon" EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Question "Acordéon" EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Question "Acordéon" EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Question "Acordéon" EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Question "Acordéon" EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Question "Acordéon" EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Question "Acordéon" EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -20%
Sony PULSE Elite – Casque PS5 sans fil (blanc) ...
Voir le deal
119 €

Partagez
 

Question "Acordéon"

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
Bonjours, j'ai trouver un tuto sur les "acordéons" j'ai reussi a le faire marcher , impec mais il se déroule vers la droite y a t'il moyen de le dérouler vers le bas?

code CSS :
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;
}

code PA :
Code:
<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'100px', fullw:'288px', h:'56px'},
  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:700px; height:150px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank"><img src="http://forum-orphen.forum-pro.fr/users/2413/25/03/44/avatars/2-29.png"></a></div></li>
<li style="overflow: hidden; width:700px; height:150px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=6" target="_blank"><img src="http://forum-orphen.forum-pro.fr/users/2413/25/03/44/avatars/5-49.jpg" alt=""></a></div></li>
<li style="overflow: hidden; width:700px; height:250px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=7" target="_blank"><img src="http://i30.servimg.com/u/f30/15/30/93/66/sans_t10.png" alt=""></a></div></li></ul></div>
merci de vos réponses
MessageSujet: Question "Acordéon"   Question "Acordéon" EmptyMar 06 Juil 2010, 09:58
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Bonjour.
Il manque une partit du code. Le script.
Surement un script hébergé sur serveur.
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyMar 06 Juil 2010, 14:50
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
bonsoirs, eu bin j'ai un peu pret que ça enfin c'est quel parti qu'il manque ? CSS?
car je pense avoir tous prit mais c'est pas moi qui me charge du CSS sur le forum donc pas sur d'avoir tous prit Wink
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyMar 06 Juil 2010, 15:56
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Non le script.
C'est un ajout au HTML du genre :
Code:
<script type=text/javascript" src="une adresse web"></script>
Il est possible qu'il est était ajouté au template overall_header_new, entre les balise <head> et </head>
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyMer 07 Juil 2010, 07:30
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
ah oui effectivement j'ai rajouter quelque chose dans le template je te dit sa
EDIT : je croi que c'est

Code:
<script type=text/javascript" src="http://sd-2.archive-host.com/membres/up/164535323316229486/test.txt"></script>

je n'en suis pas sur car j'ai pas accès au template mais il me semble que c'est ca
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyMer 07 Juil 2010, 11:17
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Oui c'est bien ça.
Et malheureusement pour toi, ce script ne permet que de faire un accordéon horizontal.

Mais peut être trouvera tu ton bonheur ici : http://www.jeremymartin.name/projects.php?project=kwicks
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 07:05
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
ok merci
de l'anglais ... génial =D
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 10:05
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Le traducteur de site de Google est ton ami.
Wink
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 11:57
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
oh oui il est tres gentil car je lui en demande beaucoup ^^

EDIT : je n'arrive pas a le faire fonctionner il ne m'affiche rien ou alors des caractere =S
code Généralité :

Spoiler:

code CSS :

Spoiler:

code Template (mit dans overall_header_new )

Spoiler:

PS : je trouve le CSS bisard
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 12:21
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Je crois qu'il serai bon que tu relise le lien que je t'es envoyer. Notamment l'onglet exemple.
C'est code n'ont rien à voir avec.

Il te faudra insérer ceci dans le template overall header new, avant la balise :
Code:
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js"></script>

Le reste est donné dans les exemples.
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 18:48
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
ba eu ces codes viennent du 3eme exemple ^^

Citation :
Exemple 3: Disposition verticale (enfin!)

One of the big new features this release is the vertical arrangement. Une des grandes caractéristiques nouvelles de ce communiqué est la disposition verticale. The primary addition in using this new feature is the isVertical option. L'ajout principal à utiliser cette nouvelle fonctionnalité est la possibilité isVertical. Note that there are some necessary changes to the CSS as well. Notez qu'il ya des changements nécessaires à la CSS ainsi.
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyJeu 08 Juil 2010, 20:53
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Citation :
Example 3: Vertical Arrangement (finally!)
One of the big new features this release is the vertical arrangement. The primary addition in using this new feature is the isVertical option. Note that there are some necessary changes to the CSS as well.

HTML :
Code:
<ul class="kwicksl" > 
    <li id="kwick1"></li> 
    <li id="kwick2"></li> 
    <li id="kwick3"></li> 
    <li id="kwick4"></li> 
</ul>

CSS :
Code:
.kwicks li{ 
    width: 125px; 
    height: 100px; 
    margin-bottom: 3px; 

#kwick1 { 
    background-color: #FF5100; 

#kwick2 { 
    background-color: #B33900; 

#kwick3 { 
    background-color: #FFD000; 

#kwick4 { 
    background-color: #B39200; 
    margin-bottom: none; 
}

Javascript :
Code:
$().ready(function() { 
    $('.kwicks').kwicks({ 
        max : 205, 
        spacing : 3, 
        isVertical : true 
    }); 
}); 
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 07:47
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
merci mais j'ai une question le java script il faut le mettre dans : panneau admin --> module --> page html ?
car la ça me fait
Question "Acordéon" Test11
mon forum de test
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 08:44
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
VPeybernes a écrit:
Je crois qu'il serai bon que tu relise le lien que je t'es envoyer. Notamment l'onglet exemple.
C'est code n'ont rien à voir avec.

Il te faudra insérer ceci dans le template overall header new, avant la balise </head> :
Code:
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js"></script>

Le reste est donné dans les exemples.

Après le javascript tu peut le mettre juste avant ton HTML dans message d'accueil, entre les balise <script></script>
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 09:37
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
Sad toujours rien j'ai mit le CSS , template , le generalité
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 09:42
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Tu peut nous transcrire tes code, et nous donner un lien pour voir ?
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 10:29
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
http://forum-test-orphen.forum-pro.fr/index.htm
alors le code CSS : (je donne tous ^^)
Code:
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
table.forumline {border:1px dotted;}
a:hover {
text-decoration: none !important;
}

.kwicks li{
    width: 125px;
    height: 100px;
    margin-bottom: 3px;
}
#kwick1 {
    background-color: #FF5100;
}
#kwick2 {
    background-color: #B33900;
}
#kwick3 {
    background-color: #FFD000;
}
#kwick4 {
    background-color: #B39200;
    margin-bottom: none;
}

template overall_header_new :
Spoiler:

code PA :
Code:
<script>$().ready(function() {
    $('.kwicks').kwicks({
        max : 205,
        spacing : 3,
        isVertical : true
    });
});  </script>


<ul class="kwicksl" >
    <li id="kwick1"></li>
    <li id="kwick2"></li>
    <li id="kwick3"></li>
    <li id="kwick4"></li>
</ul>
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 10:35
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Les script du template doite être placé avant </head> et non <head>
Dans ton code PA, dans le script, remplace tout les $ par jQuery. J'insiste sur le Q majuscule.
<ul class="kwicksl" > : tu à fait une faute de frappe. enlève le l à la fin de class="kwicksl
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 10:59
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
Spoiler:

Code:
<script>jQuery.#36;().ready(function() {
    jQuery.#36;('.kwicks').kwicks({
        max : 205,
        spacing : 3,
        isVertical : true
    });
});  </script>


<ul class="kwicks" >
    <li id="kwick1"></li>
    <li id="kwick2"></li>
    <li id="kwick3"></li>
    <li id="kwick4"></li>
</ul>
toujours rien Sad

EDIT: sa avance mais toujours pas résultat voulu bien compliquer tous ça
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 11:05
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Code:
<script>jQuery().ready(function() {
    jQuery('.kwicks').kwicks({
        max : 205,
        spacing : 3,
        isVertical : true
    });
});  </script>


<ul class="kwicks" >
    <li id="kwick1"></li>
    <li id="kwick2"></li>
    <li id="kwick3"></li>
    <li id="kwick4"></li>
</ul>
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 11:13
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
ça coulisse mais pour changer les image c'est ici
Code:
<ul class="kwicks" >
    <li id="kwick1"></li>
    <li id="kwick2"></li>
    <li id="kwick3"></li>
    <li id="kwick4"></li>
</ul>
??
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 11:16
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
Ici tu met le contenue de chaque section.
Dans le CSS tu retrouvera chaque class pour la mise en forme.
Pour la mise en forme général et notament la taille de départ des cellule c'est ici :
Code:
.kwicks li{
    width: 125px;
    height: 100px;
    margin-bottom: 3px;
}
width : largeur ; height : hauteur ;
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 11:21
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
Grand merci a toi ne classe pas si j'ai probleme je revien =)
EDIT: il n'y a pas moyen qu'il ne reste pas coller en haut de la PA ^^?

REEDIT: ^^ j'ai reussi a faire quelque petit truc mais ... je sais pas les panneau ne se metent pas au bon endroit ils se chevauche http://forum-test-orphen.forum-pro.fr/forum.htm
Sad
enfin c'est deja pas mal Smile Merci
oh eu il y a pas moyen que ce soit plutot quand on clique dessus plutot que quand on passe la souri ? =)
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyVen 09 Juil 2010, 11:27
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Question "Acordéon" Empty
C'est pour la chat box ? Parce que je ne vois rien ailleurs.
Si c'est le cas c'est pas vraiment un accordéon qu'il de faut, mais plutôt un spoiler.
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyDim 11 Juil 2010, 11:47
Revenir en haut Aller en bas
http://forum-orphen.forum-pro.fr/
Mepheria
Mepheria
{ Membre }
{ Membre }

Masculin Messages : 169



Question "Acordéon" Empty
bonjours, ah eu oui sa serai pour la chatbox mais pas que :/ comment faire? parce que l'acordéon sa marche mais il reste tous en haut Sad
EDIT : LOL si simplement
Code:
<table class="spoiler" width="90%" cellspacing="1" cellpadding="0" border="0" align="center"><tr><td style="cursor: pointer;"><span class="genmed"><b><img src="http://i30.servimg.com/u/f30/15/40/28/56/test10.png"/></b></span></td></tr><tr><td class="spoiler_closed">&nbsp;</td><td class="spoiler_content hidden"><iframe src="/chatbox/chatbox.forum" width="750px" height="250px" valign="top" align="center"
frameborder="0" scrolling="no" marginheight="0"  marginwidth="0"></iframe>
</td></tr></table><span class="postbody">

*honteux*
PS : y a pas moyen que ça coulisse plutot que sa apparaisse d'un coup? =)
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" EmptyDim 11 Juil 2010, 13:21
Revenir en haut Aller en bas
Contenu sponsorisé




Question "Acordéon" Empty
MessageSujet: Re: Question "Acordéon"   Question "Acordéon" Empty
Revenir en haut Aller en bas
 

Question "Acordéon"

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

 Sujets similaires

-
» Question
» Question sur les "h1"
» Question
» Question
» Question

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

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 | Cookies | Forum gratuit