Rendre un menu vertical horizontal

Version imprimable

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

Code:

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.

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

Code:

1
2
3
 
    position: relative;
    float: left;

ce qui donne :

Code:

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

24/08/2012, 15h46
laurentSc

Ca ne marche pas car au lieu de ça, ça donne ça...
25/08/2012, 00h36
Invité

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

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...
25/08/2012, 11h20
laurentSc

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 ?
25/08/2012, 15h02
Invité

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

Si c'est à ce genre de code que tu pensais :

Code:

<li width="10%">

à la place de

Code:

<li>

c'est pas bon.
25/08/2012, 15h27
Invité

"Ca ne marche pas", "C'est pas bon",...

Avec ça, c'est sûr, on va progresser !

Cela dit, tu comptes vraiment faire tenir tes 11 menus sur 1 seule ligne ?
Bon courage.
25/08/2012, 15h43
laurentSc

Citation:

"Ca ne marche pas", "C'est pas bon",...

Avec ça, c'est sûr, on va progresser !

Je voulais juste te dire que ça n'était pas la solution...

Citation:

Cela dit, tu comptes vraiment faire tenir tes 11 menus sur 1 seule ligne ?

Ce n'est pas très important ; j'étais surtout curieux de trouver une solution technique, car effectivement, je ne vais pas faire ça.

Hello,

Citation:

Envoyé par laurentSc

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

Voici deux exemples:

Code:

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:

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>

25/08/2012, 17h20
laurentSc

Avec ces 2 exemples, le menu est vertical...
25/08/2012, 20h05
Candygirl

8O

Sur ton profile, tu affiches "webmaster". J'ose espérer qu'en tant que tel, tu sais faire un "copier/coller" et tester un code sur divers navigateurs plus récents qu'IE6 et 7 ?
25/08/2012, 21h15
laurentSc

Je les ai testés avec IE8 et depuis quelques jours, FF ne marche plus chez, même après réinstall...
25/08/2012, 22h19
Candygirl

Sur IE8, et tous les autres navigateurs récents, avec les deux exemples que j'ai donnés, le menu doit être horizontal, avec la barre de défilement qui apparaît si la fenêtre est assez étroite (pas de passage sur deux lignes).

Si ce n'est pas le cas c'est que, soit tu es en mode navigateur IE7, soit il y a un problème qui le fait passer en mode quirks. Tu peux le vérifier en appuyant sur F12 pour faire apparaître la barre de développement.

D'ailleurs, tes deux pages exemples ont un doctype incomplet qui fait passer IE en mode quirks...

Citation:
25/08/2012, 22h38
Invité

Je plussois Candygirl,
et pas seulement parce que ma chienne adorée s'appelle Candy ! :love2:
27/08/2012, 08h49
Bovino

Citation:

Envoyé par Candygirl

8O

Sur ton profile, tu affiches "webmaster".

Citation:

Envoyé par laurentSc

Si c'est à ce genre de code que tu pensais :

Code:

<li width="10%">

à la place de

Code:

<li>

c'est pas bon.

Ca répond à tes interrogations Candy ? :whistle:
31/08/2012, 23h39
laurentSc

Bon OK, je n'ai pas fait avancer beaucoup le schmilblick, mais pouvez-vous m'indiquer un doctype plus complet que celui que me donne NVU quand je crée avec une page quasi vierge ?
04/09/2012, 09h23
Bovino

Citation:

pouvez-vous m'indiquer un doctype plus complet

Celui que t'a donné CandyGirl est complet et c'est le plus simple et le plus récent

Code:

<!doctype html>
04/09/2012, 15h30
laurentSc

Merci et pour que ça marche, il a fallu aussi tout mettre en utf-8 et

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

n'a pas suffit, mais je me suis rappelé qu'il fallait aussi encoder la page en utf-8 sans BOM, et là, ça a marché complètement.