[CSS]Pourriez vous m'aider pour ce code (CSS ELITE)

Pourriez vous m'aider pour ce code (CSS ELITE) [CSS] - HTML/CSS - Programmation

Marsh Posté le 14-04-2004 à 11:22:05    

Salut  :hello:  
 
Voir les derniers POSTS concernant ce code
 
Voilà le code HTML: Mis à jour: 14/04:15h40

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  3.     <head>
  4.       <title>DEMO MENU CSS/JS </title>
  5.       <meta name="" content="" />
  6.       <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
  7.       <meta http-equiv="pragma" content= "no-cache " />
  8.       <meta http-equiv="Cache-Control" content="no-cache" />
  9.       <style type="text/css" media="screen">
  10. body {
  11.      background:none #000000;
  12.      color:#fff;
  13.      width:100%;
  14.      height:100%;
  15.      text-align:center;
  16. }
  17. .plan {
  18.       text-align:left;
  19.       font-family:Helvetica, sans-serif;
  20.       font-size:12px;
  21.       color:#abd;
  22. }
  23. .ici{
  24.        color:#bbb;
  25.        text-decoration:underline overline;
  26. }
  27. .texte {
  28.        font-family:fantasy;
  29.        font-size:18px;
  30. }
  31. .m {
  32.      position:relative;
  33.      bottom:0em;
  34.      left:0em;
  35.      padding-bottom:90px;
  36.      width:1024px;
  37. }
  38. .menu{
  39.   background:#900;
  40.   border:1px solid #FFF;
  41.   margin:1px;
  42.   width: 95px;
  43.   font-size:11px;
  44.   float:left;
  45. }
  46. .menu p:hover, .menu a:hover, .menu a:focus{
  47.    background-color:#F93;
  48. }
  49. .menu a:active, .ssmenu a:active {
  50.    background:#abc;
  51.    color: #000;
  52. }
  53. .menu a {
  54.   text-decoration:none;
  55.   color:#fff;
  56.   display:block;
  57. }
  58. .ssmenu {
  59.   border:1px dashed #FFF;
  60.   background:#900;
  61.   margin:1px;
  62.   width:95px;
  63.   font-size:12px;
  64.   display:block;
  65.   text-align:left;
  66.   list-style-position:inside;
  67.   float: left;
  68.   padding:0px;
  69. }
  70. .ssmenu li{
  71.   background-color:#900;
  72. }
  73. .ssmenu li:hover, .ssmenu a:hover, .ssmenu a:focus  {
  74.   background-color:#F93;
  75.   list-style-type: circle;
  76.   list-style-position : inside;
  77. }
  78. .menu span, .ssmenu span {
  79.   display:none;
  80. }
  81. .ssmenu a{
  82.   text-decoration:none;
  83.   color:#fff;
  84. }
  85. hr {
  86.    width:70%;
  87. }
  88. #ssmenu0{
  89. margin-left:0%;
  90. clear:left;
  91. }
  92.         </style>
  93. <script type="text/javascript">
  94. function Chargement() {
  95.   CacherMenus();
  96. }
  97. function MontrerMenu(strMenu) {
  98.     CacherMenus();
  99.     document.getElementById(strMenu).style.visibility="visible";
  100. }
  101. function CacherMenus() {
  102.     for(i=1;i<=6;i++) {
  103.       with(document.getElementById("ssmenu"+i).style) {
  104.         visibility="hidden";
  105.       }
  106.     }
  107. }
  108. </script>
  109. </head>
  110. <body onload="Chargement();">
  111.     <!-- Corps de texte ================ -->
  112.     <h1>Bienvenue sur le site de DEMO MENU CSS/JS V2.2 Beta </h1>
  113.    
  114.     <div class="plan">
  115.          <p><span class="ici">Vous etes ici </span>: ACCUEIL > Le club > pr&eacute;sentation  </p>
  116.     </div>
  117.     <pre class="texte">
  118.       Du texte Du texte Du texte Et encore du texte
  119.       du texte du texte
  120.       Bon bah voilà un menu qu'il est beau
  121.       Entierement fait en CSS et xhtml
  122.      
  123.       Validé W3C
  124.      
  125.      
  126.     </pre>
  127.     <hr/>
  128. <p>..:: Menu Général ::..</p>
  129. <div id="m" class="m">
  130.     <!-- Menu 1 ========= -->
  131.     <div id="menu1">
  132.   <span class="menu"><a href="#" title="Menu 1" onmouseover="MontrerMenu('ssmenu1');" onfocus="MontrerMenu('ssmenu1');">Club<span>&nbsp;:</span></a></span>
  133.   <span class="menu"><a href="#" title="Menu 2" onmouseover="MontrerMenu('ssmenu2');" onfocus="MontrerMenu('ssmenu2');">Equipes<span>&nbsp;:</span></a></span>
  134.     <span class="menu"><a href="#" title="Menu 3" onmouseover="MontrerMenu('ssmenu3');" onfocus="MontrerMenu('ssmenu3');">Acteurs<span>&nbsp;:</span></a></span>
  135.      <span class="menu"><a href="#" title="Menu 4" onmouseover="MontrerMenu('ssmenu4');" onfocus="MontrerMenu('ssmenu4');">News&amp;Evénements<span>&nbsp;:</span></a></span>
  136.   <span class="menu"><a href="#" title="Menu 5" onmouseover="MontrerMenu('ssmenu5');" onfocus="MontrerMenu('ssmenu5');">Photos<span>&nbsp;:</span></a></span>
  137.   <span class="menu"><a href="#" title="Menu 6" onmouseover="MontrerMenu('ssmenu6');" onfocus="MontrerMenu('ssmenu6');">Résultats<span>&nbsp;:</span></a></span>
  138.   <span class="menu"><a href="#" title="Menu 7" onmouseover="CacherMenus();" onfocus="CacherMenus();">Contacts</a></span>
  139.   <span class="menu"><a href="#" title="Menu 8" onmouseover="CacherMenus();" onfocus="CacherMenus();">Forum</a></span>
  140.   <span class="menu"><a href="#" title="Menu 9" onmouseover="CacherMenus();" onfocus="CacherMenus();">Club House</a></span>
  141.   <span class="menu"><a href="#" title="Menu 10" onmouseover="CacherMenus();" onfocus="CacherMenus();">Inscriptions</a></span>
  142. </div>
  143. <div id="ssmenu0">
  144.     <ul id="ssmenu1" class="ssmenu">
  145.       <li>
  146.         <a href="#" title="Sous-menu 1">Présentation</a><span>&nbsp;;</span>
  147.       </li>
  148.       <li>
  149.         <a href="#" title="Sous-menu 2">Plan</a><span>&nbsp;;</span>
  150.       </li>
  151.       <li>
  152.         <a href="#" title="Sous-menu 3">La salle</a><span>.</span>
  153.       </li>
  154.     </ul>
  155.      <!-- Menu 2 ========= -->
  156.     <ul id="ssmenu2" class="ssmenu">
  157.       <li>
  158.         <a href="#" title="Sous-menu 1">Les filles</a><span>&nbsp;;</span>
  159.       </li>
  160.       <li>
  161.         <a href="#" title="Sous-menu 2">Les gars</a><span>&nbsp;;</span>
  162.       </li>
  163.       <li>
  164.         <a href="#" title="Sous-menu 3">Les petits</a><span>.</span>
  165.       </li>
  166.     </ul>
  167.     <!-- Menu 3 ========= -->
  168.     <ul id="ssmenu3" class="ssmenu">
  169.       <li>
  170.         <a href="#" title="Sous-menu 1">Le bar</a><span>&nbsp;;</span>
  171.       </li>
  172.       <li>
  173.         <a href="#" title="Sous-menu 2">Les arbitres</a><span>&nbsp;;</span>
  174.       </li>
  175.       <li>
  176.         <a href="#" title="Sous-menu 3">Les bénévoles</a><span>&nbsp;;</span>
  177.       </li>
  178.       <li>
  179.         <a href="#" title="Sous-menu 4">Les entraineurs</a><span>.</span>
  180.       </li>
  181.     </ul>
  182.     <!-- Menu 4 ========= -->
  183.     <ul id="ssmenu4" class="ssmenu">
  184.       <li>
  185.         <a href="#" title="Sous-menu 1">Les tournois</a><span>&nbsp;;</span>
  186.       </li>
  187.       <li>
  188.         <a href="#" title="Sous-menu 2">Les matchs</a><span>&nbsp;;</span>
  189.       </li>
  190.       <li>
  191.         <a href="#" title="Sous-menu 3">Fiestas</a><span>&nbsp;;</span>
  192.       </li>
  193.       <li>
  194.         <a href="#" title="Sous-menu 4">Autres</a><span>.</span>
  195.       </li>
  196.     </ul>
  197.    <!-- Menu 5 ========= -->
  198.     <ul id="ssmenu5" class="ssmenu">
  199.       <li>
  200.         <a href="#" title="Sous-menu 1">Album entier</a><span>&nbsp;;</span>
  201.       </li>
  202.       <li>
  203.         <a href="#" title="Sous-menu 2">Recherche</a><span>.</span>
  204.       </li>
  205.     </ul>
  206.     <!-- Menu 6 ========= -->
  207.     <ul id="ssmenu6" class="ssmenu">
  208.       <li>
  209.         <a href="#" title="Sous-menu 1">Les filles</a><span>&nbsp;;</span>
  210.       </li>
  211.       <li>
  212.         <a href="#" title="Sous-menu 2">Les gars</a><span><span>&nbsp;;</span></span>
  213.       </li>
  214.       <li>
  215.         <a href="#" title="Sous-menu 3">Les petits</a><span>.</span>
  216.       </li>
  217.     </ul>
  218. </div>
  219.     </div>
  220.       <hr/>
  221.      
  222.     <p id="copy">
  223.       &copy;Tibetoine Webmaster & Pedro Webmaster
  224.     </p>
  225.    
  226.     <p>
  227.       <img
  228.           src="http://www.w3.org/Icons/valid-xhtml10"
  229.           alt="Valid XHTML 1.0!" height="31" width="88" />
  230.     </p>
  231.     <p>
  232.     <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
  233.     </p>
  234.   </body>
  235. </html>


 
 
