Saut de ligne...

Fermé

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 - 2 sept. 2011 à 00:04
pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 - 4 sept. 2011 à 20:49

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!

A voir également:

Saut de ligne...
Site de vente en ligne particulier - Guide
Partage de photos en ligne - Guide
Aller à la ligne excel - Guide
Apparaitre hors ligne instagram - Guide
Comment supprimer une page sur word avec un saut de page ? - Guide

20 réponses

Réponse 1 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 00:30

tu peux mettre le code stp

Réponse 2 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 00:32

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;
}

Réponse 3 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 00:38

et l'HTML aussi stp

Réponse 4 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 00:40

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>

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

Posez votre question

Réponse 5 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 00:44

Tu veux que citron apparissent en dessous de limonade?

Réponse 6 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 00:46

non justement il apparaissait juste au dessous don j'ai mis margin-left: 100px; mais je voudrai que citron soit a droite de limonade.

Réponse 7 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 00:59

Tu peux utiliser le JS?

Réponse 8 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 01:00

oui pourquoi il y a des contraintes (en fait je suis en train de l'apprendre je ne connais pas encore tout )

Réponse 9 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 11:06

Je te publie le code dans 10 minutes

Réponse 10 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 12:31

dsl il y a un probleme il faudrait pas faire une liste à puce mais tableau plutôt, je le ferrais tout a l'heure

Réponse 11 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 18:59

ok merci beaucoup ^^

Réponse 12 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
Modifié par lokakilo le 2/09/2011 à 20:15

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>

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 20:16

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

Réponse 13 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 20:32

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 :)

Réponse 14 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 20:49

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é?

Réponse 15 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 20:54

oui j'ai même créé le fichier a.css

Réponse 16 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 20:55

pas besoin lol

Réponse 17 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
2 sept. 2011 à 20:56

je sais mais vu la taille du fichier css pour le reste du site j'ai préferé créer le fichier.

Réponse 18 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 20:58

ques que ca donne si tu ne change pas le code (td .nul)

Réponse 19 / 20

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
2 sept. 2011 à 22:10

oui c'est normal ca ne marche pas avec la modification que tu a fait mais ca marche tres bien sans

Réponse 20 / 20

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
Modifié par pandageek le 3/09/2011 à 00:15

(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)

lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
3 sept. 2011 à 18:56

Je sais pas quoi te dire chez moi ça marche, essai avec un autre navigateur (???)

pandageek Messages postés 359 Date d'inscription samedi 6 août 2011 Statut Membre Dernière intervention 27 mai 2014 4
4 sept. 2011 à 20:49

tu utilise quel navigateur?

Discussions similaires

Retour à la ligne tchat.

Que veut dire "correspondant occupé" lors d'un appel ?

Remplacer espace par retour ligne sur txt ???

Saut de lignes sans <br/>

Sauter une ligne après \paragraph en latex