menu vertical CSS javascript

menu vertical CSS javascript - HTML/CSS - Programmation

Marsh Posté le 07-06-2006 à 18:12:53    

bonjour,
j'ai utiliser le tutoriel du site alsacreation pour creer un menu vertical. (la variante)
http://css.alsacreations.com/Const [...] horizontal
 
j'ai 2 rendus differents 1 sous IE et 1 sous FF.
http://test.free.fr/ie.jpg  
mouseover sur le club sous IE
 
http://ftest.free.fr/ff.jpg  
mouseover sur le club sous FF
 
j'aimerais que le rendu soit celui de FF sur tout les navigateurs.
 
voici mes ligne de codes.
CSS
ul {
 margin: 0;
 margin-bottom: 10px;
 padding: 0;
 list-style-image: url("../images/foot.gif" );
}
 
li {
 margin: 0;
 margin-left: 20px;
 margin-top: 4px;
 padding: 0;
}
 
#menu {
 width:168px;
 float:left;
 height:602px;
}
 
#menu dt {
 cursor: pointer;
 background: #fff;
 height: 20px;
 line-height: 20px;
 margin: 2px;
 border: 1px solid gray;
 text-align: center;
 font-weight: bold;
}
 
#menu dd {
 position: absolute;
 left: 120px;
 margin-top: -14px;
 width: 140px;
 background: #fff;
 border: 1px dashed gray;
}
 
#menu ul {
 padding: 2px;
 background:0;
 list-style-image: url("../images/foot.gif" );
}
 
#menu li {
 font-size: 10px;
 height: 18px;
 line-height: 18px;
 background:0;
}
 
#menu li a, #menu dt a {
 color: #000;
 text-decoration: none;
 background-color:#fff;
 background:0;
}
 
#menu li a:hover {
 color:#fce017;
 background-color:#000;
 text-decoration: underline;
}
 
 
PAGE HTML
<?php
 include 'includes/menu.js';
?>
<dl>
 <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
 
<dl>    
 <dt onmouseover="javascript:montre('smenu1');">Le Club</dt>
 
 <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
  <ul>
   <li><a href="club.php">Le Club</a></li>
   <li><a href="ecoledefoot.php">L'école de foot</a></li>
   <li><a href="debutants.php">Les Débutants</a></li>
   <li><a href="poussins.php">Les poussins</a></li>
   <li><a href="benjamins.php">Les Benjamins</a></li>
   <li><a href="13ans.ph">Les Moins de 13 ans</a></li>
   <li><a href="15ans.php">Les Moins de 15 ans</a></li>
   <li><a href="18ans.php">Les Moins de 18 ans</a></li>
   <li><a href="seniors.php">Les Séniors</a></li>
   <li><a href="feminines.php">Les Féminines</a></li>
   <li><a href="veterans.php">Les Vétérans</a></li>
   <li><a href="futsal.php">Le Futsal</a></li>
  </ul>
 </dd>
</dl>
 
le JAVASCRIPT
<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>
 
d'ou viens mon erreur ?
merci d'avance.


Message édité par elti69 le 19-06-2006 à 11:48:11
Reply

Marsh Posté le 07-06-2006 à 18:12:53   

Reply

Marsh Posté le 07-06-2006 à 18:38:52    

Code :
  1. <?php
  2. include 'includes/menu.js';
  3. ?>


 
 :ouch:  :ouch:

Reply

Marsh Posté le 08-06-2006 à 09:21:21    

je ne comprends pas tres bien ta remarque xtof_83... je suis bien oblige d'inclure le javascript qq part non?

Reply

Marsh Posté le 08-06-2006 à 10:49:34    

ouais sur, mais ça se fait pas comme ça :D
 
Enfin sinon tu as mis tout le code la page ?
 
Si non donne nous la page ça sera mieux, ou bien tu nous files le code généré, pas ton code de fichier

Reply

Marsh Posté le 08-06-2006 à 10:52:22    

alors le code genere est  

