La barre de navigation

[Yu']

Bonsoir,

Je voulais savoir comment on fait pour mettre une barre de naviagtion comme celle-ci, la ou il y a marqué, Accueil, Présentation, Divertissement & Partenariat et Pub, voici ce que je souhaite :

http://boysloveuniversity.forumactif.org/forum.htm

Merci d'avance de m'aider et a la personne qui pourra me dire cela.

[N0izette13]

Bonjour :')

Voici un Tuto pour faire Trois Sortes de Menu ;') Le Vôtre est : Menu Horizontal Caché Auto-Déroulant ~

https://forum.forumactif.com/trucs-et-astuces-f8/scripts-installation-menu-deroulant-t186834.htm

Cordialement N0izette13 :'P

[Yu']

Merci NOIzette ^^
J'y vais de ce pas en espérant que je comprenne lol

[Yu']

C'est normal que ça ne me donne pas de barre horizontale ? Car moi ça me donne verticale ^^'

[N0izette13]

Mmm ._. Étrange ?

Vous êtes Sûr d'Avoir Suivi le Tuto du Troisième Post ?

Sinon il Faudrait que J'Essaye le Tuto sur mon Forum :') Mais il est un Peu Tard pour Moi de le Faire Maintenant ._. A moins qu'il y a Quelqu'un pour vous Aidez

[Yu']

Ben oui mais ça ne me donne pas ce que je souhaite. Et une question le code qui est donné il faut le mettre directement sur la page d'acceuil ou dans un templates car ils disent qu'il faut le mettre dans la partie overall_header mais je trouve que overall_header_new et ça sera donc pas sur la page d'accueil ^^' voila, en tout cas merci de m'aider c'est très gentil

[Kevin3]

Même chose pour moi, j'ai suivi le post 3 en effaçant ce qu'il y avait après la ligne et en le remplaçant par le contenue du post 3 mais quand je valide mon menue et verticale et non horizontale...

Bien à vous

Edit : Oui Yu' moi je l'ai mis dans cette partie aussi et ça te le met bien mais de toute façon tu as possibilité de faire un "aperçu" avant de tout valider !

[Yu']

En faite c'est que je veux le mettre dans ma page d'accueil juste au dessus d'un image sur mon forum voila mais en tout cas je suis soulagée que c'est pas moi qui bug vu que je suis pas douée ben je pense toujours que c'est moi qui me suis plantée. En espérant que ça pourra fonctionner en tout cas ^^

[Kevin3]

Je viens de tester il faut que tu le colle dans :

PA -> Affichage -> Page d'accueil -> Généralité -> La ou tu voit ton encadrer de page d'accueil tu clic sur la coche verte HTML tu doit voir plein de truc bizarre tu le colle tout en haut

Mais je te conseil de faire un trait comme ça ----------------- entre ce qu'il y avait avant et ton menu ce qui te permet de le délimiter pour faire tes manips

Voilà j'espère que tu comprendras

[Yu']

Ok mais dans le cadre pour la page d'accueil je colle le code qu'ils ont donné ? Mais il faut bien faire ça, coller le code pour la barre verticale puis supprimer tout ce qui a après " Fin du CSS " en collant le code pour la barre horizontale ? Et est ce qu'il faut laisser " Fin du CSS " ou l'enlever ? Dsl de toutes ses questions mais je sais pas si des fois que capte tout bien ^^

[Kevin3]

Ok mais dans le cadre pour la page d'accueil je colle le code qu'ils ont donné ?

Je ne suis pas un expert mais oui tu colle le code qui après modif doit être :

Spoiler:

J'ai dejà fait quelques modif donc fait attention tu colle ça là :

Mais il faut bien faire ça, coller le code pour la barre verticale puis supprimer tout ce qui a après " Fin du CSS " en collant le code pour la barre horizontale ?

Voir code si desssus, par contre moi mon problème est la que je respecte ce qui est dit dans le tuto j'ai un menu verticale et non horizontale...

Et est ce qu'il faut laisser " Fin du CSS " ou l'enlever ?

Je pense que c'est mieux de l'enlever

[Yu']

Oui moi aussi ça me donne une barre verticale au lieu d'horizontale ^^' mais vraiment merci de m'aider. Vive l'entraide ^^ c'est sympa, j'espère que quelqu'un pourra nous aider pour le problème de la barre car c'est vraiment embetant de ne pas avoir ce qu'on veut meme si on respecte bien le formulaire

[Kevin3]

Je pense bien que quelqu'un va intervenir il faut juste attendre un peu

Bon courage

[Yu']

Merci toi aussi ^^

[N0izette13]

BinGo !! We Got iT :'D

Donc voila en Cherchant un Peu (Beaucoup) Il y a Eu Erreur dans le Tuto :') Logiquement un Menu Vertical ne Peu avoir le Même Code qu'un Menu Honrizontal :'P

Anyway voici le Lien du Topic :

https://forum.forumactif.com/probleme-avec-un-script-un-code-f74/probleme-menu-deroulant-t266323.htm?highlight=menu+honrizontal

Où tout Simplement le Code (Qui Fonctionne je l'ai sur mon Forum Test) Vous le Collez dans la Page d'Accueil ;')

Code:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
  for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
if (d) {d.style.display='block';}
}
//-->
</script>




<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>



<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

 
<dl>       
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
 
 
<dl> 
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>
</ul>
</dd>

</dl>

 
<dl> 
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>
<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

 
<dl> 
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="">Sous-Menu 4.1</a></li>
<li><a href="">Sous-Menu 4.2</a></li>
<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>.


Voila :'P

N0izette13~

[Yu']

Ca marche t'es un ange mais j'ai encore un problème ... En faite ça marche on voit la barre de navigation verticale mais on voit plus le fond de mon forum. Ca affiche un fond blanc alors que ça ne devrait pas etre le cas, est ce normal ? Dsl pour tout les problèmes et merci beaucoup d'avoir chercher ainsi, tu mériterais etre un membres du staff enfin une aidactif ^^

[N0izette13]

Wow :'0 Merci du COmplément :'3 Sinon~

Effectivement Moi AUssi ._. Mais :'D J'ai Reussis à Re-Coriger le Code :'P

Code:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
  for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
if (d) {d.style.display='block';}
}
//-->
</script>




<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: trans;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

 
<dl>       
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
 
 
<dl> 
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>
</ul>
</dd>

</dl>

 
<dl> 
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>
<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

 
<dl> 
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="">Sous-Menu 4.1</a></li>
<li><a href="">Sous-Menu 4.2</a></li>
<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>

Voila :'D Donc enfaite le "White" il faut le Remplacer par Trans (Pour Transparence)

Code:

background: white;

par

Code:

background: trans;

Aww Vive le HTML 8D ~

N0izette13

[Yu']

Ok je vais essayer mais lorsque tu mets dans la page d'accueil en haut il faut mettre en html ?
DE rien pour le compliment c'est normal ^^, tout le monde ne peut pas aider tout le monde, meme s'il a des gens qui aident les autres il en manque toujours ^^

[Yu']

Non c'est bon je retire ce que j'ai dit ça marche !!
Thank a toi <3

[Yu']

Une amélioration a faire ci possible ^^
Alors sur ce lien -> lui, lorsqu'on va sur Accueil par exemple on aperçoit Règlement & contexte mais qui ne se décale pas, enfin pour mieux comprendre lorsqu'on va par exemple sur présentation sur mon forum -> Celui-ci, l'image recule vers le bas, je sais pas si vous avez compris ^^' et moi je veux que ça fasse comme l'autre forum ou l'image reste a sa place en dessous & je voulais aussi savoir comment on centre la barre de navigation et qu'on rétrécit la largeur des cases. Merci d'avance

[N0izette13]

Bonjour :') & De Rien ~

Oui en Effet Moi Aussi J'Ai ça mais n'Étant pas Spécialiste en Codage, J'ne sais plus Quoi Faire D': J'ai Modifié et Sans Succès ._.

Je Recherche aussi cette Amélioration mais mon Savoir s'Arrête Ici :'S Je vais Chercher sur d'Autres Sites pour Essayer d'Arranger Cela :')

Désolé :'(

J'Espère qu'un bon Codeur passera Ici :'P

[Yu']

Ok pas grave merci ^^

[Yu']

Quelqu'un pourrait m'aider pour le problème que je veux résoudre svp

[Yu']

UP

[Invité]

Bonjour,

En fait, le site que vous avez pris en exemple à mis des "div" en balises et passe par le CSS pour paramétrer l'affichage et la position du menu et de l'image que se trouve en dessous de ce dernier.

Donc, pour votre forum, je vous propose une solution, elle fonctionne mais c'est coté à coup de lance Pierre. Si Final Blond ou Etana voit ça, ils vont être modérément d'accord ;p

► Bref, dans le CSS de votre forum (Panneau d'Administration >> Affichage >> Couleurs >> Feuille de Style CSS), il faut ajouter le code suivant :

Code:

/*grande image*/
#image{
background-image:url("http://i64.servimg.com/u/f64/13/94/00/18/untitl92.jpg");
width:782px;
height:272px;
}

Valider après l'avoir inséré.

► Ensuite, il va falloir faire une modification sur la page d'accueil. Panneau d'Administration >> Affichage >> Généralités : Il faut retirer l'image que vous avez mise, elle qui se trouve actuellement en dessous de votre menu.

► A la suite de la dernière balise </div> de votre menu, il faut rajouter :

Code:

<br /><center><div id="image">
</div></center>


et enregistrer.

Voici ce que j'obtiens sur mon forum de test :

[Yu']

Il y a un problème, j'ai fait comme vous me l'avez indiqué mais ça me met deux fois l'image que j'ai et ça décale toujours l'image ^^'

[Invité]

Re,

Non, vous n'avez pas fait ce que j'ai dit car quand je regarde le code source de votre forum, je ne retrouve pas <div id="image">. Vous n'avez pas lu correctement les instructions

D'ailleurs, même le bout que j'ai dit de rajouter concernant le CSS n'y ait même pas.

http://himitsu-rpg.forumactif.com/forum.htm

[Yu']

Normal je l'ai enlevé parce que ça me mettait deux fois ma meme image je vais réessayer pour voir & je préviendrais ici

[Invité]

Re

D'accord mais il n'y a pas de raison qu'elle soit en double puisque vous devez d'abord la supprimer avant de mettre <div id="image">. Car c'est la balise div qui mettra l'image.

[Yu']

Ok mais ça se décale toujours ^^' :

Spoiler: