|
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
Emaline ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 202
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kimy ![{ Membre actif } { Membre actif }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre actif }
Messages : 1190
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Pour les onglets, cherche avec le mot "vignette" Ça a déjà été demandé plusieurs fois | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Lilith ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 251
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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... ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Bonjour Lilith, les photos je vais les remplacer, j'ai pas fini de le modifier. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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 ! | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Emaline ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 202
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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: | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Lilith ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 251
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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é =) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Invité Invité
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Hello, Le sujet est donc résolu ? ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif) | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | non pas tout a fait je vais essayer avec le tuto d'Emaline pour voir si c'est plus simple que le mien | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Emaline ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 202
![quelque question Empty](https://2img.net/i/fa/empty.gif) | As-tu peux finalement arrivé au résultat que tu désire? | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | oui j'ai eu le résultat que je voulais. Maintenant il me reste plus qu'a faire les vignettes. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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 | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | 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 | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Bonjour,
Votre problème est-il résolu ?
| | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | non il est toujours d'actualité.
Sauf pour mon premier problème, j'ai laisser tomber.Le deuxième est toujours d'actualité. | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Bonjour,
Votre problème est-il résolu ?
| | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | non toujours pas, j'arrive pas a pour mon deuxieme probléme | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Kaiji ![Blanche-Neige Blanche-Neige](https://2img.net/h/cssactif.com/files/rangs/chouchou.png)
Blanche-Neige
Messages : 5578
![quelque question Empty](https://2img.net/i/fa/empty.gif) | Bonjour,
Votre problème est-il résolu ?
| | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Sam Winchester ![{ Membre } { Membre }](https://2img.net/h/files.cssactif.com/rangs/membre.png)
{ Membre }
Messages : 65
![quelque question Empty](https://2img.net/i/fa/empty.gif) | non, mais tu peut classer, je laisse tomber mes deux problèmes | | |
|
![Aller en bas](https://2img.net/i/empty.gif) | |
Contenu sponsorisé
![quelque question Empty](https://2img.net/i/fa/empty.gif) | |
![Aller en bas](https://2img.net/i/empty.gif) | |
|