Page d'accueil avec onglets

par requiem aeternam Lun 8 Aoû 2011 - 21:21

Bonjour à tous et à toutes =)

Étant une vraie quiche en codes, j'aimerais que l'on m'explique comment pourrais-je avoir une PA de ce genre :

Spoiler:

Chaque "titre" contient une sorte d'information différente et, lorsque l'on passe la souris dessus, le contenu apparait. Une âme charitable voudrait-elle m'aider à faire une PA du même genre *-* ?

Il me faudrait 5 "zones" :

- Membres du Staff
- Contexte et Intrigues
- Prédéfinis et Scénarios
- Partenaires et Top-sites
- Infos et nouveautés

Merci d'avance <3

par Hell-eonore Mar 9 Aoû 2011 - 14:39

Bonjour,
Il y a de nombreux sujets de la sorte qui ont déjà été faits,
Cela s'appelle une PA en onglets, vous pouvez faire une recherche Wink

Cordialement.

par SandyL Mar 9 Aoû 2011 - 14:48

Bonjour,

Effectivement, il suffit d'aller faire un tour dans les Trucs et astuces Wink

par requiem aeternam Mar 9 Aoû 2011 - 15:40

Ahh, super ! Moi je cherchais dans pa cliquable donc, normal que je trouve pas ^^'

Merci énormément <3

par requiem aeternam Mar 9 Aoû 2011 - 16:51

Désolé du DP mais, j'ai un problème malgré tout =s

Voilà ce que j'ai sur ma page d'accueil :

Spoiler:

