pblm d'affichage de mon menu

**xboulney** · 16/04/2007, 05h50

Bonjour à tous

Voilà, je viens de creer un menu en partie repris sur un site mais je n'arrive pas à obtenir exactement ce que je veux. Je m'explique :

Sous firefox 2.0.0.3 j'ai une barre horizontale alors que je voudrais qu'il ne prenne que la totalité de la page et de plus mon menu home n'apparait pas.

Voici donc le code de la page:

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
<body>
<div id="header">
	<div id="logo">
		<a href="menu.html" title="home"><img src="ressources/images/logoanim.gif" alt="logo"/img>
	</div>
 
<!-- Menu principal -->
	<div id="navbar">
		<ul class="nav_menu_haut">
			<li><a href="#" title="back to homesite">Home</a></li>
				<ul>
					<li><a href="#" title="Sign in">Sign in</a></li>
					<li><a href="#" title="Personnalize my account">My eStock</a></li>
					<li><a href="#" title="Become a member">Subscribe</a></li>
				</ul>
			<li><a href="#" title=" ">Menu2</a>
				<ul>
					<li><a href="#" title=" ">Sous menu 2.1</a></li>
					<li><a href="#" title=" ">Sous menu 2.2</a></li>
				</ul>
			</li>
			<li><a href="#" title=" ">Menu3</a>
				<ul>
					<li><a href="#" title=" ">Sous menu 3.1</a></li>
					<li><a href="#" title=" ">Sous menu 3.2</a></li>
					<li><a href="#" title=" ">Sous menu 3.3</a></li>
				</ul>
			</li>
			<li><a href="#" title="forum">forum</a></li>
			<li><a href="#" >Search</a></li>
			<li><a href="#" title=" ">menu6</a>
				<ul>
					<li><a href="#" title=" ">Sous menu 6.1</a></li>
					<li><a href="#" title=" ">Sous menu 6.1</a></li>
				</ul>
			</li>
		    <li><a href="#" title="About us">About us</a></li>
		    <li><a href="#" title="autres sites">Other sites</a>
				<ul>
					<li><a href="#" title=" ">Sous menu 8.1</a></li>
					<li><a href="#" title=" ">Sous menu 8.2</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
 
</body>

et le CSS qui va avec :

Code css :

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
 
body {
	margin: 0;
	padding: 0;}
#header {
	height: 114px;
	margin: auto;}
 
/* -------------------------------------- */
/*                   MENU                             */
/* -------------------------------------- */
 
#navbar { 
	background: url("ressources/images/header_band.gif") repeat-x; }
dt, dl, dd, ul, li {
	list-style-type: none;
	margin: 0 0 0 0;
	position: center;}
 
.nav_menu_haut {
	line-height: 23px;
	font-size: 0.8em;
	float: left;
	display: block;
	position: absolute;}
 
/* mise à l'horizontale du menu  */
.nav_menu_haut li {
	display: block;
	float: left;}
 
/* les menus sont cacher par defaut */
.nav_menu_haut ul {
	display: block;
	left: 0;
	height: 23px;
	width: 100%;
	visibility: hidden;
	position: absolute;
	clear: both;}
 
.nav_menu_haut:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both; }
 
.nav_menu_haut li.selected ul, .nav_menu_haut li:hover ul {
	visibility: visible; }
 
.nav_menu_haut li.selected ul {
	z-index: 10; }
 
.nav_menu_haut li:hover ul {
	z-index: 100; }
 
.nav_menu_haut {
	background: url("ressources/images/header_band.gif");
	width: 100%;	
 
.nav_menu_haut a {
	color: #ffffff;
	text-decoration: none;
	padding: 2px 18px 2px;
	display: block;}
 
.nav_menu_haut li:hover {
	color: #ffffff;
	background-color: #ff9900;}
 
.nav_menu_haut li:hover a {
	color: #425484;}
 
.nav_menu_haut li:hover ul {
	background-color: #ffffff;}
 
.nav_menu_haut ul {
	top: 2,1em;
	background: #dbe4f2;
	color: #425484;}
 
.nav_menu_haut li li a {
	color: #ffffff; }
 
.nav_menu_haut li li a:hover {
	color: #ffffff; }
 
.nav_menu_haut li.selected a, .nav_menu_haut li.selected, .nav_menu_haut li.selected a:hover {
	background: #dbe4f2; color: #425484; }
 
.nav_menu_haut li.selected, .nav_menu_haut li.selected:hover a, .nav_menu_haut li.selected ul {
	background-color: #dbe4f2; }

Merci à chacun de ceux qui voudront bien apporter leur petite pierre et m'aider dans mon chemin de croix.
Bonne journée à tous.

**blueice** · 16/04/2007, 08h17

N'ayant pas les images ca va être dur. Upload un dossier complet avec ta page HTML CSS et images...

**xboulney** · 16/04/2007, 14h09

Oui pardon, j'y avait pensé au départ , mais bon....

Donc voici les fichiers, et merci.

**xboulney** · 28/04/2007, 09h21

Bonjour à tous,

je me permet de revenir sur le sujet sur lequel j'ai toujours quelques soucis.

Mon probleme avec mon menu home a été reglé, en fait j'avais oublié de fermer une balise.
Par contre j'ai toujours mon probleme de barre horizontale sur firefox et IE alors que je souhaite que la page ne deborde pas.
De plus maintenant je constate egalement que sous IE mon menu "navbar" est decalé sur la gauche.

Voilà merci a ceux qui voudront bien appoerté des reponses.

Je vous joint les fichiers mis à jour.

**blueice** · 28/04/2007, 10h46

Tu n'es pas logique, tu mets un html à 100% des marges à 4px et ensuite tu cherches à faire un menu à 100%...normal que ca dépasse...

pblm d'affichage de mon menu

HTML

Vue hybride

Discussions similaires

Partager

Partager