Sujets similaires

Ouep donc moi c'est carrément ce que j'ai fait, je l'ai mit dans le template index_body, à l'emplacement que je viens de te dire.
Par contre peut-être qu'il faudra que tu fasses des modifications par la suite~

ok merci

Ikø' a écrit:

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" />
.......
//-->
</script>
</body>
</html>

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

C'est bon ça marche nikel !
J'ai vu qu'on pouvait le mettre dans les templates, comme je dois procédé ? Enfin surtout quel partie du code je dois placer et à quel endroit ?

*Je m'incruste dans le sujet*
Est-ce qu'on peut y mettre aussi dans un sujet ou seulement sur la pa ?

Je pense qu'on peut aussi le mettre dans un sujet tant que le html est activé. Fait l'essai et tu seras direct =)

Donc pour répondre à ta question Nina, tu peux mettre le code Javascript dans l'index_body, au tout tout début avant {JAVAscript et tu peux mettre le code css dans ta feuille CSS !

Bien sûr, il faudra penser à retirer les balises

Code:: <script>

et

Code:: <style type="text/css">

ça c'est le code JAVA

Code:: <script><!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">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}

Code 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;
}

Le reste c'est du HTLM et c'est mieux de le mettre dans la PA Mdr (de toute façon tu peux pas le mettre autre part)

C'est moi, ou il y a la réponse rapide dans mon post ?? Comprend pas le bug

Je crois que ton message à buger M39 -_-

Deuxième tentative !

M39 a écrit:

Donc pour répondre à ta question Nina, tu peux mettre le code Javascript dans l'index_body, au tout tout début avant {JAVAscript et tu peux mettre le code css dans ta feuille CSS !

Bien sûr, il faudra penser à retirer les balises

Code:: <script>

et

Code:: <style type="text/css">

ça c'est le code JAVA

Code:: <script><!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">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}

Code 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;
}

Le reste c'est du HTLM et c'est mieux de le mettre dans la PA Mdr (de toute façon tu peux pas le mettre autre part)

C'est moi, ou il y a la réponse rapide dans mon post ?? Comprend pas le bug

J'ai mit mon code :

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:2px solid #EA86C0;
-moz-border-radius: 6px;
cursor:pointer;
}
.onglet_0
{
background:#FAFBFC;
border-bottom:2px solid #FAFBFC;
-moz-border-radius: 6px 6px 0px 0px;
}
.onglet_1
{
background:#FAFBFC;
border-bottom:2px solid #FAFBFC;
-moz-border-radius: 6px 6px 0px 0px;
padding-bottom:-3px;
}
.contenu_onglet
{
background-color:#FAFBFC;
border:2px solid #EA86C0;
-moz-border-radius: 6px;
margin-top:2px;
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_identity" onclick="javascript:change_onglet('identity');">Identity</span>
<span class="onglet_0 onglet" id="onglet_history" onclick="javascript:change_onglet('history');">History</span>
<span class="onglet_0 onglet" id="onglet_more" onclick="javascript:change_onglet('more');">More</span>
<span class="onglet_0 onglet" id="onglet_relationships" onclick="javascript:change_onglet('relationships');">RelationShips</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_identity">
<h1>Identity</h1>
nom, prénom, etc

<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_history">
Histoire

</div>
<div class="contenu_onglet" id="contenu_onglet_more">
Caractère, Distinction
</div><div class="contenu_onglet" id="contenu_onglet_relationships">
Relations

</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

Mais cela me fait :
Onglet accueil + forum - Page 2 Sans_t10

Bon STOP !
Je vais pas m'amuser à éditer tout les posts --
M39 quand on utilise n'importe quelle balise on la met dans un code sinon ça fait tout sauter --

Heu M39 je vois plus rien sur mon forum maintenant -_-

Dans un sujet ça bugue en fait, je sais pas pourquoi mais ça marche pas.

Rectifier, merci de ton aide mais je vais attendre la réponse d'Ikø' =)

J'ai pas suivi à moitié le rester de la convo, j'étais en examen, désolée ._.

Quel est le problème exactement? Si ça concerne les sujets, je n'ai malheureusement aucune réponse.

Ok kimy, je m'en souviendrais ^^
Mais je peux pas mieux t'expliquer Nina... chez moi ça marche comme ça...

Iko en fait c'est ce que tu as expliqué à M39 que je n'arrive pas, mettre le code Java dans le templates pour que les onglets soit dedans mais j'y arrive pas -_-

Ha d'accord~

En fait, tu as ton code d'onglets qui est dans ta page d'accueil. Tu ouvres le template index_body, et en haut tu vas voir ceci:

Code:: {JAVASCRIPT}

Tu colles ton code entier directement sous ça. Ça te permet de sauver de l'espace au niveau de la page d'accueil si tu veux l'utiliser pour autre chose, etc.

Bonjour

je m'incruste dans le sujet ^^

Voilà, j'aimerais savoir ce que personnalisent précisément :
.onglet
.onglet_0
.onglet_1

C'est à dire l'onglet au survol, ou le premier onglet ou....

Aussi j'ai utilisé des images pour chaque onglet, pour le titre de chaque onglet correspond une image. Pour "Quoi" par exemple, j'ai donc ce code :

