|
 Sam Winchester 
{ Membre }
 Messages : 65
 | Bonsoir a vous voila, je suis en train de faire un forum et je voudrais faire mes sous forum un peut prés le style de ce forum sans faire de plagiat, je le modifie moi même, c'est juste pour avoir le code de base. Et je voudrais savoir aussi comment on fait pourfaire comme dans le Pa pour le staff avec le roll horizontal.
Forum: http://princeton.forums-actifs.net/forum.htm
Je vous remercie d'avance. | | |
|
 | |
Kaiji 
Blanche-Neige
 Messages : 5578
| |
| | |
Emaline
{ Membre }
Messages : 202
| Pour les sous forum c'est simplement des onglets normal que j'ai modifier à ma façons et dont j'ai apporté les caractéristique dont je désire. Si tu cherches simplement un peu tu peux arrivé à faire des sous forums en onglets puis trouvé facilement comment mettre un rond autour d'un texte je pense pas que c'est quelque chose de dure. | | |
|
| | |
Kimy
{ Membre actif }
Messages : 1190
| Pour les onglets, cherche avec le mot "vignette"
Ça a déjà été demandé plusieurs fois | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| Bonsoir, je vous remercie tous de vos réponses, mais pour les vignettes j'ai fait une recherche et j'ai essayer deux tutos et la photo n'est pas a gauche et le texte a droite, voila mon forum de test:
http://test-aragorn.forumactif.com/forum.htm
Je vous remercie d'avance. | | |
|
| | |
Lilith
{ Membre }
Messages : 251
| Bonsoir, hum merci de supprimer mes photos de ton accordéons ou de les remplacer ^^" Ça serait gentil =) Parce que coller mon code sans le modifier c'est pas cool :/ Même si tu me fais de la Pub...  | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| Bonjour Lilith, les photos je vais les remplacer, j'ai pas fini de le modifier. | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Non Sam Winchester, tu les retires. Copier/coller le code de Lilith qu'elle a donné quand je l'ai aidée est strictement interdit, si tu veux réussir et comprendre ce code, tu dois le faire toi-même de A à Z ! Pas en prendre une partie créée par quelqu'un d'autre ! | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| Pourquoi je devrais le retirer , c'est même toi qui a mis le lien ou tu as aider Lilith a le faire, moi j'ai juste pris le code que je vais le modifier pour qu'il soit a ma façon. | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| Sam c'est simplement tu chnage les image mais si non tu peux toujours de partir de zéro avec mon tuto que Kaiji a reprit - Emaline a écrit:
Pour commencé moi je suis une fan et une folle des IFRAME alors tout cela je l'ai mit dans une page HTML pour ceux qui ne savent pas son où les page HTML de votre forum c'est dans le mode avancé module »» Gestions des pages HTML
Vous en créer une nouvelle que vous l'appeler comme vous le désiré.
Pour commencé j'ai été sur Dynamic Drive et j'ai copier la premier partie qu'eux dire Step 1 ce qui donne ceci et j'ai tout collé dans le début de ma page HTML
- Code:
-
<!--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>
Ensuite j'ai copier le CSS qui vient de Dinamic Drive c'est indiqué a côté ceux qui a des donnée a changer alors je crois pas avoir plus d'indication à vous donné et ceci doit être mit entre < style> < /style>
- Code:
-
.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; /*on touche pas*/
width: 100%; /*comme tu préfères c'est la hauteur*/
height: 20px; /*comme tu préfères c'est la longueur*/
overflow: hidden; /*on touche pas*/
float: left; /*on touche pas*/
}
#hc1 li{
margin:0 0px 0 0; /*espace entre chaque content*/
width: 800px;
}
#hc1 li .hpanel{
padding: 0px; /*espace entre chaque content*/
background: transparent;
}
.haccordion li .hpanel{
width: 20px; /*comme tu préfères c'est la hauteur*/
height: 20px; /*comme tu préfères c'est la longueur*/
}
#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}
Ensuite vous coller votre propre CSS que vous désirer et moi j'ai rajouté certain petit code qui vous sera utile seulement a les mettre entre les balises Style
- Code:
-
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a { text-decoration: none; }
a img{border: none;}
img{opacity:0.5} */Un effet sur les images /*
img:hover{opacity:1}
body{ background-color:#;} */couleur du fond de page/*
La partie la plus importante de tout c'est a nouveau le JS simplement a coller ceci après j'ai déjà inclut au code les balises qui faut
- Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})</script>
La seule chose a changé après c'est ceci paneldimensions: peekw:'30px', fullw:'210px', h:'50px' peekw c'est lorsqu'ils sont tous coller de quel largeur qui sont FullW c'est lorsqu'il sont ouvert et H c'est la hauteur
Bon le HTML
- Code:
-
<div id="hc1" class="haccordion"><ul> <li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li></ul></div> Et lorsque vous voulez rajouté un panneau c'est simple après < / li > vous avez simplement a recoller un code qui est un panneau c'est à dire - Code:
-
<li style="overflow: hidden; width:LARGEUR LORSQUE FERMÉpx; display: block;"><div class="hpanel"><a href="LIEN DÉSIRÉ" target="_blank"><img src="LIEN DE L'IMAGE" alt=""></a></div></li>
Ensuite VALIDER
Pour le mettre sur la PA c'est le code IFRAME normal
Voilà j'espère avoir été claire :rolling: | | |
|
| | |
Lilith
{ Membre }
Messages : 251
| Bah attends le code c'est Kaiji qui m'a aidé, tu as carrément collé mon code avec mes images et mes liens c'est assez abusé...
Après tu te serai inspiré du code que j'ai collé OK mais là :/
Merci de l'avoir retiré =) | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| Je te remercie Emaline, il faut que je mette le Step 1, le CSS et le Js dans une page HTML, et le reste du tuto je le met sur ma PA. J'ai réussie a le faire autrement, en combinant le tuto sur Dynamic Drive et le tuto de Kaiji. | | |
|
| | |
Invité Invité
| Hello, Le sujet est donc résolu ? | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| non pas tout a fait je vais essayer avec le tuto d'Emaline pour voir si c'est plus simple que le mien | | |
|
| | |
Emaline
{ Membre }
Messages : 202
| As-tu peux finalement arrivé au résultat que tu désire? | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| oui j'ai eu le résultat que je voulais. Maintenant il me reste plus qu'a faire les vignettes. | | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| Bonjour, pour les vignettes je laisse tomber mais j'ai deux petits problèmes le voila: 1) j'ai suivi ce tuto fait par iowan pour les système d'onglet pour les catégories et je voudrais rajouter le survol avec la souris, je sais que le code est "onmouseover" mais je sais pas ou il faut le mettre et aussi comment espacer les boutons j'ai essayer de chercher dans le CSS mais j'ai pas trouver ? 2) je voudrais intégrer le code de l'accordéon dans le code du cadre que je veut mettre, mais quand je le fait l'accordéon ne fonctionne plus: code du cadre: - Code:
-
<br><center><fieldset style="border: 2px solid lightskyblue; width: 350px;"><legend><span style="font-size: 20px; line-height: normal;"><font face="MS Courier New"><font color="LightSteelBlue">Staff</font></font></span> <!--color:red--><!--/color--></legend><!--sizeo:1--><span style="font-size: 10pt; line-height: 100%;"><!--/sizeo--><br><table><tbody><tr><td align="left"></td><td align="left"><div align="justify"><span style="font-size: 11px; line-height: normal;"><font face="Arial"></font></span></div></td></tr><td style="color: #ffffff;font-size:40px;vertical-align:top;"></td><td>
</tbody></table><br></span></fieldset></center></blockquote> code de l'accordéon: - Code:
-
<!--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:'280px', h:'130px'}, 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:'280px', h:'130px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: true //<- No comma following very last setting! }) </script><div id="hc1" class="haccordion"> <ul> <li> <div class="hpanel"> <img src="http://img3.imageshack.us/img3/4577/59055453.png" style="float:left; padding-right:8px; width:100px; height:100px" /><font color=#4d3cba><b>Sam Winchester</b><br><div class="tstaff"><img src="http://i37.tinypic.com/2zp5qb8.jpg" style="width:160px; height:71px;" border="0"><br></font><b><font color=#3FA62D>Fondateur</font></b><br><a href=""><font color=#a22da6>Le contacter</font></a> </div> </li> </ul> </div> </table> </tbody></table><br></span></fieldset></center> </blockquote> pour le code de l'accordéon il est bon pour le PA ou il faut modifier certaine partie du code? |
Dernière édition par Sam Winchester le Mar 15 Juin 2010, 10:19, édité 1 fois | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Les doubles posts sont strictements INTERDITS car considérés comme des UPS !!
"Les UPs sont interdits par le règlement et cette règle peut se trouver dans la plupart des signatures du staff !! Les UPs sont la charge des modérateurs qui remontent les sujets s'il n'y a pas eu de réponse au bout d'une semaine."
|
Dernière édition par Kaiji le Jeu 17 Juin 2010, 06:56, édité 1 fois | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ?
| | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| non il est toujours d'actualité.
Sauf pour mon premier problème, j'ai laisser tomber.Le deuxième est toujours d'actualité. | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ?
| | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| non toujours pas, j'arrive pas a pour mon deuxieme probléme | | |
|
| | |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour,
Votre problème est-il résolu ?
| | |
|
| | |
Sam Winchester
{ Membre }
Messages : 65
| non, mais tu peut classer, je laisse tomber mes deux problèmes | | |
|
| | |
Contenu sponsorisé
| |
| | |
|
