Discussion :

[BnA]

Salut à tous!

Voici mon petit problème, qui, je pense, sera vite réglé...

J'ai une DIV #menu.

Dans cette DIV, j'ai, à gauche, un petit texte (un slogan), et à droite, mon menu horizontal.

Si le texte est absent, mon menu se positionne correctement. Mais si le texte est affiché, mon menu est décalé vers le bas.

Voici mes extraits de code:

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="menu">
   <p>Your E-Language Learning Academy</p>
   <span>
      <ul>    <!-- l'ordre du menu est inversé -->
         <li><a href="#">Contacts</a></li>
         <li><a href="#">Partenaires</a></li>
         <li><a href="#">Tarifs</a></li>
         <li><a href="#">Nos Cours</a></li>
         <li><a href="#">Pour Qui?</a></li>
         <li><a href="#">Concept</a></li>
         <li><a href="#">Home</a></li>
      </ul>
   </span>
</div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
/* MENU HORIZONTAL */
 
#menu ul {
padding:0;
margin:0;
list-style-type:none;
clear:both;
}
#menu li
{
margin-left:5px;
float:right; /*pour IE*/
}
#menu ul li a
{
display:block;
float:left;   
width:85px;
background-color:#006080;
border:1px dashed #D8EAF1;
text-decoration:none;
text-align:center;
padding:5px;
color:#D8EAF1;
font-weight:bold;
}
#menu ul li a:hover
{
background-color:#D8EAF1;
border:1px dashed #B30047;
color:#B30047;
} 
 
/* FIN DU MENU HORIZONTAL */
 
#menu{
height:40px;  				
background:url("images/bckgd-menu.jpg") repeat-x;
color:white;
margin-bottom:10px;
padding-right:10px;
}
 
#menu p{
font-size:8pt;
display:inline;
}

Voilà.

En espérant que vous arriverez à trouver ce qui cloche...

Merci d'avance!

[kalyparker]

Bonjour,

J'suis pas sure de la réponse, mais je crois qu'il faut que tu inverse tes balises comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="menu">
   <span>
      <ul>    <!-- l'ordre du menu est inversé -->
         <li><a href="#">Contacts</a></li>
         <li><a href="#">Partenaires</a></li>
         <li><a href="#">Tarifs</a></li>
         <li><a href="#">Nos Cours</a></li>
         <li><a href="#">Pour Qui?</a></li>
         <li><a href="#">Concept</a></li>
         <li><a href="#">Home</a></li>
      </ul>
   </span>
  <p>Your E-Language Learning Academy</p>
</div>

Voili, voilou

[BnA]

Ouais ben c'est bel et bien la bonne réponse!

Merci à toi!!

[Dan_A]

Le code html n'est pas valide.
ul est de type block, il ne doit pas se trouver dans une balise inline (span)
p est de type block et il impose un passage à la ligne. pourquoi le mettre inline alors qu'il existe des balises inline.
clear:both; "impose le passage à la ligne" après un float. A quoi sert-il ici ?