Discussion :

[Themax222]

Bonjour,

je crée un site web et je viens de créer un menu horizontale juste en dessous de ma bannière. Mon menu est coller sur la droite mais je voudrais qu'un des elements (S'inscrire/Se connecter) se collent sur la droite. Pouvez vous m'aider ? Voici mes codes :

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
<div id="menu1">
<ul id="menu">
 
 
        <li>
                <a href="#">Acceuil</a>
        </li>
 
        <li>
                <a href="#">Forum</a>
        </li>
 
        <li>
                <a href="#">Tutoriels</a>
 
        </li>
		<li><a href="#">S'inscrire/Se connecter</a></li>
 
</ul>
</div>

et le 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on défini une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #336699; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour ie qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolu */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoi loin du champ de vision */
}
 
 
#menu li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #fff; /* On passe le texte en noir ... */
        background: #003366; /* ... et au contraire, le fond en blanc */
}

Bien amicalement
Maxime

[clb56]

Salut,

à mon avis le plus simple c'est de sortir l'élément concerné de la liste au niveau html :

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
 
<ul id="menu">
        <li>
                <a href="#">Acceuil</a>
        </li>
 
        <li>
                <a href="#">Forum</a>
        </li>
 
        <li>
                <a href="#">Tutoriels</a>
        </li>
</ul>
<p id="lien_connect"><a href="#">S'inscrire/Se connecter</a></p>

puis css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
ul#menu {
float:left;
}
ul#menu li {
display:inline;
}
p#lien_connect {
margin-top:0;/* pour égaliser avec ul qui du fait du float n'a plus de marges */
text-align:right;
}

[Themax222]

merci ca marches

[Themax222]

bon maintenant que c'est à droite, j'ai un autre problème :



je voudrais qu'il ressemble aux autres. j'ai essayer d'appliquer exactement les mêmes valeurs mais il me fait nimporte quoi. pouvez vous m'aider ?

Bien amicalement
Maxime

PS : la hauteur d'un petit carrer est de 21px et la largeur 144px si ca peut vous aider

[Themax222]

UP

[Candygirl]

Du genre?

Code html :

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

1
2
3
4
5
6
7
8
<div id="menu1">
<ul id="menu">
        <li><a href="#">Acceuil</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Tutoriels</a></li>
	<li class="flRight"><a href="#">S'inscrire/Se connecter</a></li>   
</ul>
</div>

Code css :

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

#menu .flRight {float:right;}

[Themax222]

justement ca marche pas ca

[Candygirl]

Sur le code que tu donnes ci-dessus, cela fonctionne. Il faudrait voir dans le contexte autour (genre le css de #menu1) si quelque chose l'empêche.

Aurais-tu un lien à donner ?

[Themax222]

voila tout mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>LemondeFs :: Flight Simulator</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
      <div id="en_tete">
   <!-- Ici on mettra la bannière -->
</div>
 
<div id="menu1">
<ul id="menu">
        <li>
                <a href="#">Acceuil</a>
        </li>
 
        <li>
                <a href="#">Forum</a>
        </li>
 
        <li>
                <a href="#">Tutoriels</a>
        </li>
</ul>
<p id="lien_connect"><a href="#">S'inscrire/Se connecter</a></p>
 
</div>
 
 
<div id="corps">
 
 
   </div>
 
<div id="pied_de_page">
 
 
</div>
   </body>
</html>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
body
{
 
 margin : auto;
 margin-top : px;
 margin-bottom : 20px;
}
 
#en_tete
{
 
 height : 105px;
 background-image : url("ban.jpg");
 background-repeat : no-repeat;
 margin-bottom : 0px;
}
#menu2
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}
 
.element_menu
{
 
 
   border: 1px outset black;
 
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
 
}
 
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on défini une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #336699; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour ie qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolu */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoi loin du champ de vision */
}
 
 
#menu li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #fff; /* On passe le texte en noir ... */
        background: #003366; /* ... et au contraire, le fond en blanc */
		margin-top : 3px;
}
#lien_connect p
{
 margin-top:0;/* pour égaliser avec ul qui du fait du float n'a plus de marges */
 text-align:right;
 padding : 0;
 margin : 0;
 font-weight : bold; /* on met le texte en gras */
 font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
 font-size : 12px; /* hauteur du texte : 12 pixels */
 display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
 padding : 0; /* aucune marge intérieure */       
 color : #fff; /* couleur du texte */
 text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
 float : right;
 }
#lien_connect a
{
 text-decoration : none;
}

[Candygirl]

Le code que j'ai fourni fonctionne correctement avec ta configuration. L'as-tu testé?

[Themax222]

ah c'est bon, j'avais fait une bête erreur. (j'avais oublier de refermer une balise) merci de ton aide