Menu déroulant, position

Version imprimable

3 pièce(s) jointe(s)

Bonjour,

J'essaie de raliser un site internet, mais j'ai qq problèmes avec la mise en page.

Sous Firefox :

- mon menu n'est pas centré (contrairement à IE)
- Lorsque un mênu se déroule, tout le reste de la page descend

Sous IE :

- les sous-menu ne se déroule pas

J'ai mis en image les résultats. Voici mon code :

CSS :

Celle du menu :

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
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
body {
    font: 0.7em verdana, sans-serif; /*11px*/
    margin: 0;
    padding: 0;
}
 
#menuDeroulant {
    width: 750px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
 
#menuDeroulant li {
    float: left;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}
 
#menuDeroulant .sousMenu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
 
#menuDeroulant .sousMenu li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited {
    display: block;
    height: auto;
    color: #FFFFFF;
    background: #3B4E77; /* Couleur de fond des menus principaux  */
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
 
#menuDeroulant li a:hover {
    background-color: #2E46F2;
}
 
#menuDeroulant li a:active {
    background-color: #5F879D;
}
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
 
#menuDeroulant .sousMenu li a:hover {
    background-image: none;
    background-color: #2E46F2;
}
 
#menuDeroulant li:hover > .sousMenu {
    display: block;
}

et celle des autres pages :

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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* CSS Document */
body {
    font-family: Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;  
    text-align:center;  
    background-color:#8399d6;
}
 
/* Zone de placement */
.page {
    width: 600px;   
    margin-left:auto;   
    margin-right:auto;   
    position: relative;      
}
 
.titre {
    width: 800px;  
    height: 160px;  
    text-align:center;  
    background-image : url(images/PageTitre.png) ;
}
 
.menuZone {
    width:800px;  
    height:50px;  
    text-align:center;  
    background-image : url(images/MenuZone.png) ;  
    position: relative;
}
 
.corps {
    width: 800px;   
    text-align:center;  
    background-image : url(images/page_corps.png) ;
}
 
.contenuHaut{
    width: 600x;  
    height:60px;  
    text-align:center;  
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.4em;
    color : #0000FF;
    background-image : url(images/ContenuHaut.png) ;
    background-repeat : no-repeat;
    padding-top : 15px;
}
 
.contenuCorps{
    width: 600x;  
    text-align:left;    
    background-image : url(images/ContenuCorps.png) ;
    padding-left : 10px;
    padding-right : 10px;
}
 
.contenuBas{
    width: 600x;
    height:50px;  
    background-image : url(images/ContenuBas.png) ;
    background-repeat : no-repeat;
}    
 
.finPage {
    width:800px;  
    height:50px;  
    background-image : url(images/page_corps.png) ;  
    float:left;
}
 
.imageCentre{
    text-align:center;
}
 
.copyright {
    width:600px;  
    height:50px;  
    text-align:center;  
    font-size:12px;  
    font-style:italic;  
    background-image : url(images/page_bas.png);  
    background-repeat: no-repeat;
}
 
#infoHaut {
    width : 180px;   
    height : 30px;   
    background-image : url(images/InfoHaut.png);
}
 
#infoMilieu {
    width : 180px;   
    background-image : url(images/InfoMilieu.png);
}
 
#infoBas {
    width : 180px;  
    height : 10px;   
    background-image : url(images/InfoBas.png);
    background-repeat : no-repeat;
    margin-bottom : 15px;
}
 
/* TEXTE */
#infoTitre {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.1em;
    color : #0000FF;
    text-align : center;
    padding-top : 5px;
}
 
#infoDate {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 1.0em;
    color : #0000FF;
    padding-left : 10px;
    padding-top : 5px;
    padding-bottom : 5px;
    text-align : left;
}
 
#infoTexte {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #0000FF;
    padding-left : 15px;
    text-align : left;
}
 
#infoVisite {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #0000FF;
    padding-top : 15px;
    padding-bottom : 5px;
    text-align : center;
}
 
#contenuTexte {
    font-family : Arial, Tahoma, Verdana, sans-serif;
    font-size : 0.8em;
    color : #000000;
}
 
td {
    vertical-align : top;
}

Et les pages :

Celle qui inclus le menu :

Code:

1
2
3
4
5
 
<body>     
    <div class = "titre"></div>
    <div class="menuZone"><?php include("EssaiMenu.php");?></div>
</body>

et celle qui inclu l'entete :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<table border=0 align=center cellpadding=0 cellspacing=0>
    <tr>
        <td><?php include("entete.php");?></td>
    </tr>
    <tr>
        <td height=5>&nbsp;</td>
    </tr>
    <tr>
        <td><?php include("Corps.php");?></td>
</table>
 
 
</body>

Qqun a-t-il une idée de ce qui ne peux pas fonctionner ?

Merci d'avance pour votre aide précieuse

15/04/2008, 08h42
blueice

Tu ne donnes pas le code de ton menu...
15/04/2008, 09h42
pierre24

Une solution pour que lors du déroulement de ton menu, le reste de la page ne se décale pas :

met la propriété z-index = 1 dans le CSS de ton menu.
15/04/2008, 10h31
mLk92

Pourquoi un margin 0 ?

Pour bien centrer il te faut une taille et marge de gauche et droite en auto :)

Voici le code du menu :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Menu</title>
  <link rel="stylesheet" href="CSSMenu.css">
</head>
 
<body>
<ul id="menuDeroulant">
<li>
<a href="index.php?page=Accueil.php">Accueil</a>
</li>
<li>
<a href="#">Le club</a>
<ul class="sousMenu">
<li><a href="index.php?page=Historique.php">Historique</a></li>
<li><a href="index.php?page=Organisation.php">Organisation</a></li>
<li><a href="index.php?page=EcoleSki.php">Ecole de Ski</a></li>
<li><a href="index.php?page=Tarifs.php">Tarifs</a></li>
<li><a href="index.php?page=Moniteurs.php">Moniteurs</a></li>
<li><a href="index.php?page=Agenda.php">Agenda</a></li>
</ul>
</li>
<li>
<a href="#">Inscriptions</a>
<ul class="sousMenu">
<li><a href="#">Club</a></li>
<li><a href="#">Chamonix</a></li>
</ul>
</li>
<li>
<a href="index.php?page=Contact.php">Contact</a>
</li>
<li>
<a href="index.php?page=Administration.php">Administration</a>
</li>
</ul>
 
 
</body>
</html>

Encore merci pour votre aide

15/04/2008, 12h02
pierre24
ton id menuDeroulant devrait ressembler à cela au niveau du positionnement :
Code:

1 2 3 4 5 6 7 8 9 menuDeroulant{ position :absolute; z-index : 1; top: //ta position; left: //ta position; }
Voici une solution;
21/04/2008, 21h21
nicou_doude

Maintenant cela marche avec Firefox, mais pas avec IE.
Les sous-emnus ne se déroulent pas.

Qqun a-t-il une idée ?

Encore merci
22/04/2008, 08h33
No3l_tek

Personnellement ne cherche pas à développer sous IE6.

Prends IE7 et FF il suffit de regarder statistiques sur l'utilisation des browsers en espérant que IE disparaisse ou se mette à suivre FF, c'est mieux pour les développeurs.

voici un lien vers un topic :

ICI

J'ai adapté pour IE7 et FF. De toute manière IE6 gère mal le CSS2.
Bonne chance.
23/04/2008, 08h16
nicou_doude

Merci.

Le problème est que le site existe déjà et là je le reprend.
De ce que j'ai pu voir, il y a pas mal de visite depuis IE, donc je nepeux laisser tomber ce navigateur.

C'est vraiment pénible ces différences entre navigateurs !!

A noter que tout fonctionne très bien avec FF (menu centré, déroulant ...)
Sous IE, le menu est aux fraises et ne se déroule pas.
Je peux s'il le faut poster le code modifié entre temps
23/04/2008, 11h36
Er3van

Citation:

Envoyé par No3l_tek

Personnellement ne cherche pas à développer sous IE6.

Prends IE7 et FF il suffit de regarder statistiques sur l'utilisation des browsers en espérant que IE disparaisse ou se mette à suivre FF, c'est mieux pour les développeurs.

Heu, j'suis pas vraiment d'accord.
Ne serait-ce que par principe, ce n'est pas à l'outil de s'adapter au développeur, mais au développeur de s'adapter à l'outil.
Ensuite, il y a bcp d'entreprise qui sont restreintes à l'utilisation d'IE6 ( sans même parler de l'utilisateur lambda qui a acheté son Vista/Xp est qui ne sait même pas ce qu'est un navigateur, et qui n'installera jamais FF, Safari ou Opera)

