SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Bonjour,

J'ai un script pour une barre de menu en css et html, mais impossible de savoir où le placer dans un template, et j'ai fouillé, trituré, bref, ça ne le fait nulle part.
Spoiler:
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;
color: #fff;
font-weight: bold;
background-image: url('http://img4.hostingpics.net/pics/81473gradient3.png');
border: none;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background-image: url('http://img4.hostingpics.net/pics/81473gradient3.png');
border: none;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 7%;
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('smenu1');">Accueil</dt>
<dd id="smenu1">
<ul>
<li><a href="http://fil-town.forumactif.com/index.htm" target="_blank">Index</a></li>
<li><a href="http://fil-town.forumactif.com/portal.htm" target="_blank">Portail</a></li>
<li><a href="http://fil-town.forumactif.com/faq.htm" target="_blank">FAQ</a></li>
<li><a href="http://futilitiz-city.forumactif.com/search.forum" target="_blank">Search</a></li>
</ul>
</dd>
</dl>
   
<dl>         
<dt onmouseover="javascript:montre('smenu2');">Membres</dt>
<dd id="smenu2">
<ul>
<li><a href="http://fil-town.forumactif.com/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://fil-town.forumactif.com/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
   
   
<dl>   
<dt onmouseover="javascript:montre('smenu3');">Profil</dt>
<dd id="smenu3">
<ul>
<li><a href="http://fil-town.forumactif.com/profile.forum?mode=editprofile" target="_blank">Infos</a></li>
<li><a href="http://fil-town.forumactif.com/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://fil-town.forumactif.com/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://fil-town.forumactif.com/search.forum?search_id=watchsearch" target="_blank">Watch sujets</a></li>
<li><a href="http://fil-town.forumactif.com/search.forum?search_id=newposts" target="_blank">New Posts</a></li>
<li><a href="http://fil-town.forumactif.com/search.forum?search_id=egosearch" target="_blank">My Posts</a></li>
<li><a href="http://fil-town.forumactif.com/search.forum?search_id=unanswered" target="_blank">0 Reponse</a></li>
</ul>
</dd>
 
</dl>
 
   
<dl>   
<dt onmouseover="javascript:montre('smenu4');">Messagerie</dt>
<dd id="smenu4">
<ul>
<li><a href="http://fil-town.forumactif.com/msg.forum?folder=inbox" target="_blank">In Box</a></li>
<li><a href="http://fil-town.forumactif.com/msg.forum?folder=sentbox" target="_blank">Sended Box</a></li>
<li><a href="http://fil-town.forumactif.com/msg.forum?folder=outbox" target="_blank">Waiting Box</a></li>
</ul>
</dd>
</dl>
 
   
<dl>   
<dt onmouseover="javascript:montre('smenu5');">Switchers</dt>
<dd id="smenu5">
<ul>
<li><a href="http://fil-town.forumactif.com/login.forum?connexion" target="_blank">Log In</a></li>
<li><a href="http://futilitiz-city.forumactif.com/login.forum?logout=true" target="_blank">Log Out</a></li>
<li><a href="http://fil-town.forumactif.com/profile.forum?mode=register" target="_blank">Register</a></li>
</ul>
</dd>
</dl>
   
</div>
Le voici tel qu'il est dans une page HTML.

Mais dans le template overall_header_new même dans une table, le fond de page disparait ainsi que la couleur de fond......


Merci.



Dernière édition par final-blond le 10/4/2009, 19:58, édité 2 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Hum...
Le code est en BBCode... j'imagine que c'est lors de l'édition du message que ça s'est produit. Tu pourrais remettre le code ?

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Hello,

Ayé j'ai corrigé et j'ai dû changer de navigateur^^


Merci à toi.

EDIT : Ah oui, ça devrait donner ça

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Hum, OK, je vois. Regarde dans le code CSS qui va avec :
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
Le menu utilise un attribut "body", hors, le forum utilise ce même attribut pour le fond de page...
Essaye de remplacer tous les "body" de ton code (CSS+Menu) par autre chose, genre "bodymenu"

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
ze_chaofan a écrit:Essaye de remplacer tous les "body" de ton code (CSS+Menu) par autre chose, genre "bodymenu"
Euh, il n'y en a qu'un de "body" c'est ça ?
Ou il faut aussi modifier tous les menu ?