Citation :

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.1//FR" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">
<html>
 <head>
 
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
  <link rel="stylesheet" href="css/ffff.css" />
  <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> </head>
 <body>
   <a id="lien" href="index.html" target="_self" title="FFFC"></a>
  <div id="page">
 
   <div id="bandenoire">
    <div id="logo"></div>
    <div id="header"><font color="#ffffff"><marquee width="695px" scrolldelay="100" scrollamount="6" behavior="scroll"><br />
         Ici le texte de la partie noire. modifiable dans la partie administration. </marquee></font></div>
 
    <div id="ombredroite"></div>
   </div>
 
   <div id="menu">
     <div id="menubggauche">
 
     </div>
     <div id="menu3">
      <div id="menucentre"></div>
 
      <div id="menutexte">
        <dl>
 
  <dt onmouseover="javascript:montre();"><a href="news.php" title="Retour à l'accueil">Accueil</a></dt>
 </dl>
   
 <dl>  
  <dt onmouseover="javascript:montre('smenu1');"><a href="news.php">News</a></dt>
 
   <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
   <ul>
    <li><a href="news.php">Les dernières</a></li>
    <li><a href="archives.php">Les Archives</a></li>
   </ul>
 
   </dd>
 </dl>
 <dl>    
  <dt onmouseover="javascript:montre('smenu2');"><a href="club.php">Le Club</a></dt>
 
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
   <ul>
    <li><a href="club.php">Le Club</a></li>
    <li><a href="ecoledefoot.php">L'école de foot</a></li>
    <li><a href="debutants.php">Les Débutants</a></li>
    <li><a href="poussins.php">Les poussins</a></li>
    <li><a href="benjamins.php">Les Benjamins</a></li>
    <li><a href="13ans.ph">Les Moins de 13 ans</a></li>
    <li><a href="15ans.php">Les Moins de 15 ans</a></li>
    <li><a href="18ans.php">Les Moins de 18 ans</a></li>
    <li><a href="seniors.php">Les Séniors</a></li>
    <li><a href="feminines.php">Les Féminines</a></li>
    <li><a href="veterans.php">Les Vétérans</a></li>
    <li><a href="futsal.php">Le Futsal</a></li>
   </ul>
  </dd>
 </dl>
 <dl>
 
   <dt onmouseover="javascript:montre();"><a href="contact.php" title="Contact">Contact</a></dt>
 </dl>
 
 <dl>
 
   <dt onmouseover="javascript:montre();"><a href="liens.php" title="Liens">Liens</a></dt>
 </dl>      </div>
 
      <div id="menubottom"></div>
 
     </div>
     <div id="menubgdroite">
 
     </div>
 
    </div>
 
    <div id="central">
     <div id="centraltop">
     
     </div>
     <div id="centralbggauche">
 
     </div>
 
     <div id="contenu">
     <div id="categorie"><form action="/news.php" method="get" name="categories">  <select name="cat" class="categorie" onchange="this.form.submit();"><option value="">choisissez votre catégorie</otpion><option value="infos">Toutes les infos</otpion><option value="Ecole de foot">Ecole de foot</option><option value="Débutants">Débutants</option><option value="Poussins">Poussins</option><option value="Benjamins">Benjamins</option><option value="Moins de 13 ans">Moins de 13 ans</option><option value="Moins de 15 ans">Moins de 15 ans</option><option value="Moins de 18 ans">Moins de 18 ans</option><option value="Séniors">Séniors</option><option value="Féminines">Féminines</option><option value="Vétérans">Vétérans</option><option value="Futsal">Futsal</option><option value="Infos Club">Infos Club</option> </select></form></div><h1>Les infos du Ffff</h1><div id="news"><h3>Ecole de foot</h3>
             <h4>Posté le Mardi 6 Juin 2006</h4>
             <h2>UNE NOUVELLE RECRUE AU Ffff</h2><div id="introduction">Toute l'équipe dirigeante fait des efforts de recrutement, en priviligiant la qualité.</div></div><div id="clearer"></div><div id="suite"><a href="news.php?news=8 ">» Lire la suite</a></div><div id="news"><h3>Moins de 15 ans</h3>
             <h4>Posté le Lundi 5 Juin 2006</h4>
             <h2>CLAIREFONTAINE</h2><div id="introduction"><img src="images/upload/diarra.jpg" class="gauche" />Alou Diarra (photo) a retrouvé les autres Tricolores dans les Yvelines au Centre Technique National. Il s'est ainsi exprimé : "Je vis vraiment de très beaux moments avec tous mes coéquipiers. Je suis heureux de retrouver Clairefontaine après cette coupure qui fait du bien.<br />