Après, moi j'aurais tendance à penser qu'IE6 est plus rigoureux que Mozilla qui est plus arangeant, c'est pas forcément une bonne idée de développer directement sur Mozilla, puisque certaines erreurs passent à travers. Et à la fin pour essayer de rectifier toutes les petites erreurs....

D'une manière générale, y a pas de raisons pour que MSIE change de façon de faire. Leur logiciel marche, IE7 est au point et sans doute mieux que la version 2.0 de FF qui a des fuites de mémoires énormes.

Et, pour limiter les différences entre navigateurs, développer en XHTML est une première méthode efficace.
23/04/2008, 13h42
Erwan31

Citation:

Envoyé par No3l_tek

Prends IE7 et FF il suffit de regarder statistiques sur l'utilisation des browsers en espérant que IE disparaisse ou se mette à suivre FF, c'est mieux pour les développeurs.

8O IE n'est pas prés de disparaitre, sa version 8 dont le moteur de rendu a été entièrement refondu est sorti en version bêta.

Citation:

Envoyé par Er3van

Après, moi j'aurais tendance à penser qu'IE6 est plus rigoureux que Mozilla qui est plus arangeant, c'est pas forcément une bonne idée de développer directement sur Mozilla, puisque certaines erreurs passent à travers. Et à la fin pour essayer de rectifier toutes les petites erreurs....

Et pourtant... Le support des standard sur les navigateurs Gecko comme firefox est un des meilleurs, et même supérieur à Opera s'agissant d'XHTML/HTML.
Donc si l'on doit tester ses pages Firefox est un de ceux qui faudrait privilégier.
Et Firefox n'est pas forcément plus arrangeant qu'IE, ils sont de toute façon tous plus permissif quant à la syntaxe à partir du moment ou les documents sont traités comme de la soupe de balise, c-a-d tant qu'ils seront servi en text/html et non en application/xhtml+xml.

Citation:

Envoyé par Er3van

D'une manière générale, y a pas de raisons pour que MSIE change de façon de faire. Leur logiciel marche, IE7 est au point et sans doute mieux que la version 2.0 de FF qui a des fuites de mémoires énormes.

Non, Firefox 2 est certe perfectible comme tous les navigateurs alternatifs
mais IE7 est bien en dessous concernant le support des standards et le nombre de ses bugs est encore très importants.

Citation:

Envoyé par Er3van

Et, pour limiter les différences entre navigateurs, développer en XHTML est une première méthode efficace.

D'ou tu sors ça? Je vois pas ce qu'un simple changement de syntaxe va changer au schimblique. Pour limiter les différences il suffit d'éviter le mode de rendu Quirks.
23/04/2008, 13h48
Candygirl

Citation:

Envoyé par Er3van

Après, moi j'aurais tendance à penser qu'IE6 est plus rigoureux que Mozilla qui est plus arangeant, c'est pas forcément une bonne idée de développer directement sur Mozilla, puisque certaines erreurs passent à travers. Et à la fin pour essayer de rectifier toutes les petites erreurs....

8O IE 6 est plus rigoureux ?!
Quels sont donc ces erreurs qui passent à travers sur "mozilla" ?

Tes propos vont quand même, me semble-t-il, à l'encontre de ce que la majorité des développeurs pensent. J'ai, perso, une longues liste de points qui montrent le contraire de ce que tu énonces.

Citation:

Envoyé par Er3van

D'une manière générale, y a pas de raisons pour que MSIE change de façon de faire. Leur logiciel marche, IE7 est au point et sans doute mieux que la version 2.0 de FF qui a des fuites de mémoires énormes.

Au contraire, ils ont une excellente raison de changer: ils veulent essayer de rester présents, en avant, sur la scène des navigateurs ce qui est perdu d'avance avec un demi-flop comme IE7 (toujours sur le même moteur de rendu profondément bugué pour ce qui est de restituer un visuel selon les recommandations w3c). Ils l'ont d'ailleurs compris puisque IE8 part sur de nouvelles bases.

Citation:

Envoyé par Er3van

Et, pour limiter les différences entre navigateurs, développer en XHTML est une première méthode efficace.

On peut très bien rester en html. C'est la présence d'un doctype complet, tout en haut des pages qui fera la différence en fesant basculer le navigateur en mode (presque) standard au lieu du mode quirks

Edit:zut, grillée par Erwan31 :aie:
23/04/2008, 13h59
Erwan31

CandyGirl on est synchro :aie:
Tu vois Er3van t'as même la réponse en double :mrgreen:
23/04/2008, 14h23
Er3van

En double, c'est génial ^^

J'vais essayer de répondre à tous, mais vu que je ne suis pas de l'avis de tout le monde ça risque de créer un débat inutile.

Pour le XHTML, disons que par principe, ça veut dire qu'on est sûr d'avoir le bon doctype, toutes les balises fermées, et qu'à partir de là, on a déjà enlevé pas mal d'erreur qu'on aimerait bien attribuer à notre cher navigateur.

Pour FF2, j'suis désolé, il est peut-être moins fourni en bugs mineurs, mais y a des trucs énormes qui devraient être rectifiés. Vous avez déjà tester une application pendant plus de deux heures sur FF2 ? Moi oui, et la mémoire utilisée par le proc s'envole à plus d'1Go ! C'est déjà pas le cas sur IE6/7.
Après, j'vous l'accorde, y a des bugs mineurs qui trainent sur IE du à des pb de standards, m'enfin rien qui vous oblige à ouvrir le gestionnaire des tâches pour terminer le processus à la main.
Ou alors on m'a refilé une version daubée 3 fois de suite ?? :)

MSIE sera toujours présent, pour la simple et bonne raison que c'est Microsoft.
Le principe Microsoft, et cela s'étend bien au delà du web, c'est de faire une uniformité dans toute sa gamme ( notamment le site de Microsoft et la MSDN toujours buggués sous FF, SharePoint.... ) et de se rendre quasi indispensable. A terme, y a pleins d'entreprises qui cultivent des développement en "full microsoft" pour avoir qqchose de totalement homogène, et là dessus hors de question de mettre un FF.

Pour ce qui est de IE6, laissez un novice écrire une page html bateau, il va avoir pleins d'erreurs dans tous les sens, sous FF, il va avoir plus ou moins ce qu'il veut, sans pour autant l'avoir fait exprès, avoir des erreurs de code énormes. Et puis le novice prend ses habitudes, et puis un jour il ne comprend pas pourquoi ça ne marche pas sous IE, Opera ou encore Safari, alors qu'il a qqchose qui marche sous FF....
Plus rigoureux c'est dans le sens où : ça marche sous IE ? Ca marchera partout !

Après, vous pouvez ne pas être d'accord, et c'est tant mieux, mais ce n'est pas le but de ce topic, si ?
23/04/2008, 15h38
Candygirl

Non, le but n'est pas d'être d'accord ou convaincre, plutôt de donner une autre pensée que le lecteur puisse constater la divergeance des avis et se forger, peut-être, sa propre opinion.

oky je comprends mieux ta réponse ci-dessus avec cet éclairage; particulièrement ton positionnement raport à un "novice". Ma vision de départ diffère puisque je la base sur un développeur professionnel de site pour le montage (x)html/css selon les recommandations w3c (fermeture de balise etc,... ok).
23/04/2008, 15h49
Candygirl
Citation:
Envoyé par nicou_doude

Code:

