Rendre un menu vertical horizontal

**laurentSc** · 23/08/2012, 22h11

Bonsoir,
j'ai un code CSS qui met vertical un menu (qui est une liste ul d'identifiant "nav") :

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
 
/*****************/
/* Menu vertical */
/*****************/
         #nav {
            width: 250px ;
            list-style: none ;
            margin: 0 ;
            padding: 0 ;
            }
         #nav li {
            background: #FFFFFF ;
            color: #000000 ;
            border: 0px solid #600 ;
            margin-bottom: 1px ;
            }
         #nav li a {
            display: block ;
            background: #ECECEC ;
            color: #000000 ;
            font: 1em "Trebuchet MS",Arial,sans-serif ;
            line-height: 1em ;
            padding: 1px 0 ;
            text-align: center ;
            text-decoration: none ;
            }
         #nav li a:hover, #nav li a:focus, #nav li a:active {
            background: #FFFFFF ;
            text-decoration: underline ;
            }

Ma question (connaît mal le CSS), comment le rendre horizontal ? Je ne vois rien dans ce code qui gère cela, mais j'apprécierais qu'on me donne la solution avec une explication.

**varex** · 24/08/2012, 11h35

Dans le css, au niveau du selecteur #nav li, je pense qu'il faut ajouter :

Code :

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

1
2
3
 
    position: relative;
    float: left;

ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
9
 
#nav li {
            position: relative;
            float: left;
            background: #FFFFFF ;
            color: #000000 ;
            border: 0px solid #600 ;
            margin-bottom: 1px ;
            }

**laurentSc** · 24/08/2012, 15h46

Ca ne marche pas car au lieu de ça, ça donne ça...

Invité · 25/08/2012, 00h36

Bonjour Laurent,
normal si tu bloques #nav à 250px...

Par contre, tu peux le mettre sur les li {width: 250px;}

Je ne veux pas être méchant, mais je pense que tu pourrais trouver facilement tout seul. Il suffit d'être curieux, et attentif au code...

**laurentSc** · 25/08/2012, 11h20

Ta remarque semble évidente, et c'est vrai que quand varex m'a répondu, je n'ai pas fait preuve de curiosité, juste vu que ça n'allait pas. Par contre, il reste un petit souci : le html s'arrange pour faire tenir le menu dans la page sans scrolling ; donc avec un zoom de 50%, ça tient, mais en affichage normal, ça tient sur 2 lignes ; comment privilégier le scrolling et tout faire tenir sur une seule ligne ?

Invité · 25/08/2012, 15h02

Je dirais : width en %
ex. :
- 3 /ligne => 33%
- 4 => 25%
- 5 => 20%
- 6 => 16%
- ...
- 10 => 10%
- 11 => 9%

**Candygirl** · 25/08/2012, 16h43

Hello,

Envoyé par laurentSc

comment privilégier le scrolling et tout faire tenir sur une seule ligne ?

Voici deux exemples:

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
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
<!DOCTYPE html>
 
<html lang="fr">
 
	<head>
		<meta charset="UTF-8">
		<title>Menu pensées positives</title>
		<style>
                        #nav {
                                list-style: none ;
                                margin: 0 ;
                                padding: 0 ;
                                white-space:nowrap;
                        }
         
                        #nav li {
                                display:inline-block;
                        }
         
                        #nav li a {
                                background: #ECECEC ;
                                font: 1em "Trebuchet MS",Arial,sans-serif ;
                                text-decoration: none ;
                                color:#000;
                        }
                </style>
	</head>
 
	<body>
		<ul id="nav">
			<li><a href="../developpement-personnel/index.html">Développement personnel</a></li>
			<li><a href="../pensees-positives/index.html">Pensées Positives</a></li>
			<li><a href="../bien-etre/index.html">Bien-être et joie de vivre</a></li>
			<li><a href="../emotions-stress/index.html">Emotions - Stress</a></li>
			<li><a href="../estime-de-soi/index.html">Estime de Soi</a></li>
			<li><a href="../marketing/index.html">Marketing - Business</a></li>
			<li><a href="../communication/index.html">Communication</a></li>
			<li><a href="../sante-bienetre/index.html">Santé bien-être</a></li>
			<li><a href="http://www.secretsattraction.fr/accueil/index.html" target="_blank">Les secrets de l'attraction</a></li>
			<li><a href="../les-lois-du-succes/index.html">Les lois du succès de Napoléon Hill</a></li>
			<li><a href="../magnetisme/index.html" target="_blank">Magnétisme et Suggestions</a></li>
		</ul>
	</body>
 
</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
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
<!DOCTYPE html>
 
<html lang="fr">
 
	<head>
		<meta charset="UTF-8">
		<title>Menu pensées positives</title>
		<style>
                        #nav {
                                list-style: none ;
                                margin: 0 ;
                                padding: 0 ;
                                display:table;
                        }
         
                        #nav li {
                                display:table-cell;
                                padding:0 0.2em;
                        }
         
                        #nav li a {
                                background: #ECECEC ;
                                font: 1em "Trebuchet MS",Arial,sans-serif ;
                                text-decoration: none ;
                                color:#000;
                                white-space:nowrap;
                        }
 
                </style>
	</head>
 
	<body>
		<ul id="nav">
			<li><a href="../developpement-personnel/index.html">Développement personnel</a></li>
			<li><a href="../pensees-positives/index.html">Pensées Positives</a></li>
			<li><a href="../bien-etre/index.html">Bien-être et joie de vivre</a></li>
			<li><a href="../emotions-stress/index.html">Emotions - Stress</a></li>
			<li><a href="../estime-de-soi/index.html">Estime de Soi</a></li>
			<li><a href="../marketing/index.html">Marketing - Business</a></li>
			<li><a href="../communication/index.html">Communication</a></li>
			<li><a href="../sante-bienetre/index.html">Santé bien-être</a></li>
			<li><a href="http://www.secretsattraction.fr/accueil/index.html" target="_blank">Les secrets de l'attraction</a></li>
			<li><a href="../les-lois-du-succes/index.html">Les lois du succès de Napoléon Hill</a></li>
			<li><a href="../magnetisme/index.html" target="_blank">Magnétisme et Suggestions</a></li>
		</ul>
	</body>
 
</html>

Rendre un menu vertical horizontal

CSS

Vue hybride

Discussions similaires

Partager

Partager