</div></div><div id="clearer"></div><div id="suite"><a href="news.php?news=7 ">» Lire la suite</a></div><div id="news"><h3>Ecole de foot</h3>
             <h4>Posté le Lundi 5 Juin 2006</h4>
             <h2>LE PROGRAMME DES BLEUS</h2><div id="introduction"><img src="images/upload/abidal.jpg" class="droite" />Les Bleus de Raymond Domenech ont débuté leur préparation par un stage à Tignes du dimanche 21 au vendredi 26 mai. Ils ont rencontré le Mexique (1-0), puis le Danemark (2-0) avant de recevoir la Chine mercredi prochain et de s'envoler pour l'Allemagne le jeudi 8 juin.<br />
</div></div><div id="clearer"></div><div id="suite"><a href="news.php?news=6 ">» Lire la suite</a></div><h1 class="dernieresnews">Les dernieres news</h1><p class="dernieresnews">Le 5 Mai 2006 <a href="news.php?news=5">LES ENTRAINEURS LIBRES</a></p><p class="dernieresnews">Le 5 Mai 2006 <a href="news.php?news=4">ECHAUFEMENT</a></p><p class="dernieresnews">Le 5 Mai 2006 <a href="news.php?news=3">LA TUNISIE</a></p><p class="dernieresnews">Le 5 Mai 2006 <a href="news.php?news=2">L'AUSTRALIE S'INSTALLE</a></p><p class="dernieresnews">Le 5 Mai 2006 <a href="news.php?news=1">TICKETS VOLÉS?</a></p>     </div>
 
     <div id="centralbgdroite">
 
     </div>
     <div id="centralfooter"></div>
    </div>
 
 
 
    <div id="droite">
     <div id="droitegauche"></div>
     <div id="droitecentre">
      <div id="droiteombre"></div>
      <div id="droitecontenu">
       <div id="newletter">
        <h1>Newsletter</h1><p>Pour recevoir les infos du club, inscrivez vous à la newsletter en écrivant votre mail:</p><form action="/news.php" method="post" name="newsletter"><input type='text' name='email' maxlength='70' size='18'>&nbsp;&nbsp;<input class='btn' type='submit' name='submit' value='ok'><br /><input class='radio' type='radio' name='inscription' value='inscription' checked> inscription<input class='radio' type='radio' name='inscription' value='desinscription'> desinscription</form>  
       </div>
       <div id="contact">
        <h1>Contact</h1><p><br /><br /></p>
<p>FFC<br />
M.XXXXXX <br />
120 rue des Merles <br />
</p>
 
<a href="mailto:.com">test@fffc.com</a>       </div>
      </div>
     </div>      
     <div id="droitedroite"></div>
     <div id="droitebottom">
      <p></a>  
<br /> Site optimisé pour IE, Firefox, Konqueror, Opera, et Safari
<br />Résolution 1024 × 768</p>      
     </div>
 
    </div>
  </div>
 </body>
</html>


Message édité par elti69 le 19-06-2006 à 11:49:28
Reply

Marsh Posté le 08-06-2006 à 11:47:55    

j'ai trouver mon erreur....
en fait dans mon CSS #menu ul  avait un padding de 2 px... en le remplacant par un padding-left:2px tout marche...
 
je suis curieux en revanche comme je dois integrer mon javascript?

Reply

Marsh Posté le 08-06-2006 à 12:11:11    

Code :
  1. <?php
  2. include 'includes/menu.js';
  3. ?>


 
ça faisait bizare
 

Code :
  1. <script type="text/javascript" src="includes/menu.js"></script>


Reply

Marsh Posté le 08-06-2006 à 14:19:45    

dans mon menu.js en fait j'ai deja  
<script type="text/javascript"> au debut et </script>
 donc ca va non?

Reply

Marsh Posté le 08-06-2006 à 16:50:55    

heu comment dire....bof :D
 
ça a pas dinteret

Reply

Marsh Posté le 08-06-2006 à 19:55:00    

elti69 a écrit :

dans mon menu.js en fait j'ai deja  
<script type="text/javascript"> au debut et </script>
 donc ca va non?


Ben c'est naze [:petrus75]
ce que tu dois faire c'est linker le fichier comme l'a fait xtof_83 et pas autrement.


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed