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%

**laurentSc** · 25/08/2012, 15h17

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

Code :

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

<li width="10%">

à la place de

Code :

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

<li>

c'est pas bon.

Invité · 25/08/2012, 15h27

"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.

**laurentSc** · 25/08/2012, 15h43

"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...

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.

**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>

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

Avec ces 2 exemples, le menu est vertical...

**Candygirl** · 25/08/2012, 20h05

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 ?

**laurentSc** · 25/08/2012, 21h15

Je les ai testés avec IE8 et depuis quelques jours, FF ne marche plus chez, même après réinstall...

**Candygirl** · 25/08/2012, 22h19

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...

Invité · 25/08/2012, 22h38

Je plussois Candygirl,
et pas seulement parce que ma chienne adorée s'appelle Candy !

**Bovino** · 27/08/2012, 08h49

Envoyé par Candygirl

Sur ton profile, tu affiches "webmaster".

Envoyé par laurentSc

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

Code :

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

<li width="10%">

à la place de

Code :

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

<li>

c'est pas bon.

Ca répond à tes interrogations Candy ?

**laurentSc** · 31/08/2012, 23h39

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 ?

**Bovino** · 04/09/2012, 09h23

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 html :

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

<!doctype html>

**laurentSc** · 04/09/2012, 15h30

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

Code :

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

<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.

Rendre un menu vertical horizontal

CSS

Discussions similaires

Partager

Partager