1 2 3 #menuDeroulant li:hover > .sousMenu { display: block; }
Le sélecteur d'enfant (>) est incompris d'IE6, de même que la pseudo-classe :hover attribuée à un autre élément que le a (ici au li). Il est donc "normal" que ton menu ne se déroule pas sur IE6 (par contre c'est ok sur IE7). Tu peux passer par du javascript pour y palier.
23/04/2008, 15h55
Er3van

C'est vrai que si on prend l'angle d'un développeur pro qui connait donc la plupart des standards, normes, et le langage, y a moins d'intérêt pour lui de développer sous IE. Mais bon, pour le coup, tout le monde n'est pas pro, comme tout le monde n'est pas novice, il n'y a donc peut-être pas de "meilleur" navigateur comme il n'y en a pas non plus de parfait...
23/04/2008, 17h01
Erwan31

Citation:

Envoyé par Er3van

J'vais essayer de répondre à tous, mais vu que je ne suis pas de l'avis de tout le monde ça risque de créer un débat inutile.

Pourquoi inutile? Certe nous dévions un peu de la demande initiale mais si nous ne pouvons pas discuter ici de ce type de sujet alors ou pourrions nous le faire?

Citation:

Envoyé par Er3van

Pour le XHTML, disons que par principe, ça veut dire qu'on est sûr d'avoir le bon doctype, toutes les balises fermées, et qu'à partir de là, on a déjà enlevé pas mal d'erreur qu'on aimerait bien attribuer à notre cher navigateur.

Tu as une conception assez particulière de la chose (pour le doctype) mais je vois ce que tu veux dire concernant certaines erreurs d'écriture qui ne sont plus possible dans un doc XHTML valide.
Oui la validité XHTML permettra de détecter des erreurs d'écritures autorisées par HTML qui pourront provoquer certains problème d'affichage et des différence de traitement des erreurs d'un navigateur à l'autre,
mais en lui-même XHTML ne limitera pas plus les différences d'affichage qu'HTML.

Citation:

Envoyé par Er3van

Pour FF2, j'suis désolé, il est peut-être moins fourni en bugs mineurs, mais y a des trucs énormes qui devraient être rectifiés. Vous avez déjà tester une application pendant plus de deux heures sur FF2 ? Moi oui, et la mémoire utilisée par le proc s'envole à plus d'1Go ! C'est déjà pas le cas sur IE6/7.

Oui sur ce point tu as raison et je ne contredirai pas, ceci dit Firefox 3 à manifestement amélioré le traitement de la mémoire.
Mais il est plus long à se lancer qu'IE, ça c'est normal...

Merci pour toutes ces explications, c'est toujours intéressant d'avoir différents avis !!

Cela dis, revenons-en à nos moutons, ou plutot à mes moutons :)

