| | Créer un accordéon (messages) |  |
|
|
 Basil Hawkins 
{ Membre hyper-actif }
 Messages : 2912
 | Maaais tu m'as piqué mon zoli titre  Bon sinon tu as totalement oublié comment une page HTML se forme, puisque tu as oublié de mettre le DOCTYPE et tout le bazar ^^' | | |
|
| | |
Kaiji 
Blanche-Neige
 Messages : 5578
| Y a pas besoin du DOCTYPE et compagnie =). On introduit pas le code dans une iframe, y a pas besoin ^^
Ca marche très bien comme ça, tu peux essayer. C'est comme ça sur mon forum et tout fonctionne, pareil pour Lilith, Poussette... =)
Pour le titre, beuuuh, tu veux que je l'enlève ? xD | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| EUHEUM. Ai-je bien entendu ? Tu dois mettre un Doctype, même si ça marche sans ! sinon ta page HTML ne sera pas correcte.  Nan tu peux laisser le titre, c'était juste pour me moquer de toi  | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| '-' Bon dieu mais j'ai jamais fait comme ça moi, j'vois pas du tout comment faire... | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| 'fin c'est pas la fin du monde, mais imagine que le langage HTML change complètement, le nouveau langage HTML respectera bien évidemment la façon correcte de faire les choses. | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Erreur corrigée, j'ai ajouté le Doctype ! | | |
|
| | |
Gintoki
{ Membre }
Messages : 128
| Merci pour ce tuto! Je crois que ça va faire beaucoup d'heureux | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| "Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.
Nous vous conseillons de relire votre code."
Il me met ça quand je copie/colle le code CSS et c'est ce code-ci parce que quand je l'enlève tout va bien.. :/ | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Peux-tu me copier/coller ton css ?
Parce que chez moi et plusieurs autres ça marche... Il doit y avoir un problème quelque part dans ton css. =) | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| Le voilà - Code:
-
.bodyline {
border: dashed 5px purple;
}
.statistiques{
border:0px;
background-image: url("http://img709.imageshack.us/img709/4973/qeellclbcopie.png");
background-repeat: no-repeat;
background-position: left;
height:230px;}
.haccordion{
padding: 0;
width: 800px; */ Grandeur total que vous désiré une fois qu'ils sont utilisé */
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*on touche pas*/
}
.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;
} | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| J'ai beau chercher je ne vois aucune erreur dans ton css...
Par contre j'ai vu que tu n'étais pas la première à qui ça le faisait alors qu'il n'y avait pas d'erreur dans le css. J'vais aller voir si y a pas quelque chose à ce propos sur le FdF, parce que c'est quand même bizarre v_v | | |
|
| | |
Mlle Sunshine
{ Membre }
Messages : 12
| Bonjour (:
Cela me fait la même chose que Tarsicius =/ | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Voilà ! En fait j'avais effectivement fait une erreur, maintenant c'est réparé ^^ | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| J'ai un soucis... En copiant collant tes codes, voici à quoi ressemble mon accordéon sans avoir passé le curseur dessus (faites pas attention aux images, c'était pour essayer):  Voici mes codes: Page HTML - Spoiler:
- 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>
CSS - Spoiler:
- Code:
-
.bodyline {
border: dashed 5px purple;
}
.statistiques{
border:0px;
background-image: url("http://img709.imageshack.us/img709/4973/qeellclbcopie.png");
background-repeat: no-repeat;
background-position: left;
height:230px;}
.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;
}
Page d'accueil - Spoiler:
- Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'30px', fullw:'100px', 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:400px; height:300px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank"><img src="http://i41.tinypic.com/29kywld.jpg"></a></div></li> <li style="overflow: hidden; width:400px; height:300px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=6" target="_blank"><img src="http://a10.idata.over-blog.com/300x480/2/63/18/15/Barbie/marilynred.jpg" alt=""></a></div></li> <li style="overflow: hidden; width:400px; height:300px; display: block;"><div class="hpanel"><a href="http://fall-into-drunkennes.forumactif.org/profile.forum?mode=viewprofile&u=7" target="_blank"><img src="http://ups.imagup.com/08/1268530842.png" alt=""></a></div></li></ul></div>
| | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour ^^ Avant toute chose, est-ce que le coulissement se fait ? | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| Oui, pas de problème avec ça. Une fois que le curseur est passé, l'accordéon se met normalement... | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Alors 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.
(Je sais pas si j'ai été très claire là mdr, c'est le soir...) | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| Erm... Non, je n'ai pas vraiment compris... xD Tu pourrais me donner un exemple plus concret? Par exemple une taille que tu conseillerais... | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bah ça dépend de la taille de tes images, de la largeur que tu veux laisser apparaître, de la largeur que tu veux faire apparaître quand tu ouvres le panneau...
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. =) | | |
|
| | |
Tarsicius
{ Membre }
Messages : 107
| Ok ^^ (j'avais déjà tout compris.. >.< je réglais le CSS... XD) Bon j'essaye ça  Merci en tout cas =D | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| xDD Bah c'est bien alors 
M'enfin au moins j'l'ai dit, pour les suivants y aura pas de soucis de ce côté-là quoi, je peux pas donner de taille prédéfinie, ou conseillée.
Sinon bah, de rien, hein, même si j'ai pas fait grand-chose pour le coup XD | | |
|
| | |
ptitlac
{ Membre }
Messages : 226
| J'ai une question toute bête.
Vu qu'il ne fonctionne pas sous IE, si je fais un accordéon sur mon forum.
Les membres qui sont sur IE le verrons comment ?? | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour ptitlac ^^
Les membres sous IE verront trois panneaux les uns en dessous des autres. =) | | |
|
| | |
ptitlac
{ Membre }
Messages : 226
| Merci Kaiji ^^ C'est dommage, mais bon on sait tous qu'IE est un peu...pourri question codes ><" Enfin bon, merci de ta réponse. Bonne soirée ^^ | | |
|
| | |
GogoZ
{ Membre }
Messages : 3
| J'ai pas trop comprit à quoi servait le code HTML o.O ... | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Créer un accordéon (messages) | |
|
