28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Mon problème est assez complexe et g dû en simplifier le code et supprimer les info confidentielles pour bien le mettre en évidence. Je vous livre donc une page html épurée (générée par la page php), mais l'essentiel est là pour comprendre...

Dans un cadre professionnel, j'ai créé une page contenant un div flottant (class=Float) qui descend en meme tps que la page et qui contient un autre div (class=Filtres) qui apparait au survol du lien placé dans le div 'Float' et disparaît losque la souris s'en va (hover sur <a>). Utilisation professionnelle impliquant utilisation d'explorer, je me bats depuis plusieurs jours (!!!) pour faire en sorte que l'affichage soit correct sous IE (hover des liens seulement, affichage zarb, etc...).

Cette page affiche le contenu d'une table de la base de données (select simple monotable qui renvoie qques centaines de lignes) et mon div flottant est en fait un formulaire permettant d'appliquer un filtre sur la selection (where ... And ...).
Malheureusement pour moi, ce formulaire contient des balises select (listes deroulantes) qui, lorsque le div disparait, restent accrochés à la page par dessus tout le reste !!!

J'ai tout essayé (display:none, visibility:hidden, visibility:expression(....) pour explorer, z-index), rien n'y fait Smiley bawling ...........enfin, avec explorer.

Le fait que Firefox ne conserve pas mes select lors la disparition du div me rassure sur mon code (çà marche Smiley biggrin ), faut juste que j'arrive à le faire comprendre à IE ! (com' d'hab koi Smiley lol ). Cela dit, à ma grande surprise, ne pas encrer mes select dans la page est bien la seule chose correctement implémentée par Mozilla sur cette page..... Smiley eek

Voici le code correspondant :

CSS :
[#black][b]
/* Palette flottante des filtres */
#Float  {
	float : left;
	position : fixed;
	top : body.scrollTop +120 + "px";

	/* Patch IE */
	position : expression("absolute");
	top : expression(body.scrollTop +120 + "px");
	
	z-index : 20;
	width : 180px;
	height : 20px;
	border : outset darkorange 4px;
	padding : 0px 5px 0px 5px;
	background-color : #000000;

	color : ghostwhite;
	text-align : center;
	font : 120%;
}

#Float a div {
	font-size : 80%;
	display : none;
}

#Float span {
	padding-top : 3px;
}

#Float a:hover div {
	height : 250px;
	text-decoration : none;
	display : block;
}

#Filtres ul {
	text-align : center ;
	margin-bottom : 15px;
}

#Filtres li {
	text-align : center;
}
[/b][/#]



Page HTML :
[#black][b]
<html><head><link rel="stylesheet" type="text/css" href="Styles.css" /></head>
<body>
<div id='Float'>
	<a href='#'>
		<span># FILTRER #</span>
		<div id='Filtres'><hr>
			<form method=post>
				<ul><li id='x50'>Client :</li><li id='x50'>Wagon :</li>
				</ul>
				<ul>
					<li id='x50'>
						<select name=client size=5>
							<option value=Tous selected>Tous</option><option value=15>15</option><option value=1>1</option><option value=2>2</option><option value=17>17</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=7>7</option><option value=16>16</option><option value=9>9</option><option value=10>10</option><option value=8>8</option><option value=11>11</option><option value=12>12</option><option value=6>6</option><option value=19>19</option><option value=18>18</option><option value=13>13</option><option value=14>14</option>
						</select></li>

					 <li id='x50'>
					 	<select name=wagon size=5>
							<option value=Tous selected>Tous</option>
	<option value=5376147>5376147</option>
	<option value=5376508>5376508</option>
	<option value=6734001>6734001</option>
	<option value=6734002>6734002</option>
	<option value=6734005>6734005</option>
	<option value=6734007>6734007</option>
	<option value=6734010>6734010</option>
	<option value=6734011>6734011</option>
	<option value=6734012>6734012</option>
						</select>
					</li>
				</ul>
				<ul>Filtrer
				</ul>
			</form>
		</div>
	</a>
</div>

		<div class='Titre' id='Trajet'><h1>Trajets</h1><form name=formcheck method=post><div class='Headers'>
			<ul>
				<li>Numero</li>
				<li>Date</li>
				<li>Client</li>
				<li>Trajet</li>
				<li>Tonnage</li>
			</ul></div></div><div class='AffichTab' id='Trajet'><div class='DivActions'>
		<ul>
			<li>Ajouter</li>
		</ul></div><div class='Tab'>
<table align=center border=2>
<tr align=center>
				<td>5376147</td>
				<td>26/04/2005</td>
				<td>15</dt>
				<td>D</td>
				<td>546.000</td>
			</tr><tr align=center>
				<td>5376147</td>
				<td>24/04/2005</td>
				<td>15</dt>
				<td>D</td>
				<td>999.999</td>
			</tr> // etc........
                      </table>
[/b][/#]



Captures :
http://jahpounet.free.fr/Tests/f1.jpg http://jahpounet.free.fr/Tests/f2.jpg http://jahpounet.free.fr/Tests/f3.jpg

Bref, merci de me donner une soluce si qqn en a une.... çà commence à me gaver sévère, cette histoire Smiley fache

Pour ceux qui voudrait un aperçu de cke çà donne.......... http://jahpounet.free.fr/Tests/index.html
Modifié par shazim (02 May 2005 - 13:42)
Administrateur
shazim a écrit :

Captures :
C:\f1.jpg
C:\f2.jpg
C:\f3.jpg

Salut à toi et bienvenue ici,

Tes liens désignent ton disque dur, donc ça ne risque pas de fonctionner.
N'hésite pas à utiliser le lien "joindre une image" pour afficher des images sur le forum (si elles sont grandes, utilise ensuite l'option "générer une vignette").

Bonne chance Smiley smile