Sujet Précédent Sujet Suivant

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

Réponse 1 / 20
lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
 
tu peux mettre le code stp
0
Réponse 2 / 20
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
Réponse 3 / 20
lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
 
et l'HTML aussi stp
0
Réponse 4 / 20
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

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   Statut Membre Dernière intervention   14
 
Tu veux que citron apparissent en dessous de limonade?
0
Réponse 6 / 20
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
Réponse 7 / 20
lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
 
Tu peux utiliser le JS?
0
Réponse 8 / 20
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
Réponse 9 / 20
lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
 
Je te publie le code dans 10 minutes
0
Réponse 10 / 20
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
Réponse 11 / 20
pandageek Messages postés 379 Statut Membre 4
 
ok merci beaucoup ^^
0
Réponse 12 / 20
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
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
Réponse 13 / 20
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
Réponse 14 / 20
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
Réponse 15 / 20
pandageek Messages postés 379 Statut Membre 4
 
oui j'ai même créé le fichier a.css
0
Réponse 16 / 20
lokakilo Messages postés 213 Date d'inscription   Statut Membre Dernière intervention   14
 
pas besoin lol
0
Réponse 17 / 20
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
Réponse 18 / 20
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
Réponse 19 / 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
Réponse 20 / 20
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
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
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
Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Continuer numérotation des pages après saut de section
dsjl -
Tiphaine -

13 réponses
Comment faire un retour à la ligne automatique d'un texte long en php ou sql?
Mash10 -
jordane45 -

2 réponses