Code:: <span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/welcome.png></span>

Et j'aimerais savoir comment faire pour que lorsque j'affiche le contenu de l'onglet" Partenaires" j'ai ça : Onglet accueil + forum - Page 2 Partenaires

J'affiche ensuite le contenu de l'onglet "Welcome" ; l'onglet Partenaire devient ça ( oui, il y a une légère différence ): Onglet accueil + forum - Page 2 Partenaires-s

Onglet accueil + forum - Page 2 Partenaires-s

gucci! a écrit:

J'ai mit mon code :

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:2px solid #EA86C0;
-moz-border-radius: 6px;
cursor:pointer;
}
.onglet_0
{
background:#FAFBFC;
border-bottom:2px solid #FAFBFC;
-moz-border-radius: 6px 6px 0px 0px;
}
.onglet_1
{
background:#FAFBFC;
border-bottom:2px solid #FAFBFC;
-moz-border-radius: 6px 6px 0px 0px;
padding-bottom:-3px;
}
.contenu_onglet
{
background-color:#FAFBFC;
border:2px solid #EA86C0;
-moz-border-radius: 6px;
margin-top:2px;
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_identity" onclick="javascript:change_onglet('identity');">Identity</span>
<span class="onglet_0 onglet" id="onglet_history" onclick="javascript:change_onglet('history');">History</span>
<span class="onglet_0 onglet" id="onglet_more" onclick="javascript:change_onglet('more');">More</span>
<span class="onglet_0 onglet" id="onglet_relationships" onclick="javascript:change_onglet('relationships');">RelationShips</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_identity">
<h1>Identity</h1>
nom, prénom, etc

<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_history">
Histoire

</div>
<div class="contenu_onglet" id="contenu_onglet_more">
Caractère, Distinction
</div><div class="contenu_onglet" id="contenu_onglet_relationships">
Relations

</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

Mais cela me fait :
Onglet accueil + forum - Page 2 Sans_t10

Est-ce que vous aez une solution ? :$

Ikø' a écrit:

Ha d'accord~

En fait, tu as ton code d'onglets qui est dans ta page d'accueil. Tu ouvres le template index_body, et en haut tu vas voir ceci:

Code:: {JAVASCRIPT}

Tu colles ton code entier directement sous ça. Ça te permet de sauver de l'espace au niveau de la page d'accueil si tu veux l'utiliser pour autre chose, etc.

Ikø' J'y arrive pas du tout -_-
Est ce que tu pourrais me dire exactement ce qu'il faut mettre et ou s'il te plait ?
J'ai essayé plein de fois et à chaque fois, ça donne rien, soit j'ai plus de PA ni de sous forum, soit le code apparait,soit y a juste les onglets enfin la cata -_-

Bonjour,

Alors moi je te propose un code semblable qui te donneras les même fonctionnalités.

Pour commencer, va sur ton Panneau d'Admin >> Module >> Pages HTML >>Créer une nouvelle page.

Avant, vérifie bien qu'il y a bien cette image :

au-dessus du champ texte.

Ensuite à ces deux questions coche non:
Voulez-vous utiliser le haut et le bas de page de votre forum ?
Utiliser cette page en tant que page d'accueil ?

Puis tu colles ceci dans ta page HTML et tu enregistres:

Code:: //

Tout est bon jusque là ??

Alors on continue.

Ensuite tu copies l'adresse de ta page HTML que tu colleras dans une balise sricpt que voici:

Code:: <script language="javascript" src="adresse de ta page html script onglet"></script>

Ce code, tu peux le placer à deux endroits:
- soit dans ton template overall_header_new juste avec la balise < /head> mais pour cela il faut que tu soit la fondatrice de ton forum;
- soit dans la description de ton forum.

C'est bon, on peut continuer ??

Alors passons maintenant à la création de tes onglets. Pour cela, il te suffit de copier et de coller ce code dans ta PA:

Code:: <div class="systeme_onglets">

<div class="onglets">
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
</div>

<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
</div>
</div>
<script type="text/javascript">
//
</script>

La valeur que tu donneras à cette ligne: var anc_onglet = 'nom_de_longlet', qui se trouve en fin de code correspond à l'onglet qui s'affichera à chaque fois que tu rechargeras la page.

Il est évident que tu peux personnaliser tes onglets avec du CSS. Voici donc un code CSS de base modifiable bien évidemment:

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;
}

Pour finir, si tu souhaites rajouter des onglets, il te suffiras de rajouter ceci dans la partie "onglet":

Code:: <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>

et ceci dans la partie "contenu_onglet":

Code:: <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

En espérant avoir pu t'aider.

Merci beaucoup mais ce n'est pas ce que je recherche, j'aimerai vraiment que les onglets soit intégré à la page d'accueil comme sur le forum test de Iko.
Et je ne sais pas pourquoi, je n'ai aucune description de mes onglets, juste les onglets sur ma page d'accueil avec ton code :/
Je dois vraiment être nulle Sad

As-tu bien mis la description des onglets entre cette balise < div class="contenu_onglet" id="contenu_onglet_nom_de_longlet"> et cette balise < /div> ??

Oui -_-

Onglet accueil + forum

Onglet accueil + forum

Sujets similaires

Sujets similaires

Partenaires Or