Sujets similaires

Bonjour, alors j'aurais deux questions, concernant des onglets.
J'aimerais pouvoir faire une page d'accueil comme ceci (http://liketomoveit.forumactif.com/forum.htm) mais bien sur je l'adapterai à mon forum je ne veux pas le même juste connaitre le principe et pour le forum comme (http://wfwp.forumactif.com/forum.htm).

J'ai trouvé un tutoriel en chercher dans les autres demandes ici :
http://www.supportduweb.com/scripts_tutoriaux-code-source-48-systeme-d-onglets-en-javascript-x-html-et-css-dans-la-meme-page.html

Seulement je ne sais pas trop ce que je dois faire.
Dois je héberger le script et si oui ou dois je par la suite l'installer ?
Que dois je modifier ?
En gros comment cela fonctionne t il ?

Merci d'avance pour vos réponse <3

Tu ne fais que prendre le script qu'ils donnent et le coller dans la page d'accueil, par contre il fait bien savoir le modifier.

Si tu veux je peux t'aider dans sa mise en place~

Si ça ne pose pas de problème je veux bien mais comment on procède, je te donne le lin de mon forum test ou on le fait ici ?

On peut le faire ici si tu veux, tout en me donnant le lien de ton forum test pour pouvoir voir les problèmes que tu expérimentes~

C'est comme tu veux et quand tu veux =D

Je t'envoi le forum test par MP, j'ai encore rien commencé c'est l'ancien thème -_-
On prépare les un an du forum et veux faire un beau thème ^^

Donc si j'ai bien compris je met le script dans la page d'accueil ?

xD d'accord~

Donc oui, c'est ça. Dans le code, il y a cette partie-là:

Code:: <style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>

Si tu veux, tu peux l'enlever et le mettre dans la feuille de style, tout en enlevant le

Code:: <style></style>

x) En gros c'est la partie CSS incorporée dans le code.

Ensuite, il faut savoir combien tu veux d'onglets et si tu veux qu'ils se changent au survol de la souris ou si tu veux qu'on clique dessus~

J'ai retiré le CSS du code et mis dans la bonne partie mais ca ne marche pas quand je l'enlève -_-
Et j'aimerais que en surlignant au passage de la souris ca change si c'est possible =)

Pour le nombre d'onglet, je pensais a 4 ou 5

Tu as bien mit cette aprtie-ci dans le CSS?

Code:: .onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}

Si ça ne marche pas tu peux simplement le laisser à l'intérieur~

Donc pour les onglets, c'est bien simple. Il y a deux parties au code: celle-ci

Code:: <div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
</div>

Qui est la partie "onglet", et celle ci:

Code:: <div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>

Qui est la partie "contenu". Pour créer un onglet, il faut suivre la démarche dite sur le site~ tu ajoutes deux onglets pour en avoir 5 en tout, ne te préoccupe pas de changer le nom, on va faire ça plus tard x)

J'espère que tu me suis ._. j'aurais aimé mettre les codes sous spoiler pour plus de visibilité, mais ceux-ci ne fonctionnent pas donc xD

Oui je te suis merci encore =)

J'ai bien mes 5 onglets mais quand je clique sur les deux autres ils ne s'ouvrent pas -_-

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

Je crois que c'Est parce qu'ils ont le même nom~
*change les noms des deux autres*

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_comment" onclick="javascript:change_onglet('commenti');">Comment</span>
<span class="onglet_0 onglet" id="onglet_why" onclick="javascript:change_onglet('why');">Why</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:

<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,

Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_comment">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_why">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

Ça devrait être bon comme ça. Vérifie si ça marche et ensuite je t'expliquerai comment changer les noms~

Moi j'ai juste une question à propos de ce code !
Est-ce qu'on peut arrondir le tableau, de la même manière que sur CSS par exemple ! Non ils n'ont pas d'onglet mais tout ce qu'ils entourent et arrondie ^^

Oui, on peut facilement arrondir le tableau, mon forum test en est la preuve:
http://ktrash-test.forumactif.com/