Code:: <center><a href="http://www.servimg.com/image_preview.php?i=122&u=15374829" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/15/37/48/29/bienve10.png" border="0" alt="" /></a></center> <div style="margin:auto;text-align:center;width:100%"><div class="description"><div style="background: #403121">♠ <a href="http://www.facebook.com/groups/138916052862319/" class="postlink"> Facebook </a> ♠ <a href="http://requiemaeternam.forumactif.com/the-most-importing-to-know-f1/reglement-de-requiem-aeternam-t1.htm" class="postlink"> Règlement </a> ♠ <a href="http://requiemaeternam.forumactif.com/we-need-them-f8/" class="postlink">Postes Vacants </a>♠ <a href="http://requiemaeternam.forumactif.com/postes-vacants-f9/listing-des-avatars-t23.htm">Bottin des Avatars </a> ♠ <a href="http://requiemaeternam.forumactif.com/partenariats-f7/" class="postlink"> Partenariats </a> ♠ </div></div><br> <table style="margin: auto;"><tr><td><div id="mes_onglets"> <br> <br> <br> <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><center>Staff & Informations</center></center></span> <br><span id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><center>Contexte & Intrigues</center></span> <br> <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><center>Prédéfinis & Scénarios</center></span> <br> <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><center>Top-Sites & Partenaires</center></span></td><td> <div class="clear"><div id="mes_contenus"> <div id="co_1" class="mon_contenu"><div style="margin:auto;text-align:center;width:100%"><div align="justify">_ Le staff de <i>Requiem Aeternam</i> est toujours prêt à aider une âme en détresse donc, n'hésitez pas à les contacter. Rassurez-vous, elles ne mordent pas ou, du moins, pas toutes ...<br><BR><table><tr><td align="left"> </div><a href="http://requiemaeternam.forumactif.com/t149-the-staff-a-votre-service#3101" class="postlink" target="_blank" rel="nofollow"><img src="http://i41.servimg.com/u/f41/16/71/85/70/sans_t18.jpg" border="0" alt="" /></a></div></td><td align="left"><div align="justify"> <font color="white">♠ Invités :</font> Vous pouvez poser toutes vos questions dans <a href="http://requiemaeternam.forumactif.com/f4-questions-suggestions?tid=256d16e0ddcd4127da5d1fbb05dd0db5" class="postlink">cette partie</a>. Un membre du staff viendra au plus vite pour vous répondre.<br><br> <font color="white">♠ {USER&#8288;NAME} :</font> Si tu rencontres le moindre problème, viens nous le dire <a href="http://requiemaeternam.forumactif.com/f4-questions-suggestions?tid=256d16e0ddcd4127da5d1fbb05dd0db5" class="postlink">ici</a>. Un des membres du staffounet viendra très vite et se chargera de t'aider. </div></td></tr></table> </div> <div id="co_2" class="mon_contenu" style="display: none;"><div align="center"><div style="background-color: ;-moz-border-radius:8px;gainsboro;width: 320px;height:100px"><font color="white">♠ <strong>CONTEXTE</strong> ♠</font><br><br><div style="width:320px;height:100px;overflow:auto;" class="contour2"> <div align="justify"><ul>Mystic Falls, février 2011,</ul>_ En venant habiter ici, vous avez pensé trouver la paix tant désirée et pourtant... Mystic Falls est le berceau même de la sorcellerie et l'étrange. En effet, elle a tendance à attirer toutes les créatures de la nuit, tels que les vampires ou les lycans ou, toutes sortes de sorciers et bien d'autres encore...<br> _ Parmi toute cette jolie pagaille, Elena Gilbert, jeune étudiante. Elle n'aurait jamais cru tomber amoureuse d'un vampire mais, voilà, Stefan est indéniablement le garçon qui fera toujours battre son coeur. Ce qu'elle ignore, c'est que son histoire d'amour n'est pas la seule intrigue en ville en ce moment. Bien d'autres humains sont au courant de l’existence des vampires et, cerise sur le gâteau, un gang de lycans -les Sons of the Moon- vient tout juste de débarquer.<br> _ Ces hommes et femmes, qui savent depuis toujours l’existence des immortels, tentent désespérément de faire vivre la ville dans le calme et l'ignorance car, que ce passerait-il si ce secret viendrai à être dévoilé ?</div></div><BR><div align="center"><div style="background-color: ;-moz-border-radius:8px;gainsboro;width: 320px;height:50px"><font color="white">♠ <strong>INTRIGUE 3 </strong> ♠</FONT><br><br><div style="width:320px;height:50px;overflow:auto;" class="contour2"> <div align="justify">_ Les sirènes des voitures de police se font entendre partout dans la ville. Mme Forbes, la shérif en chef, ne sait plus où donner de la tête tellement on la surcharge d'appels téléphoniques. " Oui ? Un autre cas ? J'arrive tout de suite ! " Téléphone à la main, elle gribouille une adresse sur son bloc-notes, déjà rempli, et se met en route. Cela fait une demi heure que l'on signale un peu partout des attaques graves d'animaux. Personne n'a vu l'animal en question mais, on sait qu'il n'a pas hésité à approcher la ville. Il a attaqué une poignée de personnes dans les environs de la fôret et, une autre vient d'être trouvée sur le seuil de sa maison. En arrivant, Forbes n'en croit pas ses yeux : c'est le voisin d'Elena Gilbert qui est à terre, le cou ensanglanté, à demi-conscient. Elle court vers lui et demande aux secouristes de lui laisser de l'espace. "Laissez-moi lui parler. Poussez vous !" En réalité, elle veut surtout être seule pour savoir ce qu'il a à lui donner comme informations. Vu son état, il ne va pas tarder à s'éteindre donc, autant que sa mort ne soit pas vaine. Les yeux vitreux et, dans un discours brouillé, l'homme fini par lui apprendre qu'Elena est partie avec Elena, ou... Qu'Elena est partie d'elle même ou... Qu'elle s'est faite enlever par une femme. Bref, l'homme est surtout sous état de choc et ses paroles n'ont aucun sens ou, du moins, c'est que pense le shérif. <a href="http://requiemaeternam.forumactif.com/t379-intrigue-3-panique-generale?tid=c8f520f037852c57376d793a9316af8b" class="postlink">-> More ?</a> </div></div><iframe width="320" height="28" src="http://www.youtube.com/embed/k6rQfPgEhlc" frameborder="0" allowfullscreen></iframe> </div></div> <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div> <div id="co_4" class="mon_contenu" style="display: none;"><br> <center> Votez pour <i>Requiem Aeternam</i> sur ces Top-Sites : <br><br><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=15041" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/cherry23/in.php?ID=4916" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/lilie/in.php?ID=6025" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/fanderp/in.php?ID=590" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/abysses/in.php?ID=5488" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/candymiam/in.php?ID=5187" class="postlink" target="_blank" rel="nofollow"><img src="http://i74.servimg.com/u/f74/14/04/92/52/i_icon10.png" border="0" alt="" /></a></center></div> </div></div></div></td></tr></table>

Mon problème ? Le contenu du 2, 3 et 4 n'apparaissent pas =s
J'ai -encore- fait une bêtise ? Pouvez vous m'aider ?

Ps.: ça me fait aussi un espace après ma pa ? Vous sauriez d'où ça vient =s ?

Merci d'avance !

Edit : Je viens de trouver la solution toute seule \o/ !!! Merci quand même *-*

Page d'accueil avec onglets

Page d'accueil avec onglets

Re: Page d'accueil avec onglets

Re: Page d'accueil avec onglets

Re: Page d'accueil avec onglets

Re: Page d'accueil avec onglets