Menu de navigation horizontal [Résolu]

[khmamed]

Bonjour à toutes et à tous.

J'aimerais savoir comment faire pour rendre le menu fixe. J'explique :

ça, c'est ce que j'ai :


Mais quand je réduits la fenêtre, voila ce que j'ai :



Et voila mon code css :

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
#header {
	border: 1px solid black;
	text-align: center;
	margin: 0px;
	}
#navmenu {
	width: 100%;
	margin: 0px auto;
	background-image: url(images/bg-pagenav.png);
	height: 29px;
	background-repeat: repeat-x;
	padding: 0px;
	border: 1px solid black;
	}
#navmenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}
#navmenu ul li {
	width: 130px;
	float: left;
	margin: 4px;
	border: 1px solid black;
	}
#navmenu ul li a {
	font-family:Verdana, Geneva, sans-serif;
	text-decoration: none;
	display: block;
	width: 130px;
	}

Merci de m'aider parce que je suis nouveau dans le monde css.

[buggen25]

Bonjour,

Code :

1
2
3
4
5
6
7
8
9
Essaye modifier le float:left pour le rendre float:none par exemple
donc:
#navmenu ul li {
 width: 130px;
 float: left;
 margin: 4px;
 border: 1px solid black;
 }

Le modifier en

Code :

1
2
3
4
5
6
7
#navmenu ul li {
 width: 130px;
 float: none;
 margin: 4px;
 border: 1px solid black;
 }

Le role du float c'est de l'afficher a gauche du reste des elements de la page html quand celui ci n'arrive pas a tenir sur la meme ligne que le reste, c'est pour ça que quand tu reduis la taille de la fenetre, les elements du menu, s'aligne à gauche
Voici un exmple :

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
 
#NavMenu{
	height:20px;
	background-color:#00CBCD;
	font-family: 'Ubuntu', Arial, serif;
	font-size:12px;
	padding-top:1px;
	padding-bottom:1px;
	line-height:19px;
	font-weight:500;
}
#NavMenu ul{
	height:20px;
	display:block;
	list-style:none;
}
#NavMenu ul li{
	display:inline;
	list-style:none;
	line-height:18px;
	border-right:1px dotted #FFFFFF;
	padding-left:9px;
	padding-right:10px;
}

cordialement

[khmamed]

Merci pour ta réponse mais le menu devient vertical et je voudrais qu'il reste horizontal.

[buggen25]

Re bonjour,
Rajoute ça

Code :

1
2
3
4
5
6
#navmenu ul li {
 display:inline;
 width: 130px;
 margin: 4px;
 border: 1px solid black;
 }

Sinon regarde l'exemple que j'ai cité plus haut.
J'espère que ça va t'aider.

[khmamed]

Re merci, c'est gentil de ta part mais voila je l'ai trouvé sur ce lien. Le problème est dans le width qui est à 100%. Il n'est pas fixe, il faut le donner en pixel, pas en pourcentage et puis le fixer avec position : fixed et ça marche très bien. Merci beaucoup, je suis très reconnaissant.

[buggen25]

Re:
Si j'ai bien compris tu vas mettre ton menu en position fixed, donc imaginons que la page web a une hauteur deux fois plus grande que la zone d'affichage de ton navigateur, donc il y aura du scrolling, et lors du scroling le menu restera dans la meme position et va defiler en bas, c'est déconseillé d'utiliser la position fixed dans ce cas precis...c'est juste un conseil, cordialement