Discussion :

[dupard2006]

bonjour,
je rencontre un problème de mise en forme d'un menu, construit avec des div et des images appélées par css.
je désire y intercaller un formulaire

Code :

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

<form method="get" action="recherche.php3" class="Boiterecherche"><input  type="text" onfocus="this.value=' '" value="Rechercher"   name="recherche" ></form>

quelque soit le lieu d'appel : div, form, input, seul ou dans plusieurs cas de configuration.
internet explorer provque toujours un décallage de mon menu vers le bas, mais pas Firefox !?

margin et padding mis à zéro.


quelqu'un possède une solution ?
merci d'avance
css

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
#Boiterecherche {
	background-color: red;
	color: #990000;
	margin: 0px;
	padding: 0px;
	bottom:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-bottom:1px solid #000000 ; 
	border-left:1px solid #000000; 
	border-right:1px solid #000000;
	border-top:1px solid #000000; 
	width:152px;
	height:18px; 
}

[blueice]

Montre nous le problème en situation, donne nous un lien ou tout le code html et css...
Sinon dur dur de t'aider.

[TabrisLeFol]

internet explorer provque toujours un décallage de mon menu vers le bas, mais pas Firefox !?

Internet Explorer supporte que partielement CSS et parfois adopte des comportements non spécifiés....

[dupard2006]

hello

voici :

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
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
/* CSS Document */
 
 /* Style pour le menu */
 
.menu			{
					font-family: arial, verdana, helvetica, sans;
					font-size: 9pt;
					/* height: 37px; */
					width: 154px;
					font-weight: bold;
					text-indent: 8px;
					line-height: 26pt;
					text-align: left;
					display: block;
					border:none ;
					margin:0px 0px 0px 0px;
					padding:0px 0px 0px 0px;
					list-style-type:none;
				}
 
 
a.menu:link 	{	 background-image:url(../IMG/images/bouton.jpg); 
					color: #FFFFFF; 
					text-decoration:none;
				}
 
 
a.menu:visited 	{	background-image:url(../IMG/images/bouton.jpg); 
					text-decoration:none;
					color: #FFFFFF;
				}
 
 
a.menu:active 	{	 background-image:url(../IMG/images/bouton_sel.jpg); 
					text-decoration:none;
					color: #999999;
				}
 
 
a.menu:hover 	{	 background-image:url(../IMG/images/bouton_sel.jpg); 
					text-decoration:none;
			 		color: #232323;
				}
 
#global {
	position:absolute; 
	left: 50%; 
	top: 50%;
	width: 770px; 
	height: 538px;
	margin-top: -279px; 
	margin-left: -385px;
	border-bottom:1px solid #000000 ; 
	border-left:1px solid #000000; 
	border-right:1px solid #000000;
	border-top:1px solid #000000; 
}
/* corps / menu */
#corpsMenu {
	width:154px; 
	text-align:center; 
	position:absolute; 
	top:100px; 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
/*  menu */
#tailleMenu {
	width:154px;
}
FORM {
margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
} 
#recherche{
	width:154px;
	background-color: orange;
	height:20px; 
	border:0px;
	bottom:0px;
margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-bottom:0px  ; 
	border-left:0px ; 
	border-right:0px;
	border-top:0px ;
} 
#rechercheA {
	width:154px;
	left:158px;
	/* background-color: blue; */
	color: #990000;
margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height:20px; 
	border-bottom:0px  ; 
	border-left:0px ; 
	border-right:0px;
	border-top:0px ; 
} 
#Boiterecherche {
	background-color: red;
	color: #990000;
margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	bottom:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-bottom:1px solid #000000 ; 
	border-left:1px solid #000000; 
	border-right:1px solid #000000;
	border-top:1px solid #000000; 
	width:152px;
	height:20px; 
}
.Boiterecherche {
	background-color: red;
	color: #990000;
margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	bottom:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border-bottom:1px solid #000000 ; 
	border-left:1px solid #000000; 
	border-right:1px solid #000000;
	border-top:1px solid #000000; 
	width:152px;
	height:20px; 
}
#Boiterecherche:hover {
	color:blue;
}
 
#basMenu{
	width:154px;
	height:50px;
	background-image:url(../IMG/images/bas_menu.jpg);
}
#hautMenu {
	width:154px;
	height:30px;
	background-image:url(../IMG/images/haut_menu.jpg);
}

et html :

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
</head>
<body>
<div id="navigationHaut"> 
		<!-- cadre conteneur -->
<div id="global">
		<!-- corps / menu -->
<div id="corpsMenu"> 	
	<div id="hautMenu">&nbsp;</div>
   <!--  <div id="rechercheA"> -->
	<div id="recherche"> 
		<form method="get" action="recherche.php3"class="Boiterecherche"><input  type="text" onfocus="this.value=' '" value="Rechercher"   name="recherche" ></form>
	</div> 
	<!-- </div> -->
	<div id="tailleMenu">
		</div>
	<div id="basMenu">&nbsp;</div>
	<div id="tailleMenu">
		<div><img src="./IMG/images/Anim.gif" width="154" height="154" alt="gif" title="gif animé" /></div>
	</div>
</div> <!-- FIN corps / menu -->
		<!-- corps / texte -->
<div id="corpsTexte">
		<!-- titre -->
	</div>		
</div> <!-- FIN corps / texte -->
</div> <!-- FIN cadre conteneur -->
</body>
</html>

merci

[blueice]

euh en fait un lien ca aurait été mieux pour avoir les images...
Sans image on voit rien du problème.

[dupard2006]

désolé

mais je planche en local, easyphp.

mais quelques soient les essais, le menu déborde toujours vers le bas.
avec internet explorer, hein !
Firefox le digère très bien, lui

merci de vos suggestions