Saut de ligne...

pandageek Messages postés 379 Statut Membre -  
pandageek Messages postés 379 Statut Membre -
Bonjour,
je suis en train de faire un menu horizontal
le lien du tuto:
(http://css.mammouthland.net/menu-horizontal-en-css.php

[url=http://www.hostingpics.net/viewer.php?id=953609img1.png][img]http://img4.hostingpics.net/thumbs/mini_953609img1.png[/img][/url]

lorsque l'on passe sur "boissons" le volet se déroule normalement pas de probleme.
mais j'ai besoin d'un déroulement lorsque je passe sur "limonade"

[URL=http://www.hostingpics.net/viewer.php?id=252994img2.png][IMG]http://img4.hostingpics.net/thumbs/mini_252994img2.png[/IMG][/URL]

le problème c'est qu'il y a un saut de ligne que je n'arrive pas a annuler.
si quelqu'un a une idée je serai heureux qu'il m'en fasse part.
merci beaucoup!

20 réponses

  1.
    lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    tu peux mettre le code stp
    0
  2. pandageek Messages postés 379 Statut Membre 4
     
    voici le long code css :
    #menu ul
    {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
    }

    #menu li
    {
    float:left;
    margin:auto;
    padding:0;
    background-color:black;
    }

    #menu li a
    {
    display:block;
    width:100px;
    color:white;
    text-decoration:none;
    padding:5px;
    }

    #menu li a:hover
    {
    color:#FFD700;
    }

    #menu ul li ul
    {
    display:none;
    }

    #menu ul li:hover ul
    {
    display:block;
    }

    #menu li:hover ul li
    {
    float:none;
    }

    #menu ul li ul, #menu ul li:hover ul li ul, #menu ul li:hover ul li:hover ul li ul
    {
    display:none;
    }

    #menu ul li:hover ul, #menu ul li:hover ul li:hover ul, #menu ul li:hover ul li:hover ul li:hover ul
    {
    display:block;
    width:100px;
    color:white;
    text-decoration:none;
    padding:0px;
    margin: 0px;
    }

    #menu ul li:hover ul li:hover ul
    {
    margin-left: 100px;
    }
    0
  3. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    et l'HTML aussi stp
    0
  4. pandageek Messages postés 379 Statut Membre 4
     
    le code html :

    <div id="menu">
    <ul>
    <li><a href="#">Boissons</a>
    <ul>
    <li><a href="#">Limonade</a>
    <ul>
    <li><a href="#">citron</a></li>
    </ul>
    </li>
    <li><a href="#">Jus</a></li>
    <li><a href="#">Sirop</a></li>
    </ul>
    </li>
    <li><a href="#">Confitures</a></li>
    </ul>
    </div>
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    Tu veux que citron apparissent en dessous de limonade?
    0
  7. pandageek Messages postés 379 Statut Membre 4
     
    non justement il apparaissait juste au dessous don j'ai mis margin-left: 100px; mais je voudrai que citron soit a droite de limonade.
    0
  8. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    Tu peux utiliser le JS?
    0
  9. pandageek Messages postés 379 Statut Membre 4
     
    oui pourquoi il y a des contraintes (en fait je suis en train de l'apprendre je ne connais pas encore tout )
    0
  10. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    Je te publie le code dans 10 minutes
    0
  11. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    dsl il y a un probleme il faudrait pas faire une liste à puce mais tableau plutôt, je le ferrais tout a l'heure
    0
  12. pandageek Messages postés 379 Statut Membre 4
     
    ok merci beaucoup ^^
    0
  13. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    Tiens, bon le code est beaucoup plus long et compliqué mais c'est parce que j'ai utilisé le javascript:

    Code HTML: 

    <html> 
 <head> 
  <script type="text/javascript"> 
  function menu (id1, id2, id3, id4) 
  { 
   var id1=document.getElementById(id1); 
   var id2=document.getElementById(id2); 
   var id3=document.getElementById(id3); 
   var id4=document.getElementById(id4); 
   id1.style.display="block"; 
   id2.style.display="block"; 
   id3.style.display="block"; 
   id4.style.display="none"; 
  } 
   
  function limonade (id) 
  { 
   var id4=document.getElementById(id); 
   id4.style.display="block"; 
  } 
   
  function enroule (id1, id2, id3, id4) 
  { 
   var id1=document.getElementById(id1); 
   var id2=document.getElementById(id2); 
   var id3=document.getElementById(id3); 
   var id4=document.getElementById(id4); 
   id1.style.display="none"; 
   id2.style.display="none"; 
   id3.style.display="none"; 
   id4.style.display="none"; 
  } 
  function enroulecitron (id) 
  { 
   var citron=document.getElementById(id); 
    
   citron.style.display="none"; 
  } 
     
  </script> 
 </head> 
 <body> 
  <div id="menu"> 
   <table> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="displayblock"><a href="" onMouseover="javascript:menu('boissons1', 'boissons2', 'boissons3', 'citron')">Boissons</a></td> 
     <td class="displayblock" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"><a href="">Confitures</a></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td style="display:none;" id="boissons1"><a href="" onMouseover="javascript:limonade('citron')">Limonade</a></td> 
     <td id="citron" style="display:none;" onMouseover="javascript:if(citron.style.display='none' { enroule('boissons1', 'boissons2', 'boissons3', 'citron')"><a href="">Citron</a></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td id="boissons2" onMouseover="javascript:enroulecitron('citron')" style="display:none;"><a href="">Jus</a></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td id="boissons3" onMouseover="javascript:enroulecitron('citron')" style="display:none;"><a href="">Sirop</a></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
   </table> 
  </div> 
  </div> 
 </body> 
</html>
    0
    1. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
       
      Et code CSS: 

      #menu td
{
background-color: black;
width: 100px;
text-align: center;
}

#menu table
{
border: 0px;
border-collapse: collapse;
padding: 5px;
}

#menu a
{
color: white;
text-decoration: none;
}

#menu a:hover
{
color:#FFD700; 
}

#menu td.displayblock
{
display: block;
}

#menu td.nul
{
width: 1px;
background-color: white;
}


      ps: désolé d'avoir été un peu long
      0
  14. pandageek Messages postés 379 Statut Membre 4
     
    merci beaucoup d'avoir répondu, moi je trouve que ca a été rapide, mais il ne fonctionne pas correctement :
    dans le css " td.nul " ne fonctionne pas mais j'ai trouvé et j'ai mis .nul td ( je sais pas si c'est déconseillé)
    ensuite,
    http://hpics.li/5fc9e08
    je n'arrive pas a enlever les bandes noires sur les cotés

    http://hpics.li/83b85bf
    et citron viens encore se placer sous limonade

    si tu as encore du temps pour moi je serai heureux de ton aide :)
    0
  15. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    Bizarre je l'ai testé chez moi ca marche

    Tu as bien remplacé TOUT le code CSS que tu m'a envoyé par celui que je t'ai donné?
    0
  16. pandageek Messages postés 379 Statut Membre 4
     
    oui j'ai même créé le fichier a.css
    0
  17. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    pas besoin lol
    0
  18. pandageek Messages postés 379 Statut Membre 4
     
    je sais mais vu la taille du fichier css pour le reste du site j'ai préferé créer le fichier.
    0
  19. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    ques que ca donne si tu ne change pas le code (td .nul)
    0
  20. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
     
    oui c'est normal ca ne marche pas avec la modification que tu a fait mais ca marche tres bien sans
    0
  21. pandageek Messages postés 379 Statut Membre 4
     
    (mon message n'a pas été envoyé --')
    en fait ca affiche ca :

    http://hpics.li/9f55097

    des que je veux acceder a limonade je passe sur confiture donc le volet se ferme.

    ca marche si on passe a coté (la le volet ne se ferme pas, mais c'est désarable qu'il reste tant qu'on ne clique pas)
    0
    1. lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
       
      Je sais pas quoi te dire chez moi ça marche, essai avec un autre navigateur (???)
      0
    2. pandageek Messages postés 379 Statut Membre 4
       
      tu utilise quel navigateur?
      0

Discussions similaires

Remplacer espace par retour ligne sur txt ???
ABCLOVE -
Namzat -

11 réponses
Supprimer automatiquement retours à la ligne
brahfous -
Bricol62 -

20 réponses
suprimer retour chariot ou retour ligne
bernard lortic -
jeannets -

3 réponses
Supprimer ou remplacer les retours à la ligne ?
Jojodesbatignoles -
Jojodesbatignoles -

2 réponses
Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses