Difficultées à afficher correctement un menu css sous tous les navigateurs.

**Velkan.nexus** · 27/04/2008, 17h04

Bonsoir à tous,

Je suis actellement en train de créer le menu principal de mon site.

J'ai souhaité abandoner la mise en forme à l'aide de tableaux pour passer aux css.

Le problème c'est que je ne dois pas m'y prendre correctement, car lorsque mon menu css arrive à faire pile poil 1200px de largeur sous internet explorer, il n'en est pas de même pour firefox, netscape, opera et safari (le menu s'y affiche en plus petit sur la largeur).

Je dépose ci-dessous mon code source :

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
 
<style type="text/css">
<!--
#menu_principal li {
display:inline;
}
#menu_principal li a:link, #menu_principal li a:visited {
background:url(images/fonds_menu_principal/lien_desactive.png);
color:#333333;
display:block;
float:left;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
height:35px;
line-height:35px;
padding:0 15px;
text-decoration:none;
text-align:center;
}
#menu_principal li a:hover, #menu_principal li a:active,{
background:url(images/fonds_menu_principal/lien_active.png);
color:#000000;
display:block;
padding:0 15px;
}
-->
</style>
</head>
<body>
<div id="menu_principal">
 <li><strong><a href=""><img src="" alt="" width="29" height="29" align="middle" style="background-color: #FF0000"> Acceuil</a></strong></li>
 <li><strong><a href="">Locations</a></strong></li>
 <li><strong><a href="">Colocations</a></strong></li>
 <li><strong><a href="">Locations / vacances</a></strong></li>
 <li><strong><a href="">Echanges de maisons</a></strong></li>
 <li><strong><a href="">Gîtes</a></strong></li>
 <li><strong><a href="">Chambres d'hôtes</a></strong></li>
 <li><strong><a href="">Ventes</a></strong></li>
 <li><strong><a href="">Enchères</a></strong></li>
 <li><strong><a href="">Je me sépare de ...</a></strong></li>
 <li><strong><a href="">Tarifications</a></strong></li>
 <li><strong><a href="">Témoignages</a></strong></li>
</div>

Existe t'il un moyen pour permettre à ce menu de s'afficher en 35px de hauteur et 1200px de largeur tout en le laissant équilibré (padding et margin).

Je vous remercie par avance de vos multiples suggestions.

Cordialement.

Velkan.

**Velkan.nexus** · 28/04/2008, 09h28

Bonjour à tous,

N'ayant pas de réponses à mon premier post, je reformule ma question pour une meilleure compréhention :

Je souhaiterais si cela est possible, afficher le menu avec 35 px de hauteur, 1200 px de largeur, et que les éléments restent centrés tout en étant espacés les uns des autres.

Je vous remercie par avance pour toutes pistes communiquées.

Cordialement.

Velkan.

**hakurou** · 28/04/2008, 15h04

bonjour,

ton code est suspect !

pourquoi met tu des <li> sans avoir mis un <ul> en conteneur ?

ensuite

Code :

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

1
2
3
4
5
6
7
8
 
#menu_principal
{
    height:35px;
    width:1200px; /* ca va pas sur tous les ecrans ca ! */
 
    /* a toi d'ordonnancer le reste */
}

tu peux retirer les strong pour du css font-weight:bold; que tu appliqueras a tes liens

**pop_up** · 28/04/2008, 15h21

tu peux retirer les strong pour du css font-weight:bold; que tu appliqueras a tes liens

La balise strong peut avoir son utilité. Pour le référencement, les éléments entre des balises strong seront pris en compte tandis que avec la propriété css, ceux-ci ne seront pas pris en compte.

**Velkan.nexus** · 29/04/2008, 10h17

Bonjour à tous et à toutes,

J'ai modifier mon code source mais rien n'y fait je ne comprend pas pourquoi il est si difficile d'appliquer une largeur voulue :

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
 
<style type="text/css">
<!--
#menu_principal ul {
display:inline;
width:1200px;
}
#menu_principal li {
display:inline;
}
#menu_principal li a:link, #menu_principal li a:visited {
background:url(images/fonds_menu_principal/lien_desactive.png);
color:#333333;
display:block;
float:left;
font-family:"Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
height:35px;
line-height:35px;
text-decoration:none;
text-align:center;
}
#menu_principal li a:hover, #menu_principal li a:active,{
background:url(images/fonds_menu_principal/lien_active.png);
color:#000000;
display:block;
}
-->
</style>
</head>
<body>
<ul id="menu_principal">
 <li><a href="" title="Acceuil"><img src="images/cliparts/acceuil.png" width="35" height="35" border="0" align="absmiddle"></a></li>
 <li><a href="" title="Locations">Locations</a></li>
 <li><a href="" title="Colocations">Colocations</a></li>
 <li><a href="" title="Locations / vacances">Locations / vacances</a></li>
 <li><a href="" title="Echanges de maisons">Echanges de maisons</a></li>
 <li><a href="" title="Gîtes">Gîtes</a></li>
 <li><a href="" title="Chambres d'hôtes">Chambres d'hôtes</a></li>
 <li><a href="" title="Ventes">Ventes</a></li>
 <li><a href="" title="Enchères">Enchères</a></li>
 <li><a href="" title="Je me sépare de ...">Je me sépare de ...</a></li>
 <li><a href="" title="Offres / Tarifications">Offres / Tarifications</a></li>
 <li><a href="" title="Témoignages">Témoignages</a></li>
</ul>

Auriez vous un petite idée pour apliquer un largeur de 1200px ?

Pourquoi est-ce aussi difficile ?

(Je suis débutant dans le dommaine du css)

Merci de votre aide.

Velkan.

**hakurou** · 29/04/2008, 10h54

c'est pourtant tout bête mais j'ai l'impression que tu essaie de faire définir des tailles sur des types "inline" alors que l'on peut pas

a la place de ton css place cesi :

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
 
#menu_principal
{
	width:1200px; /* taille de  1200px */
	list-style-type:none; /* pas de puces */
	padding:0px; /* permet d'eviter d'indentation de la liste sous mozilla*/
	margin:0px;  /* permet d'eviter d'indentation de la liste sous IE*/
}
 
#menu_principal li {
	height:35px; /* hauteur de 35px */
	text-align:center;
	float:left;
	width:100px; /* 12 cases sur 1200px donc 100px par case */
}

tu dois mieux connaitre les différences entre les types "block" et les types "inline"

Difficultées à afficher correctement un menu css sous tous les navigateurs.

CSS

Vue hybride

Discussions similaires

Partager

Partager