Voici le code complet de ma page (issu de l'affichage des sources depuis IE) :

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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SSCA - Snow et Ski club ajoulot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Site du snow et ski club ajoulot, qui se trouve dans le Jura, en Ajoie, à Fontenais. Le ski club organise des camps et des sorties durant toute la saison de ski. Il a créé une école de ski à Montvoie, et les cours sont donnés par des moniteurs J+S qualifié.">
<meta name="keywords" content="snow, snowboard, snowblad, ski, ski sur herbe, club, ski club, ski-club, ski club ajoulot, skiclubajoulot, ski-club ajoulot, ajoulot, ajoie, canton du jura, jurassien, jura, suisse, fontenais, porrentruy, comité, historique, inscription, tarif, moniteur, moniteur de ski, moniteur de snow, camp de ski, photo, camp, camps, sortie, pique-nique, Fontenais, activité, famille, jeune, vieux, détente, vacances, station, télésiège, arbalète, remontée mécanique">
<meta http-equiv="Content-Language" content="fr-ch">
<meta name="reply-to" content="ssca@ssca.ch">
<meta name="category" content="Sports">
<meta name="robots" content="all">
<meta name="distribution" content="global">
<meta name="revisit-after" content="7 days">
<meta name="copyright" content="© SSCA">
<meta name="identifier-url" content="http://www.ssca.ch">
<meta name="expires" content="never">
<link href="page.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSSMenu.css">
</head>
 
<body>
<table border=0 align=center cellpadding=0 cellspacing=0>
	<tr>
		<td>	<div class = "titre"></div>
	<div class="menuZone"><ul id="menuDeroulant">
<li>
<a href="index.php?page=Accueil.php">Accueil</a>
</li>
<li>
<a href="#">Le club</a>
<ul class="sousMenu">
<li><a href="index.php?page=Historique.php">Historique</a></li>
<li><a href="index.php?page=Organisation.php">Organisation</a></li>
<li><a href="index.php?page=EcoleSki.php">Ecole de Ski</a></li>
<li><a href="index.php?page=Tarifs.php">Tarifs</a></li>
<li><a href="index.php?page=Moniteurs.php">Moniteurs</a></li>
<li><a href="index.php?page=Agenda.php">Agenda</a></li>
</ul>
</li>
<li>
<a href="#">Inscriptions</a>
<ul class="sousMenu">
<li><a href="index.php?page=Inscription.php">Club</a></li>
<li><a href="#">Chamonix</a></li>
</ul>
</li>
<li>
<a href="index.php?page=Contact.php">Contact</a>
</li>
<li>
<a href="index.php?page=Administration.php">Administration</a>
</li>
</ul>
 
</div></td>
	</tr>
	<tr>
		<td height=5>&nbsp;</td>
	</tr>
	<tr>
		<td><div class = "corps">
<table border=0 cellpadding=0 cellspacing=0 align=center>
	<tr>
		<td>
				<div class="infoHaut">
		<div class="infoTitre">Prochaine activité</div>
	</div>
	<div class="infoMilieu">
		<div class="infoDate">28.02.2008</div>
		<div class="infoTexte">Sortie à Chamonix</div>
	</div>
	<div class="infoBas"></div> 
 
	<div class="infoHaut">
		<div class="infoTitre">Nos sponsors</div>
	</div>
	<div class="infoMilieu">
		<div class="infoVisite"><a href="http://www.novicar.ch" target="blank"><img src="images/novicar.png" alt="Novicar" border="0"/></a></div> 
		<div class="infoVisite"><a href="http://www.les-cj.ch" target="blank"><img src="images/cj.png" alt="Chemins de fer du Jura" border="0"/></a></div>
	</div>
	<div class="infoBas"></div> 
 
	<div class="infoHaut">
		<div class="infoTitre">Visiteurs</div>
	</div>
	<div class="infoMilieu">
		<div class="infoVisite"><strong><script type="text/javascript" language="javascript" src="http://www.i-services.net/membres/compteur/compteur.php?user=101216&idcpt=81707&cache=0&read_only=0"></script></strong></div>
	</div>
	<div class="infoBas"></div>
 
	<div class="infoHaut">
		<div class="infoTitre">Sondage</div>
	</div>
	<div class="infoMilieu">
		<div class="infoTexte"><br />Quelle sortie avez-vous le plus apprécié cette saison ? <br /><br /><form method="POST" action="TraitementSondage.php">
		  <input type="hidden" name="PHPSESSID" value="6811c5558466f8c8479a1310bb78ed25" />
		  <div>
			<input class="zonetext" type="radio" value="1" name="choix" /> - Churwalden<br />
			<input class="zonetext" type="radio" value="2" name="choix" /> - Anzère<br />
			<input class="zonetext" type="radio" value="3" name="choix" /> - Loèche-les-bains<br />
			<input class="zonetext" type="radio" value="4" name="choix" /> - Chamonix<br /><br />
		  </div>
		 <div align="center">
			<input class="zonetext" type="submit" value=" Voter !"/><br />
		 </div>
		  </form></div>
	</div>
	<div class="infoBas"></div>		</td>
		<td>&nbsp;</td>
		<td>
 
<div class = "page">
<div class = "contenuHaut">Accueil</div>
<div class = "contenuCorps">
 
</div> 
<div class = "contenuBas"></div>	
<div class = "copyright">Copyright &copy; Tous droits réservés - SSCA 2004-2007 
</div>	
</div>		</td>
	</tr>
</table>
</div></td>
</table>
</body>
</html>

Et la 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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
/* CSS Document */
body {
	font-family: Trebuchet MS, Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;  
	text-align:center;  
	background-color:#8399d6;
}
 
/* Zone de placement */
.page {
	width: 600px;   
	margin-left:auto;   
	margin-right:auto;   
	position: relative;      
}
 
.titre {
	width: 800px;  
	height: 160px;  
	text-align:center;  
	background-image : url(images/PageTitre.png) ;
}
 
.menuZone {
	width:800px;  
	height:50px;  
	text-align:center;  
	background-image : url(images/MenuZone.png) ;  
	position: relative;
}
 
.corps {
	width: 800px;   
	text-align:center;  
	background-image : url(images/page_corps.png) ;
}
 
.contenuHaut{
	width: 600x;  
	height:60px;  
	text-align:center;  
	font-family : Arial, Tahoma, Verdana, sans-serif;
	font-size : 1.4em;
	color : #0000FF;
	background-image : url(images/ContenuHaut.png) ;
	background-repeat : no-repeat;
	padding-top : 15px;
}
 
.contenuCorps{
	width: 600x;  
	text-align:left;	
	background-image : url(images/ContenuCorps.png) ;
	padding-left : 10px;
	padding-right : 10px;
}
 
.contenuBas{
	width: 600x;
	height:50px;  
	background-image : url(images/ContenuBas.png) ;
	background-repeat : no-repeat;
}	
 
.finPage {
	width:800px;  
	height:50px;  
	background-image : url(images/page_corps.png) ;  
	float:left;
}
 
.imageCentre{
	text-align:center;
}
 
.copyright {
	width:600px;  
	height:50px;  
	text-align:center;  
	font-size:12px;  
	font-style:italic;  
	background-image : url(images/page_bas.png);  
	background-repeat: no-repeat;
}
 
.infoHaut {
	width : 180px;   
	height : 30px;   
	background-image : url(images/InfoHaut.png);
}
 
.infoMilieu {
	width : 180px;	
	background-image : url(images/InfoMilieu.png);
}
 
.infoBas {
	width : 180px;  
	height : 10px;   
	background-image : url(images/InfoBas.png);
	background-repeat : no-repeat;
	margin-bottom : 15px;
}
 
/* TEXTE */
.infoTitre {
	font-family : Arial, Tahoma, Verdana, sans-serif;
	font-size : 1.1em;
	color : #0000FF;
	text-align : center;
	padding-top : 5px;
}
 
.infoDate {
	font-family : Arial, Tahoma, Verdana, sans-serif;
	font-size : 1.0em;
	color : #0000FF;
	padding-left : 10px;
	padding-top : 5px;
	padding-bottom : 5px;
	text-align : left;
}
 
.infoTexte {
	font-family : Arial, Tahoma, Verdana, sans-serif;
	font-size : 0.8em;
	color : #0000FF;
	padding-left : 15px;
	text-align : left;
}
 
.infoVisite {
	font-family : Arial, Tahoma, Verdana, sans-serif;
	font-size : 0.8em;
	color : #0000FF;
	padding-top : 15px;
	padding-bottom : 5px;
	text-align : center;
}
 
#contenuTexte {
	font-family : Trebuchet MS, Arial, Tahoma, Verdana, sans-serif;
	font-size : 0.8em;
	color : #000000;
}
 
