|
|
Auteur | Message |
---|
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: # Page d'Accueil n°1 ~ Dim 9 Jan - 13:03 | |
|
Je vous propose cette page d'accueil :
- Spoiler:
••► Donc bien sûr, les répartitions ne sont juste que des idées... Si vous pouvez les mettre dans un autre ordre ^^ ••► Vous pouvez également mettre des images au lieu d'un texte dans les cellules.
Donc, voici le code à copier/coller dans la page d'accueil du forum : - Code:
-
<script type="text/javascript"> //<!-- // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page. // Le principe est simple. Le cadre g�rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher. function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet'; document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> <style type="text/css"> body { width:800px; margin:auto; } img { border:none; } .systeme_onglets { margin-top:5px; margin-left:5px; width:57%; float:left; } .bloc_general_onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; border:1px solid black; cursor:pointer; } .onglet_inactif { background:#bbbbbb; border-bottom:1px solid black; } .onglet_actif { background:#eeeeee; border-top:1px solid #eeeeee; } .contenu_onglet { background-color:#eeeeee; border:1px solid black; margin-top:1px; padding:5px; display:none; -moz-border-radius: 10px 10px 10px 10px ; height:200px; } .titre { text-align:center; text-decoration:underline; } /* Le css suivant permet de mettre l'info bulle... */ a.info_bulle { text-decoration : none; padding : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */ position : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ } a.info_bulle:hover { border : 0; /* ligne qui corrige le bug d'IE6 et inf�rieur */ } /* Rend invisible tout notre bloc span */ a.info_bulle span.info_bulle { position : absolute; top : -2000em; left : -2000em; width : 1px; height : 1px; overflow : hidden; }
/* Rend visible tout notre bloc span et lui attribue une taille */ a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle { top : auto; left : auto; height : auto; overflow : visible; } span.contenu { display : block; padding : 0 8px; }
</style>
<div style="width:800px;margin:auto;height:250px;"> <div class="systeme_onglets">
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_premier"> Contenu du premier onglet ! </div> <div class="contenu_onglet" id="contenu_onglet_deuxieme"> Contenu du deuxieme onglet ! </div> <div class="contenu_onglet" id="contenu_onglet_troisieme"> Contenu du troisieme onglet ! </div> </div> /* C'est ici que nous allons changer le titre des onglets pour pouvoir g�rer plus facilement la navigation sur la PA ^^ */
<div class="onglets" style="padding-left:10px;"> <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span> <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span> <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1 change_onglet(anc_onglet); //--> </script> <!-- Ci dessous le cadre du staff --> <div style="width:39%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;"> <div class="titre">STAFF</div> <!-- Pour l'info bulle, copies le code d'ici --> /* Mettre l'url du l'image ici... */ <span class="info_bulle"> <span class="contenu"> <img src="http://graph-style.forumotion.com/users/2515/81/28/17/avatars/3154-29.png" alt="" /> </span> </span> </a> <!-- Jusqu'a ici ! Attention ! Les deux images (en petit et grand) doivent �tre de la taille que tu souhaites l'infobulle --> </div> </div> <!-- Fin du cadre du staff --> <!-- Debut du cadre des infos importantes --> <div style="width:40%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;"> <div class="titre">Contenu...Informations importantes...etc</div> Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
Bcp de texte...
</div> <!-- Fin informations importantes --> <!-- D�but cadre en bas � droite --> <div style="width:58%;border:1px solid black;height:225px;margin-top:-20px;float:right;"> <!-- player de musique (dewplayer pour faire un exemple) --> <div style="margin-left:10px;margin-top:10px;"> <object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="http://www.alsacreations.fr/flashswf/dewplayer.swf" /> <param name="flashvars" value="mp3=la_musique.mp3&showtime=1" /> </object> </div> Image.... </div> <!-- Fin... --> ••► Explications & Remarque : ~ Les petites informations comme : /* Mettre l'url du l'image ici... */, etc... ne seront pas voyantes. ~ Bien sûr, le fond des cellules est modifiable, mais il sera par défaut celui du fond de votre page d'accueil. La grande "infobulle" des onglets 1, 2 et 3 sera par défaut grise, pour changer les couleurs, repérés ceci vers le début du code :
- Spoiler:
} .onglet_inactif { background:#bbbbbb; border-bottom:1px solid black; } .onglet_actif { background:#eeeeee; border-top:1px solid #eeeeee; } .contenu_onglet { background-color:#eeeeee; border:1px solid black; margin-top:1px; padding:5px; display:none; -moz-border-radius: 10px 10px 10px 10px ; height:200px; }
••► Il vous suffit de modifier le :#****** Pour vous aidez à choisir des teintes => http://www.lehtml.com/html/colors.htm
••► Autres : Les "�" sont des accents : "é è, ê" etc...
Maintenant, si vous avez des questions, des suggestions ou des problèmes concernant ce code, je vous invite à répondre ci-dessous ou à m'envoyez un Mp ! Merci =)
|
|
| |
Xiumi Ouch ! Les rides commencent à apparaître
Messages : 2014 Age : 31 Puf : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 9 Jan - 13:28 | |
| Moi z'ai une question. Pour les onglet, le texte qu'on veut mettre dedans on doit l'écrire ou ? Et le nom pour des onglet c'est "name" ? |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 9 Jan - 15:11 | |
| ••► Pour le contenu des Onglets, cherche dans la partie ci-dessous, ceci : Contenu du "x" onglet ! - Code:
-
<div style="width:800px;margin:auto;height:250px;"> <div class="systeme_onglets">
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_premier"> Contenu du premier onglet ! </div> <div class="contenu_onglet" id="contenu_onglet_deuxieme"> Contenu du deuxieme onglet ! </div> <div class="contenu_onglet" id="contenu_onglet_troisieme"> Contenu du troisieme onglet ! </div> </div> ••► Pour le Nom des Onglets, il se trouve juste en dessous de la partie que je viens de te copier coller ! ensuite tu verras, un code comme celui-ci : - Citation :
- <*span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1<*/span>
- Code:
-
/* C'est ici que nous allons changer le titre des onglets pour pouvoir g�rer plus facilement la navigation sur la PA ^^ */
<div class="onglets" style="padding-left:10px;"> <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span> <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span> <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1 change_onglet(anc_onglet); //--> </script> |
|
| |
Xiumi Ouch ! Les rides commencent à apparaître
Messages : 2014 Age : 31 Puf : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 9 Jan - 17:29 | |
| oki, et les name c'est quoi alors ? |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 9 Jan - 18:10 | |
| ••► le "Name" (Nom en Anglais), c'est une sorte de "code par défaut", un raccourci si tu veux. C'est pour éviter aux gens de mettre "Liens Utiles", etc... partout ^^ C'est comme le code : Invité ! - Citation :
- {USERNAME*} (sans l'étoile ^^)
Sa permet à ce que la personne connectée voit son nom ^^ Mais en faites, c'est un raccourcis, vers le prénom de l'utilisateur. |
|
| |
_Louzii Vétéran du forum
Messages : 1161 Puf : By Loulou ou _Louzii Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Lun 10 Jan - 18:59 | |
| Pfff... Galère ! Mais je connaissais le USERNAME =P
|
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Lun 10 Jan - 19:03 | |
| Username c'est le code le plus simple et le plus facile xD Mais tu sais, les codes libres services, c'est un code que je me TUE à faire pour que vous ne fassiez qu'un petit copier/coller :B |
|
| |
_Louzii Vétéran du forum
Messages : 1161 Puf : By Loulou ou _Louzii Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Lun 10 Jan - 19:04 | |
| Je vois ça ! En tout cas, merci beaucoup alors
|
|
| |
Efiàltis Membre Très Important du forum
Messages : 631 Age : 26 Puf : Efiàltis Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 9 Fév - 17:20 | |
| Moi j'ai une question : Comment fait on pour apprendre des codes, comme toi ? Je veux dire, savoir les mettre à la suite, etc.. |
|
| |
_Louzii Vétéran du forum
Messages : 1161 Puf : By Loulou ou _Louzii Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 9 Fév - 17:27 | |
| Oui, ça peut être utile =D |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Jeu 10 Fév - 18:39 | |
| Je vous ferais un petit guide pour vous apprendre les bases si vous voulez :B
Bah, c'est en général de la recherche... Bon, d'accord... BEAUCOUP de recherche ^^ Il m'a fallut entre 2 et 3 heures pour faire ce code, rendez-vous compte du travail fournit pour une si petite chose x) Où je trouve tout ça ? Dans des guides sur internet, sur des forums, ou par mes propres connaissances acquises, en gros, je fais la chasse aux bonnes affaires (et ce sont les soldes xD), j'essaie de faire des trucs originaux ou de reproduire des pages d'accueil existantes ^^
Je compte également m'acheter très prochainement un livre sortit y a pas longtemps (le mot guide serait plus approprié, pour ce livre en faites xD), il coute cher, mais TOUS les codes sont dedans et j'espère pouvoir faire des trucs superbes !!! |
|
| |
Efiàltis Membre Très Important du forum
Messages : 631 Age : 26 Puf : Efiàltis Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 5 Mar - 16:08 | |
| J'essaie d'installer ce code sur la page d'acceuil de mon forum, mais je ne comprend rien ><' J'arrive pas à écrire à l'intérieur, les parties se touchent, bref, c'est une catastrophe ! Tu peux m'aider s'il te plait ? |
|
| |
_Louzii Vétéran du forum
Messages : 1161 Puf : By Loulou ou _Louzii Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 5 Mar - 16:28 | |
| C'est quoi ton forum ? =B |
|
| |
Efiàltis Membre Très Important du forum
Messages : 631 Age : 26 Puf : Efiàltis Professeur : Xiumi
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 5 Mar - 18:45 | |
| Un forum de lgdc que je viens de créer. |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 6 Mar - 15:11 | |
| Passe moi le lien de ton forum par Mp pour que je vois ce que sa donne ^^ Parce que si je ne vois pas quel est ton problème, je vais avoir du mal à me pencher dessus =) |
|
| |
Plumouh'' Se fait un peu moins timide
Messages : 77 Puf : by velou ou Plumouh''
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 11 Juin - 11:53 | |
| Bonjour, j'ai suivis comme tu l'as dit mais il y a quelque chose qui me gène: voila ce que ça me fais: - Spoiler:
ce que j'aimerais c'est que la ou il est écrit "Contenu...Informations importantes...etc Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte... Bcp de texte..." Soit a gauche. Je n'ai pas changé le code que tu as donné. Voila si tu pouvais m'aider merci beaucoup |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 11 Juin - 12:01 | |
| Ah :/ Je verrais sa plus tard. Tu as bien vérifié que tu n'avais rien oublié ? |
|
| |
Plumouh'' Se fait un peu moins timide
Messages : 77 Puf : by velou ou Plumouh''
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 11 Juin - 12:04 | |
| |
|
| |
Mathou Membre Très Important du forum
Messages : 615 Puf : Mat' Professeur : Xiumi et Vict'. Merci ! <3
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 13 Juil - 10:29 | |
| Moi aussi, j'ai un petit problème, sa m'écris sa:
"Votre CSS a bien été mis à jour. Remarque : Les balises html génèrent des erreurs dans les feuilles de style. Une correction vient donc d'être effectuée afin de supprimer les balises html que vous avez placées dans la feuille de style."
Sinon, merci beaucoup pour les codes, c'est super, magnifique et surtout une sublime idée d'aider une paumée comme moi |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 13 Juil - 15:40 | |
| Ah oui je vois ! Passe moi ton CSS en entier ou par Mp.
C'est que tu dois avoir un code comme celui là :
"titre". { blablabalab blablabla
et il doit manquer l'accolade dans l'autre sens : "}" ou alors c'est l'inverse, il y a celle de fin mais pas celle de début ^^ Ce problème peut aussi venir du fait que tu as mis deux fois le même code dans ton CSS et cela interfères donc.
Plumouh" >> Tu peux me passer tous les codes (CSS + Template modifié) par Mp ou ici entre balises codes ? Merci. |
|
| |
Plumouh'' Se fait un peu moins timide
Messages : 77 Puf : by velou ou Plumouh''
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 13 Juil - 17:06 | |
| A désolé j'avais completement oublié mais j'en attend une autre de Pa désolé j'avais oublié xD merci quand même ! |
|
| |
Mathou Membre Très Important du forum
Messages : 615 Puf : Mat' Professeur : Xiumi et Vict'. Merci ! <3
| Sujet: Re: # Page d'Accueil n°1 ~ Mer 13 Juil - 17:09 | |
| Tu veux le CSS d'origine ? Par ce que si c'est le cas, c'est trop long, j'ai dépassé la limite autorisée ^^' si c'est pas celui d'origine, je ne peut rien t'envoyer. Je n'en ai, pas encore mis. Donc pareil pour {. Désolé ^^', si c'est toujours pas sa, je suis longue à la détente |
|
| |
Encrine Se fait un peu moins timide
Messages : 75 Age : 25 Puf : Encrine ou Eternal Professeur : Cookies !!! ^^
| Sujet: Re: # Page d'Accueil n°1 ~ Sam 23 Juil - 14:32 | |
| Merci Wapi ! Cela fesait longtemps que je voulais ce genre de Page d'Acceuil !! Merci Mille Fois !!! |
|
| |
Wapi Vétéran du forum
Messages : 1229 Age : 26 Puf : Wapi ou Blue
| Sujet: Re: # Page d'Accueil n°1 ~ Dim 24 Juil - 15:26 | |
| CODE MIS A JOUR /!\ Normalement, il n'y a plus de problème ! =) |
|
| |
Mathou Membre Très Important du forum
Messages : 615 Puf : Mat' Professeur : Xiumi et Vict'. Merci ! <3
| Sujet: Re: # Page d'Accueil n°1 ~ Lun 10 Oct - 19:52 | |
| Heu..désolé de te dérangé mais j'ai encore un problème. Le voila: - Spoiler:
|
|
| |
Contenu sponsorisé
| Sujet: Re: # Page d'Accueil n°1 ~ | |
| |
|
| |
|