EDIT : Oh ça le fait ZE, juste en modifiant le "body" du CSS !
Arf, maké shame on me...


Merci beaucoup ze_magicien !

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
De rien.
Je pensais qu'il y aurait pu en avoir plusieurs, mais si non, ça marche quand même...

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Oui ça fonctionne comme tu le dis et il n'y a qu'un "body".

J'ai résolu pour moi.

Mais si ça intéresse quelqu'un, ce n'est pas mon tuto (mais du FDF), et il suffit de modifier l'adresse du forum après le http:// dans les liens de renvoi, les catégories seront déjà là.
Bien sûr les images ou les couleurs de fond, les couleurs, ET la modif du body en bodymenu au début du css.

Il se met en toute fin du template overall_header_new pour l'avoir en barre de menu.

Voilà.

avatar
Invité
Invité
Pas mal ce script

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Hello Laurent,

Laurent a écrit:Pas mal ce script
Mouais il est pas mal, mais il n'est pas abouti...
- D'abord l'erreur dans le css que ZE a corrigée.
- Maintenant je cherche (avec ProgVal) comment fermer la dernière fenêtre une fois le curseur passé ou en cliquant en dehors de la barre.
Deux tares de taille.

Dès que ça sera réglé, on pourra dire que c'est un script viable, au moins ça... geek

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
final-blond a écrit:Dès que ça sera réglé, on pourra dire que c'est un script viable, au moins ça... geek
C'est réglé grâce à ze_chaofan et surtout au script abouti et efficace de ProgVal.
La barre de menus est vraiment chouette et pourrait être mise dans les astuces avec à l'origine de Alexarbitre du FdF.
Je n'en suis même pas vraiment sûre parce que le script est de ProgVal et sans la fermeture des fenêtres une fois le passge du curseur, je ne vois pas comment cette barre pouvait être utile ? Comme pour le "body" au lieu du "menubody" du css qui lui supprimait le fond de la page^^
Bon je laisse aux admins la décision de l'endoit où placer ce tuto, mais comme il en intéresse plus d'un (Laurent et moi), je mets ici le tout corrigé et en tuto :

Tout d'abord le javascript et le css sont à placer en phpBB2 dans le template overall_header_new juste avant
Code:
</head>
en laissant quelques interlignes avec le dessus pour le retrouver facilement en cas de mofications (du css surtout).
Code:
<script type="text/javascript"><!--

function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
document.getElementById('smenu2').style.display='none';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';
document.getElementById('smenu5').style.display='none';
}
//-->
</script>
de ProgVal
Si vous voulez ajouter un menu ou une case, il vous suffit de continuer la numérotation après
document.getElementById('smenu5').style.display='none';

Le CSS est à placer juste à la suite du javascript, donc toujours avant la balise "/head".
Code:
<style type="text/css" media="screen">
<!--
bodymenu {
margin: 0;
padding: 0;
background: white;
font-family: verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #ffffff;
font-weight: bold;
background-color: transparent;
background-image: url('');
border: none;
margin: 1px;
}
#menu { height: 210px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background-image: url('URL_DE_VOTRE_IMAGE_DE FOND_DES_SMENUS');
border: none;
}
#menu li a, #menu dt a {
color: #000000;
text-decoration: none;
display: block;
height: 7%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eeeeee;
}
#site {
position: absolute;
z-index: 1;
top : 72px;
left : 10px;
color: #000000;
background-color: #dddddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>
Ici tout est personnalisable selon vos goûts et vos désirs.
Vous pouvez mettre des backgroud-color en lieu et place des images, surtout en lieu et place des boutons pour que ça fassent des cases colorées.
Si vous voulez y mettre des boutons quelqu'ils soient, il vous faut faire ceci ici dans le css :
#menu dt {
cursor: pointer;
text-align: center;
color: #ffffff;
font-weight: bold;
background-color: transparent;
background-image: url('');
border: none;
margin: 1px;
Et l'image du bouton c'est plus bas.


Suite dans le prochain pots.