Pour arrondir le tableau en question, il faut ajouter les propriété suivantes à la classe "contenu_onglet" dans le CSS:

Code:: -moz-border-radius: -px;
-webkit-border-radius: -px;
border-radius: -px;

Afin d'avoir la compatibilité avec le plus de navigateur possible.

Ouais merci mais en faite, j'ai cherché a partir des problèmes résolus et j'ai trouvé avec un autre tuto ^^
Je suis entrain de faire des tests pour plus moins arrondir ^^

Le truc c'est que je suis débutant alors je connais pas les codes encore mais j'apprends vite mdr (surtout grâce à ce forum qui est très pratique ! je suis entrain de faire toute ma PA avec xD)

xD Ne t'inquiète pas, tout le monde a déjà été débutant, quand je suis arrivée sur le forum j'étais au niveau 0/20~ Déjà là ça aide pas.

Si tu as besoin d'aide dit-le =D

Ben j'voudrais savoir. Est-ce que le code peut s'adapter dans le tableau de ma PA ou il va prendre toute la PA, ou du moins le déformer !

Si oui merci de me renseigner parce que pour le moment, j'le fais sur une page htlm à part et j'ai un peu peur ! http://ny-m39.forumactif.com/onglet-h2.htm

Tu regardera ma PA pour mieux comprendre de quoi je parle (si tu as le droit de toute manière, le forum n'est pas ouvert) et je compte le caser à la place de l'image à droite ! !

Si ton image est dans un tableau, le code devrait s'adapter sans problème. Regarde:
http://ktrash-test.forumactif.com/forum.htm

Je viens de le tester justement~~

Ok merci ^^
c'est impressionnant la vitesse à laquelle vous répondez ^^
Bon faut pas trop d'onglet sinon ça bug un peu lol

Ha c'est si impressionnant que ça? XD
Bah il peut y avoir plusieurs onglets, ils doivent juste être ajustés s'il y en a un qui ne rentre pas, comme diminuer la grosseur de l'onglet, rapetisser l'écriture, etc~

Encore des soucis, comment faire pour que l'image prenne tout le contenu de l'image sans être déformé ??? Et pourquoi mon image déborde sur les onglet ??

Aperçu
http://ny-m39.forumactif.com/Apercu-pa-h3.htm

Mon code :

Code:: <style></style><div class="titre"> BIENVENUE dans la prison carcérale de Manhattan</div>
<table width="100%"><tbody><tr>
<td rowspan="2" style="border-right: 1px dashed rgb(0, 0, 0); text-align: center;" ;="" valign="top" width="25%">
<br>
<br><a href="http://ny-m39.forumactif.com/rules-f15/">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/regles10.jpg"></a>
<br><a href="http://ny-m39.forumactif.com/background-f14/">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/contex11.jpg"></a></a>
<br><a href="http://ny-m39.forumactif.com/dossier-m39-f4/">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/gangs_10.jpg"></a></a>
<br><a href="http://ny-m39.forumactif.com/fiches-controlees-f7/">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/fiches10.jpg"></a></a>
<br><a href="http://ny-m39.forumactif.com/profile.forum?mode=register">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/rejoin10.jpg"></a></a>
<br><a href="http://ny-m39.forumactif.com/msg.forum?mode=post&u=1">
<img src="http://i68.servimg.com/u/f68/13/38/53/52/contac10.jpg"></a></a>
</a>
<br><a href="http://ny-m39.forumactif.com/zone-publicitaire-f12/nous-lier-t20.htm#61"
<img src="http://i68.servimg.com/u/f68/13/38/53/52/nous_l10.jpg"></a></td>
<td colspan="3" style="border-bottom: 1px dashed rgb(0, 0, 0);" width="75%"> <div style="font-family: Impact;" class="imagepa"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px dotted silver;
cursor:pointer;

}
.onglet_0
{
background:#000000;
border-bottom:1px dotted silver;
color: #FFFFFF;
font-family: impact, serif;
text-transform: uppercase;
}
.onglet_1
{
background:#FFFFFF;
border-bottom:0px dotted silver;
padding-bottom:4px;

font-family: impact, serif;
text-transform: uppercase;
color: #000000
}

.contenu_onglet
{
background-color:#000000;
border:1px dotted silver;
margin-top:-1px;
padding:5px;
display:none;
color: #D9D4B9;
-moz-border-radius:5px;
-webkit-border-radius:10px;
border-radius:10px;
background-image:url('http://i13.servimg.com/u/f13/11/83/54/29/1310.jpg');
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Rappel</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Poste vacant</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">News</span>

</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<div style="font-family: Impact;" class="imagepa"><div style="text-align: center;">Nous vous rappelons
<br>le langage sms est interdit sur ce forum
<br>Très bon niveau de Rp exigé. 20 lignes minima.
<br>le JDR dans lequel vous allez évoluer est violent et anarchique.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<font style="color: rgb(204, 0, 0);" size="2">la zone RP est interdite aux invités.
<br></font><font size="2"><span style="color: rgb(204, 0, 0);">le forum est interdit aux mineurs
</span><br></font>
<br>
<br></div>

</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,

Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_comment">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div><div class="contenu_onglet" id="contenu_onglet_why">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html></div>
</td>
</tr>
<tr>
<td style="border-right: 1px dashed rgb(0, 0, 0); text-align: left; valign="top"; " width="25%"><div class="titre">Nos partenaires</div>
<br><a href="http://zestedecouleurs.forumactif.org/forum.htm">
<img src="http://images.imagehotel.net/vgtq3lcs2n.gif"></a>
<br>...
<br>...
<br>
<br>
<br>
<br>
<br></td>
<td style="border-right: 1px dashed rgb(0, 0, 0); text-align: left; valign="top"; " width="25%"><div class="titre">VOTER</div>
<br>...
<br> ...
<br>...
<br>...
<br>
<br>
<br>
<br>
<br></td>
<td style="border-right: 1px dashed rgb(0, 0, 0); text-align: center;" ;="" valign="top" width="25%"><div class="titre">Information</div>
<br><div class="infomenu"> Forum créé par Joke
<br> Le forum est actuellement en construction. Même si nous avançons vite nous ne pouvons vous donner une date d'ouverture. Merci de votre compréhension
<br>
<br>
</div>
</td>
</tr>
</tbody></table>


<table style="position: fixed; bottom: 50px; left: 0px; z-index: 10000;">
<tbody><tr>
<td>
<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
</td>
<td style="vertical-align: bottom;">
<img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"></td></tr></tbody></table>

Je ne sais pas, personnellement o__o

Tu peux me montrer le CSS de ton forum aussi?

Je suppose que tu parle du CSS de l'image ^^

Code:: .imagepa { background-image: url("http://i49.tinypic.com/16tngh.jpg") !important;
background-repeat: no-repeat !important;
background-position: center top !important;}

Et si tu essaies de faire ceci à la place:

Code:: .imagepa { background-image: url("http://i49.tinypic.com/16tngh.jpg") !important;
background-repeat: no-repeat !important;
background-position: center bottom !important;}

Est-ce que l'image dépasse toujours?

BOn déjà ça dépasse plus ! Y a plus qu'à régler mon autre problème ! Quelqu'un sait ??

P-S : désolé si j'ai empiété sur la demande d'un autre xD

Euh pour que le code soit moins long, j'peux pas mettre le javascrit autre part dans l'index-body ? Les templates ?? (j'pense c'est possible mais je sais pas où xD)

Moi j'ai mit de page d'Accueil dans le template index_body, au tout début juste avant

Code:: {JAVASCRIPT}

Mais dans ce cas-là, ton code ne sera plus avec le reste de ta PA ._.

ça c'est pas un problème, si ça peut me débarrasser un peu parce que franchement c'est lourd autant d'info (surtout pour moi, simple débutant) !
je dois virer les balises script je suppose ?

Onglet accueil + forum

Onglet accueil + forum

Sujets similaires

Sujets similaires

Partenaires Or