Merci  :bounce:


Message édité par protoinou le 14-04-2004 à 15:33:11
Reply

Marsh Posté le 14-04-2004 à 11:22:05   

Reply

Marsh Posté le 14-04-2004 à 12:29:48    

youp,
 
 
chez moi, les sous-menus apparaissent tout à droite des menus principaux... (ie et firefox, resolution: 1680 X 1050)
 
 
 
http://stupide.be/imgs/menu1.jpg
http://stupide.be/imgs/menu2.jpg


Message édité par art_dupond le 14-04-2004 à 12:33:42
Reply

Marsh Posté le 14-04-2004 à 14:54:42    

à la place de ça:

Code :
  1. #ssmenu0{
  2.      margin-left:0%;
  3. }


 
Mets

Code :
  1. #ssmenu0{
  2.      margin-left:0%;
  3.      clear:left;
  4. }


 

Reply

Marsh Posté le 14-04-2004 à 15:01:04    

ça marche bien temps que me menu est sur une seule ligne chez moi
 
Mais à deux lignes on a déjà des inépsies ( forum en dessous d'équipe du coup impossible d'aller sur le sous menu), et à trois lignes ça ressemble plus a rien :o


Message édité par anapajari le 14-04-2004 à 15:01:49
Reply

Marsh Posté le 14-04-2004 à 15:13:42    

Ouai voilà , c'est bien là qu'est le problème ... Je cherche qq'un qui pourait m'aider :)
 
Mais je pense personnelement que le menu tel qu'il est pensé techniquement n'a pas d'avenir comme ça ...  
 
Mais bon on ne sait jamais, peut être que qq'un va réussir à me débloquer :) (Remarque je peux toujours forcer l'affichage sur une ligne ;)))
 
PS: la source a été éditée pour la nouvelle version


Message édité par protoinou le 14-04-2004 à 15:17:14
Reply

Sujets relatifs:

Leave a Replay

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