Dernière édition par final-blond le 13/4/2009, 00:58, édité 1 fois

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
La dernière partie est à placer où vous voulez votre barre de menus, mais pour qu'elle apparaisse juste au dessus du bloc de publicités, vous la placerez tout à la fin du même template après
Code:
<!-- END html_validation -->
en laissant aussi quelques interlignes.

Code:
<table  border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td align="center">

<div id="menu">

<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Accueil" /></dt>
<dd id="smenu1">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Index</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Portail</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">FAQ</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Search</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">         
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Membres" /></dt>
<dd id="smenu2">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Membres</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>    
   
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Profils" /></dt>
<dd id="smenu3">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Infos</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Preferences</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Avatar</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Watch sujets</a></li>
<li><<a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">New Posts</a></li>
<li><a href="http://www.sos-forum.com/search.forum?search_id=egosearch" target="_blank">My Posts</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">0 Reponse</a></li>
</ul>
</dd>
 </dl> 
   
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Messagerie" /></dt>
<dd id="smenu4">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">In Box</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Sended Box</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Waiting Box</a></li>
</ul>
</dd>
</dl>
    
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">   
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Switchers" /></dt>
<dd id="smenu5">
<ul>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Log In</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Log Out</a></li>
<li><a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">Register</a></li>
</ul>
</dd>
</dl>
   
</div>
</td></tr></tbody>
</table>

Pour des boutons à la place du texte, ça se passe ici :
Code:
<dt><img src="URL_DE_VOTRE_BOUTON" border="0" alt="Accueil" /></dt>
si vous préférez du texte, il vous faudra mette une couleur ou une image dans background indiqué au dessus (ou pas) ainsi :
Code:
<dt>TEXTE</dt>

Et voilà le résultat avec des boutons en titre des menus > ICI <
Le fond des sous-menus est une image dans le css ici, bien sûr vous faites comme vous voulez
#menu li {
text-align: center;
background-image: url('URL_DE_VOTRE_IMAGE');
border: none;
}



EDIT : Comme dit plus haut, si vous voulez garder les mêmes sous-menus ou quelques uns, il vous suffit de remplacer le "VOTRE_FORUM.LIEN" par l'adresse de votre forum ici :
Code:
<a href="http://VOTRE_FORUM.LIEN/profile.forum?mode=register" target="_blank">

Attention à la numérotation (avec le javascript aussi) si vous ajoutez ou supprimez des menus.

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Enfin, si on supprime, c'est pas trop grave. Si on ajoute, là, il faut faire attention, effectivement.

Et sinon, je conseille de supprimer target="_blank", car ça ouvre dans un nouvel onglet (ce qui est assez embêtant)

avatar
nirupan
(Membre)
Voir le profil de l'utilisateur http://www.tamilfriends.forumpro.fr/
merci beaucoup pour ce script Wink

avatar
k@k
(Membre)
Voir le profil de l'utilisateur http://vw-aircooled-only.forums-actifs.com
Bonjour,
p'tite question à final-blond vous avez mis un lien qui peu nous rediriger vers celui-ci -->juste là avec un effet qui m'interresse fortement celui du petit son que l'on entend lorsque l'on passe le curseur sur l'un des boutons mais le problème et que je ne sais pas faire .
Alors si quelqu'un pouvais m'aider et surtout m'expliquer.

Et passant super le script pour la barre de navigation

Merci d'avance.

k@k...

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Hello k@k,

Le son qui t'intéresse est incorporé dans la bannière flash.
Comme on l'avait réalisée pour notre forum à l'époque, je ne saurais te dire comment le faire, sorry.

Wink

avatar
k@k
(Membre)
Voir le profil de l'utilisateur http://vw-aircooled-only.forums-actifs.com
Bon alors je lance un appel à qui s'ai faire cet effet ???

Merci quand même de votre réponse final-blond


k@k...

avatar
nirupan
(Membre)
Voir le profil de l'utilisateur http://www.tamilfriends.forumpro.fr/
Bon alors je lance un appel à qui s'ai faire cet effet ???
Il faut que tu demande a quelqu'un qui sait utiliser Flash CS4 ou DreamWeaver CS4, si tu veux le faire tout seul il y a plein de tuto sur le web

Aurais-je répondus a ta question ?


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit | Informatique et Internet | Publicité en ligne