td {
	vertical-align : top;
}
 
form {
	margin : 0;
}
 
#menuDeroulant {
	width: 750px;
	list-style-type: none;
	margin: auto;
	padding: 0 0 0 25;
	border: 0;
	z-index : 3;
	position : absolute;
}
 
#menuDeroulant li {
	float: left;
	width: 150px;
	margin: auto;
	padding: 0;
	border: 0;
	z-index : 3;
}
 
#menuDeroulant .sousMenu {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
 
#menuDeroulant .sousMenu li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited {
	display: block;
	height: auto;
	color: #FFFFFF;
	background: #3B4E77; /* Couleur de fond des menus principaux  */
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
 
#menuDeroulant li a:hover {
	background-color: #2E46F2;
}
 
#menuDeroulant li a:active {
	background-color: #5F879D;
}
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
}
 
#menuDeroulant .sousMenu li a:hover {
	background-image: none;
	background-color: #2E46F2;
}
 
#menuDeroulant li:hover > .sousMenu {
	display: block;
}

Sous FF il n'y a aucun problème, tout s'affiche correctement. Par conrtre sous IE le menu se retrouve aux fraises, mais en plus de ça ne se déroule pas !!

Qqun voit-il ce qui ne joue pas dans mon code ?

06/06/2008, 13h45
No3l_tek

Hi,

....je n'ai pas suivi tous les moutons mais quand j'ai utilisé le mot "disparaitre" pour IE je me suis mal exprimé ou du moins mal fait comprendre.

Chaque année FF gagne 5% d'utilisateur et c'est l'inverse chez IE ....il y a une bonne raison. Ce que je veux dire c'est que IE va devoir faire des efforts, il a commencé en passant à sa version 7...

voilà.

Pour ton code moi j'ai eu des problèmes également pour mon menu.
Essaie de jouer avec le padding. Candygirl m'a super bien aidé moi...

Essaie de changer des valeurs sur les marges et tu verras laquelle te fais bouger le menu, une fois fait tu auras trouver ce qui ne va pas et ensuite tu pourras savoir où aller...

désolé j'ai pas le temps de tester, GOOD luck :P