css qui ne fonctionne pas

**hugodu28** · 08/05/2013, 18h00

bojnour,
j'ai récupéré un code css pour réaliser un index de navigation.
Quand je passe sur un nom, celui ci devient en surbrillance bleue.

Pour le code où les 2 <div> sont supperposées, le css fonctionne;
Nom : image2.jpg
Affichages : 102
Taille : 64,9 Ko

Nom : image2.jpg
Affichages : 102
Taille : 64,9 Ko

mais là où les <div> sont côtes à côtes ça ne fonctionnne plus.
Nom : image1.jpg
Affichages : 95
Taille : 103,0 Ko

code 1ère image:

Code php :

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
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Advanced Navigation menus with CSS3</title>
		<link rel="stylesheet" type="text/css" href="styles/screen.css" />
	</head>
	<body>
		<div id="container">
			<ul id="nav">
			  <li><div class="icon">P</div><a href="#" title="Click here for..."><h4>Présences</h4> <span>Visualiser les présences</span></a></li>
              <li><div class="icon">S</div><a href="#" title="Click here for..."><h4>CAF</h4> <span>Déclaration CAF</span></a></li>
              <li><div class="icon">U</div><a href="#" title="Click here for..."><h4>Registre</h4> <span>Tenir le registre  </span></a></li>
			  <li><div class="icon">J</div><a href="#" title="Click here for..."><h4>Réunion</h4> <span>Creer les dates de reunion</span></a></li>
				<li><div class="icon">O</div><a href="#" title="Click here for..."><h4>Listing</h4> <span>Registre des inscriptions</span></a></li>			
			</ul>
			<div id="panel">
				<!-- Contents of page will go here -->
                			   <?php
if (isset($_POST['creer'])){
	//echo ("le numero de la ville selectionn?e est:".$_POST['ville'].""); 
	 $unite=$_POST['unite'];} else {$unite=0;}
 
if (isset($_POST['creer'])){
	$trimT=$_POST['mois'];} else{
		$trimT=5;
		}
		//echo $trimT;
 
 
	?> 
 
 
        <form id="form1" name="form1" method="post" action="test_date.php">
          <p>
              <select name="unite" id="unite" >
        <?php	
 
	  // on se connecte à notre base
$base = mysql_connect ('localhost', 'root', '');  
mysql_select_db ('scout', $base) ; 
 // Requete unité
	  $sqlcentre = "SELECT * FROM unite ORDER by id" ;
	   $requeteC = mysql_query($sqlcentre) or die('Erreur SQL !<br />'.$sqlcentre.'<br />'.mysql_error()); 
 
		 while( $resultC = mysql_fetch_array( $requeteC ) )
		 { 
		 	$centre=$resultC['nom'];
			$num=$resultC['id'];
 
			if ($num==$unite){
    ?> 
    <option value="<?php echo $num; ?>" name"<?php echo $num ;?>" selected="selected"> <?php echo $centre; ?> </option>
    <?php ;}
	else {?>
            <option value="<?php echo $num; ?>" name"<?php echo $num ;?>"> <?php echo $centre; ?> </option> 
            <?php    }} ?>
            </select> 
 
         <select name="mois" id="mois">   
            <?php
 // Requete trimestre
	  $sqlT = "SELECT * FROM trimestre ORDER by id" ;
	   $requeteT = mysql_query($sqlT) or die('Erreur SQL !<br />'.$sqlT.'<br />'.mysql_error()); 
 
		 while( $resultT = mysql_fetch_array( $requeteT ) )
		 { 
		 	$trim=$resultT['nom'];
			$numT=$resultT['id'];
			$moisT=$resultT['mois'];
			if ($moisT==$trimT){
    ?> 
    <option value="<?php echo $moisT; ?>" name"<?php echo $moisT ;?>" selected="selected"> <?php echo $trim; ?> </option>
    <?php ;}
	else {?>
            <option value="<?php echo $moisT; ?>" name"<?php echo $moisT ;?>"> <?php echo $trim; ?> </option> 
            <?php    }} ?>
            </select> 
                   <br/><br/></p>
            <input type="submit" name="creer" id="OK" value="Valider" accesskey="13" tabindex="13" />
</form>
<?php
 
// on se connecte à notre base
$base = mysql_connect ('localhost', 'root', '');  
mysql_select_db ('scout', $base) ;  
 
//LISTE DES NOMS
 
$sql5 = 'SELECT scout.matricule, scout.nom, scout.prenom,scout.unite, mutuelle.mutuelle FROM scout LEFT JOIN mutuelle ON scout.matricule = mutuelle.matricule WHERE scout.unite='.$unite.'  ORDER by nom ';  
  $req_nom = mysql_query($sql5) or die('Erreur SQL !<br />'.$sql5.'<br />'.mysql_error()); 
 
// LISTE DES DATES
 
 
$sqlP='SELECT presence.date, presence.matricule, presence.presence, date.moisID, date.ID FROM presence   JOIN date ON presence.dateID = date.ID WHERE date.uniteID='.$unite.' AND date.moisID<='.$trimT.' GROUP by date.date  ORDER by date.date  ';  
$req_date = mysql_query($sqlP) or die('Erreur SQL !<br />'.$sqlP.'<br />'.mysql_error()); 
   // OPERATION PAR DATE: présences et totaux
 $totaux=array();
 $presences=array();
 
 while($data_date = mysql_fetch_array($req_date)) {
 
      $sql4='SELECT mutuelle.mutuelle, Count(mutuelle.mutuelle) AS CompteDemutuelle, presence.dateID, scout.unite   FROM (mutuelle INNER JOIN scout ON mutuelle.matricule = scout.matricule) INNER JOIN presence ON scout.matricule = presence.matricule WHERE presence.presence=1 AND scout.unite='.$unite.' AND presence.dateID=" '.$data_date['ID'].'"   GROUP BY mutuelle.mutuelle, presence.dateID order by mutuelle.mutuelle';
	  //echo $sql4;
      $req_totaux = mysql_query($sql4) or die('Erreur SQL LA !<br />'.$sql4.'<br />'.mysql_error());
 
	  $sql8 = 'SELECT presence.presence, scout.nom FROM scout LEFT JOIN presence ON scout.matricule = presence.matricule  WHERE presence.dateID=" '.$data_date['ID'].'"    ';  
// echo $sql8;
      $req_presence = mysql_query($sql8) or die('Erreur SQL aaaz !<br />'.$sql8.'<br />'.mysql_error()); 
   while ($data_totaux = mysql_fetch_array($req_totaux)) {
        //on remplit un tableau qui contient uniquement les informations qu'on va manipuler, c'est plus pratique
        $totaux[$data_date['date']][$data_totaux['mutuelle']] = $data_totaux['CompteDemutuelle'];
 
      }
 
     $presences[$data_date['date']]=array();
      while ($data_presence = mysql_fetch_array($req_presence )) {
 
        $presences[$data_date['date']][$data_presence['nom']] = $data_presence['presence'];
 
      }
}
	?>	 
 
 
<!-- entete du tableau -->
<table border=1>
  <tr>
   <th>Nom</th>
   <th>Prenom</th>
   <th>Mutuelle</th>
   <?php
// LISTE DES DATES
 
$sqlP='SELECT presence.date, presence.matricule, presence.dateID, presence.presence, date.typeID, reunion.nom, date.moisID FROM (presence  JOIN date ON presence.dateID = date.ID) INNER JOIN reunion ON reunion.ID=date.typeID WHERE date.uniteID='.$unite.' AND date.moisID<='.$trimT.' GROUP by date.date  ORDER by date.date  ';
$req_date = mysql_query($sqlP) or die('Erreur SQLde !<br />'.$sqlP.'<br />'.mysql_error()); 
 
    while($data_date = mysql_fetch_array($req_date)) {
 
 $a=$data_date['date'];
$d=substr( $a,8,2)."-".substr( $a,5,2)."-".substr( $a,0,4);
 
      echo "<th>".$d." <br/> ".$data_date['nom'].  "</th>";
    }?>
 
  </tr>
 
 
<!-- une ligne = une personne -->
<?php
while( $data_nom = mysql_fetch_array($req_nom) ) {?>
  <tr>
    <td><?php echo $data_nom ['nom'] ?></td>
     <td><?php echo $data_nom ['prenom'] ?></td>
    <td><?php echo $data_nom ['mutuelle'] ?></td> 
<?php
// LISTE DES DATES (SI je remets pas la requête, je n'ai pas d'affichage à chaque ligne)
 
 $sqlP='SELECT presence.date, presence.matricule, presence.presence, date.moisID,date.ID FROM presence   JOIN date ON presence.dateID = date.ID WHERE date.uniteID='.$unite.' AND date.moisID<='.$trimT.' GROUP by date.date  ORDER by date.date  ';
$req_date = mysql_query($sqlP) or die('Erreur SQL !<br />'.$sqlP.'<br />'.mysql_error());   
 
 
    while($data_date = mysql_fetch_array($req_date)) {  
 
 
      //LA JE VOUDRAIS pour l'intersection matricule-date si présent case à cocher = checked
        $sql2 = 'SELECT presence.presence FROM scout LEFT JOIN presence ON scout.matricule = presence.matricule  WHERE presence.date=" '.$data_date['date'].'" AND presence.matricule='.$data_nom ['matricule'].'    Group By nom ';  
 
      // on lance la requête (mysql_query) et on impose un message d'erreur si la requête ne se passe pas bien (or die)
         $req2 = mysql_query($sql2) or die('Erreur SQL !<br />'.$sql2.'<br />'.mysql_error()); 
 
      // on va scanner tous les tuples un par un
         $data2 = ($data = mysql_fetch_array($req2));  
 
     ?>
 
     <td align=center><div>
     <?php
	// echo $data2['presence'];
	 ?>
      <input type="checkbox" name="tranche5" accesskey="7" tabindex="7" <?php  if ($data2['presence']=="1"){?>checked="checked">
 
     <?php 
      }
     ?> 
     </div> 
     </td>
     <?php
     } }
	 ?>
  </tr>
 
<tr>
<?php
// LISTE DES DATES (SI je remets pas la requête, je n'ai pas d'affichage à chaque ligne)
 
$sqlP='SELECT presence.date, presence.matricule, presence.presence, date.moisID, date.ID FROM presence   JOIN date ON presence.dateID = date.ID WHERE date.uniteID='.$unite.' AND date.moisID<='.$trimT.' GROUP by date.date  ORDER by date.date  ';
$req_date = mysql_query($sqlP) or die('Erreur SQL !<br />'.$sqlP.'<br />'.mysql_error()); 
 
 
     ?>
<th></th>
<th></th>
 <th>Totaux</th>
<?php
 
   while($data_date = mysql_fetch_array($req_date)) {  ?>
     <td>
 
        <?php
 
		  $sql4='SELECT mutuelle.mutuelle, Count(mutuelle.mutuelle) AS CompteDemutuelle, presence.dateID, scout.unite FROM (mutuelle INNER JOIN scout ON mutuelle.matricule = scout.matricule) INNER JOIN presence ON scout.matricule = presence.matricule WHERE presence.presence=1 AND scout.unite='.$unite.' AND presence.dateID=" '.$data_date['ID'].'" GROUP BY mutuelle.mutuelle, presence.dateID order by mutuelle.mutuelle';  
 
      $req_totaux2 = mysql_query($sql4) or die('Erreur SQL !<br />'.$sql4.'<br />'.mysql_error());
	  $data2 = mysql_fetch_array($req_totaux2);
	  //echo $data2['CompteDemutuelle'];
	  if( $data2['CompteDemutuelle']==0) {echo 'vide';} 
	  else {
		     foreach($totaux[$data_date['date']] as $mutuelle => $count_value) {
             echo $mutuelle.": ".$count_value;
		   ?><br/>
            <?php   
			 }}?>
      </td><?php
    }?>
</tr>
 
 
</table>
 
<p><br/>
</p>
<table  border="1">
  <tr align="center">
    <td colspan="2">Reel</td><td colspan="2">Heures Facturees</td><td colspan="2">Heures realisees</td>
<tr><td>Mutuelle</td><td> Type de reunion</td><td>Nb presents</td><td>Nb heures F</td><td>Nb presents</td><td>Nb heures R</td></tr>
<?php
$sqlnbh='SELECT Count(mutuelle.mutuelle) AS CompteDemutuelle, date.typeID, date.moisID, presence.presence, mutuelle.mutuelle, reunion.nom, reunion.nbh, presence.date FROM mutuelle INNER JOIN ((date INNER JOIN presence ON date.ID = presence.dateID) INNER JOIN reunion ON date.typeID = reunion.ID) ON mutuelle.matricule = presence.matricule WHERE date.moisID<='.$trimT.' GROUP BY date.typeID, presence.presence, mutuelle.mutuelle, reunion.nom, reunion.nbh  HAVING (((presence.presence)=1)) ORDER by mutuelle.mutuelle, reunion.ID';
 
  $req_nbh = mysql_query($sqlnbh) or die('Erreur SQL ici2 !<br />'.$sqlnbh.'<br />'.mysql_error());
	while (  $datanbh = mysql_fetch_array($req_nbh)) {
 
	$sqlnbp='SELECT Count(mutuelle.mutuelle) AS CompteDemutuelle, date.uniteID, date.typeID, date.moisID,  mutuelle.mutuelle, reunion.nom, reunion.nbh FROM (scout INNER JOIN (date INNER JOIN reunion ON date.typeID = reunion.ID) ON scout.unite = date.uniteID) INNER JOIN mutuelle ON scout.matricule = mutuelle.matricule  WHERE mutuelle.mutuelle="'.$datanbh['mutuelle'].'" AND reunion.ID='.$datanbh['typeID'].' AND date.moisID<='.$trimT.'  GROUP BY  mutuelle.mutuelle, reunion.nom, reunion.nbh';
 
  $req_nbp = mysql_query($sqlnbp) or die('Erreur SQL ici3 !<br />'.$sqlnbp.'<br />'.mysql_error());	
	while (  $datanbp = mysql_fetch_array($req_nbp)) {
			?>
<tr align="center"><td><?php echo $datanbh['mutuelle'] ?></td><td>	<?php echo $datanbh['nom'] ?></td><td> <?php echo $datanbp['CompteDemutuelle'] ?></td> <td> <?php echo (( $datanbp['CompteDemutuelle'])*$datanbp['nbh']) ?></td> <td> <?php echo $datanbh['CompteDemutuelle'] ?></td> <td> <?php echo (( $datanbh['CompteDemutuelle'])*$datanbh['nbh']) ?></td></tr>
		 <?php }}
?>
</table>
 
<p><br/>
</p>
<table  border="1">
  <tr align="center"><td colspan="2">Previsionnel</td><td colspan="2">Heures Facturees</td><td colspan="2">Heures realisees</td>
<tr><td>Mutuelle</td><td> Type de reunion</td><td>Nb presents</td><td>Nb heures F</td><td>Nb presents</td><td>Nb heures R</td></tr>
<?php
$sqlnbh2='SELECT Count(mutuelle.mutuelle) AS CompteDemutuelle, date.typeID, date.moisID, presence.presence, mutuelle.mutuelle, reunion.nom, reunion.nbh, presence.date FROM mutuelle INNER JOIN ((date INNER JOIN presence ON date.ID = presence.dateID) INNER JOIN reunion ON date.typeID = reunion.ID) ON mutuelle.matricule = presence.matricule WHERE date.moisID>'.$trimT.' GROUP BY date.typeID, presence.presence, mutuelle.mutuelle, reunion.nom, reunion.nbh  HAVING (((presence.presence)=1)) ORDER by mutuelle.mutuelle, reunion.ID';
 
  $req_nbh2 = mysql_query($sqlnbh2) or die('Erreur SQL ici2 !<br />'.$sqlnbh2.'<br />'.mysql_error());
	while (  $datanbh2 = mysql_fetch_array($req_nbh2)) {
 
	$sqlnbp2='SELECT Count(mutuelle.mutuelle) AS CompteDemutuelle, date.uniteID, date.typeID, date.moisID,  mutuelle.mutuelle, reunion.nom, reunion.nbh FROM (scout INNER JOIN (date INNER JOIN reunion ON date.typeID = reunion.ID) ON scout.unite = date.uniteID) INNER JOIN mutuelle ON scout.matricule = mutuelle.matricule  WHERE mutuelle.mutuelle="'.$datanbh2['mutuelle'].'" AND reunion.ID='.$datanbh2['typeID'].' AND date.moisID>'.$trimT.'  GROUP BY  mutuelle.mutuelle, reunion.nom, reunion.nbh';
 
  $req_nbp2 = mysql_query($sqlnbp2) or die('Erreur SQL ici3 !<br />'.$sqlnbp2.'<br />'.mysql_error());	
 
		  while (  $datanbp2 = mysql_fetch_array($req_nbp2)) {
 
			?>
<tr align="center"><td><?php echo $datanbh2['mutuelle'] ?></td><td>	<?php echo $datanbh2['nom'] ?></td><td> <?php echo $datanbp2['CompteDemutuelle'] ?></td> <td> <?php echo (( $datanbp2['CompteDemutuelle'])*$datanbp2['nbh']) ?></td> <td> <?php echo $datanbh2['CompteDemutuelle']*0.75 ?></td> <td> <?php echo (( $datanbh2['CompteDemutuelle'])*$datanbh2['nbh']*0.75) ?></td></tr>
		 <?php }}
?>
</table>			
			</div>
 
		</div>
	</body>
</html>

code de la 2ème image:

**N1bus** · 08/05/2013, 21h35

Bonjour,

mais là où les <div> sont côtes à côtes ça ne fonctionnne plus.

Ce serait sympa de nous dire à quelle ligne par exemple ça ne fonctionne pas dans ton code, car personne n'aura envie de deviner où ça se produit.

De plus, il faudrait que tu montres un bout de ton CSS pour voir quel style devrait être appliqué à ton DIV

**hugodu28** · 08/05/2013, 23h25

En fait j'ai essayé dans plusieurs navigateurs,
dans IE, il n'y a pas l'interactivité quand je passe sur les boutons.
dans google chrome et mozila, les "boutons" sont un peu au-dessus de la partie avec le formulaire.

C'est à la ligne 17 :<div id="panel">

Voici le code du 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
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
	/* Advanced navigation effects with CSS3 */
 
		@font-face{ 
			font-family: 'WebSymbolsRegular';
			src: url('fonts/websymbols-regular-webfont.eot');
			src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     		url('fonts/websymbols-regular-webfont.woff') format('woff'),
	     		url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     		url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}
 
 
		body {
			background:	#dedede url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2RTVFM0YzMzQyRDExRTE4MEQ5QzlDQ0Q3MjlGM0REIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ2RTVFM0Y0MzQyRDExRTE4MEQ5QzlDQ0Q3MjlGM0REIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNUUzRjEzNDJEMTFFMTgwRDlDOUNDRDcyOUYzREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNUUzRjIzNDJEMTFFMTgwRDlDOUNDRDcyOUYzREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCABkAGQDAREAAhEBAxEB/8QAYgABAQEBAAAAAAAAAAAAAAAAAAECCAEBAQAAAAAAAAAAAAAAAAAAAAIQAAICAQMDBAIDAQAAAAAAAAABESExQVFhcYGh8JGxweHx0QISMhEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A6H6BKgQC6gZ4SkCwo6/YDX7AUvW4ABf8gOiALwtAE8cxYDqA6AXAACX5AaXjkBUPZgITnfyA3ATcAOgD0gLP6AmkUAsBEgXOAJLy64AJPPIDL53AWBbAjYBy8RG4CbjAF1AfICfcCSsaAMq7kBpQB305AJfiNgE3AF6YAixsATaV94AOumoCLkBfcBpPyAWiAuAJ6aAJWBdNgIvTAf2UqPYAtsgGwEflgPicAPTAKqygEWAlNZAtgTXqA+QFgFzuATAJQksgJbfACvWwC8AIrkBQBT5sAnKAsLAEtS/aAHqAC/YDQAsTryA0ARUXG8gJegDnIDjbYBLbAJpuvAFa9gE3gCOMTYBzQBuwC2nuAi0wE0AS/ACgE+NAHcBcQBOr/YGs7NATvgBw1QCAF3NgPoC3GbAnRQBQIpAuzAjATADvP6AJVzuAUaALhQAcVLjYC9wJD/1wAdgE4AeZAQpATfIACzdASeQDAUgADOfYCcgWnIBX2AL22ASAjcBWNwJM/W4FcxsgHTUA9sgHNAFi+4FnkBegEudIAMBUXgAv+gLrefwBLlz2ArxYEUfwAeX5AfP0AeHvwBK/z27gf//Z) repeat top left;
			font-size:	62.5%;
			font-family:verdana, helvetica, arial, sans-serif;
		}
 
 
		#container {
			width:		960px;
			position:	relative;
			margin:		auto;
		}
 
		ul#nav {
	position: relative;
	float:	left;
	margin:	0;
	padding:0;
	width: 200;
 
		}
 
		ul#nav li {
	position: relative;
	margin:	1px 0px;
	padding: 20px 40px 20px 100px;
	list-style:	none;
	width:		300px;
	background:	#fcfcfc;
	border: 1px solid #C4C4C4;
	-webkit-box-shadow: 0px 0px 4px #ccc;
	box-shadow: 0px 0px 4px #ccc;
	-webkit-transition: all 0.15s linear;
	overflow:	hidden;
 
		}
 
		ul#nav .icon {
			font-family: 'WebSymbolsRegular',cursive;
			font-size:	 3em;
			position:	absolute;
			left:		40px;
			top:		30px;
			text-shadow: 0px 2px 1px #999;
			-webkit-transition: all 0.3s linear;
		}
 
		ul#nav li:hover {
			background:			#dcebeb	;
			-webkit-transform: translateY(-3px) scale(1.05);
			-webkit-box-shadow: 0px 2px 7px #999;
			box-shadow: 0px 2px 7px #999;
			z-index:	1000;
		}
 
		ul#nav li:hover .icon {
			-webkit-transform: scale(1.5);
			color:			#b7480c;
		}
 
		ul#nav li a {
			display:			block;
			text-decoration: 	none;
			color:				#343434;
			text-transform:		uppercase;
			font-size:			1.1em;
			-webkit-transition: all 0.3s linear;
		}
 
		ul#nav li:hover a {
			color:			#26697f;
		}
 
		ul#nav li a h4 {
			margin:		0;
			padding:	0;
			font-size:	3em;
			display:	block;
			text-transform:capitalize;
			font-weight:normal;
		}
 
		ul#nav li:hover a h4 {
			-webkit-animation: slideFromTop 300ms ease-in-out;
			-moz-animation: slideFromTop 300ms ease-in-out;
			-ms-animation: slideFromTop 300ms ease-in-out;
		}
 
		ul#nav li a span {
			display:	block;
		}
 
		ul#nav li:hover a span {
			-webkit-animation: slideFromRight 300ms ease-in-out;
			-moz-animation: slideFromRight 300ms ease-in-out;
			-ms-animation: slideFromRight 300ms ease-in-out;
		}
 
		@-webkit-keyframes slideFromTop {
			from {
				opacity: 0;
				-webkit-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-webkit-transform: translateY(0%);
			}
		}
		@-moz-keyframes slideFromTop {
			from {
				opacity: 0;
				-moz-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-moz-transform: translateY(0%);
			}
		}
		@-ms-keyframes slideFromTop {
			from {
				opacity: 0;
				-ms-transform: translateY(-200%);
			}
			to {
				opacity: 1;
				-ms-transform: translateY(0%);
			}
		}
 
		@-webkit-keyframes slideFromRight {
			from {
				opacity: 0;
				-webkit-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-webkit-transform: translateX(0%);
			}
		}
		@-moz-keyframes slideFromRight {
			from {
				opacity: 0;
				-moz-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-moz-transform: translateX(0%);
			}
		}
		@-ms-keyframes slideFromRight {
			from {
				opacity: 0;
				-ms-transform: translateX(200%);
			}
			to {
				opacity: 1;
				-ms-transform: translateX(0%);
			}
		}		
 
		div#panel {
			margin: 	0 1px;
			width:		560px;
			height:		477px;
			float:		left;
			border:		2px solid #cfcfcf;
			background: #fefefe;
			-webkit-box-shadow: 0px 0px 4px #ccc;
			box-shadow: 0px 0px 4px #ccc;
		}
 
		div#smallpanel {
			margin: 	0 1px;
			width:		60px;
			height:		477px;
			float:		left;
			border:		2px solid #cfcfcf;
			background: #efefef url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczRUIxM0NDMzQ0NTExRTE4MEQ5QzlDQ0Q3MjlGM0REIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczRUIxM0NEMzQ0NTExRTE4MEQ5QzlDQ0Q3MjlGM0REIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNUUzRjUzNDJEMTFFMTgwRDlDOUNDRDcyOUYzREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNUUzRjYzNDJEMTFFMTgwRDlDOUNDRDcyOUYzREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAUQABAQAAAAAAAAAAAAAAAAAAAAgBAQEAAAAAAAAAAAAAAAAAAAACEAACAwEAAAAAAAAAAAAAAAAAoRJi4pMRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKRjVYCSNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAEarACNVgBGqwAjVYARqsAI1WAHIByAcgHIByAcgHID/2Q==) repeat top left;
			-webkit-box-shadow: 0px 0px 4px #ccc;
			box-shadow: 0px 0px 4px #ccc;
		}
 
		#smallpanel h3 {
			width:		477px;
			margin:		0;
			padding:	0;
			font-size:	5em;
			display:	block;
			text-transform:capitalize;
			color:		#8faabd;
			color:		rgba(255,255,255,0.5);
			font-weight:normal;
			-webkit-transform-origin: 0 0;
			-webkit-transform: rotate(90deg) translateY(-60px) translateX(20px);
			-webkit-transition: all 0.3s linear;
			cursor:		pointer;
		}
 
		#smallpanel h3:hover {
			color:		rgba(255,255,255,1);
			text-shadow: 0px 2px 1px #ccc;
		}
 
		#smallpanel h3 span.icon {
			font-family: 'WebSymbolsRegular',cursive;
			font-size:		0.7em;
			line-height:	1.9em;
			display:		block;
			float:			left;
			margin-right:	10px;
		}

**rodolphebrd** · 09/05/2013, 09h35

Bonjour,
je ne vois pas de problème au flottement et j'ai testé sur Firefox et Safari.

Voici aussi un moyen de remettre votre container dans le flux, ainsi qu'une largeur adéquate.

Code css :

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

1
2
3
4
5
6
7
8
9
10
#container {
	width:1030px;
	position:relative;
	margin:auto;
}
#container:after {
	content:"";
	display:block;
	clear:both;
}

**hugodu28** · 09/05/2013, 15h37

dans firefox j'ai l'image suivante:
Nom : image1.jpg
Affichages : 87
Taille : 112,3 Ko

Je ne comprends pas pourquoi le menu passe devant la partie formulaire.

Pour internet explorer peut-être qu'il y a une case à cocher dans la configuration qui ne l'est pas mais laquelle?

Merci quand même pour le coup de main

**rodolphebrd** · 09/05/2013, 17h19

Je n'ai pas ce rendu, j'ai un comportement normal...
Testé sur Firefox, Chrome et Safari.

Le problème semble venir d'ailleurs.
La position relative du container ne sert à rien.

Avez-vous un lien vers votre page.

**hugodu28** · 09/05/2013, 17h48

heu comment dire....
je crois bien que j'ai plusieurs pages php et j'ai ouvert la mauvaise.
Après ouverture de la bonne page , le rendu est normal.
Toutefois, avec google chrome et mozilla, j'ai bien l'animation du texte qd je passe sur le "bouton", en revanche avec IE, j'ai seulement le changement de couleur du "bouton" mais pas l'animation texte. C'est domage mais pas essentiel.
Si vous avez une idée.
Merci et désolé de vous avoir fait perdre du temps...

**rodolphebrd** · 09/05/2013, 18h06

Pas de problème ça arrive...

css qui ne fonctionne pas

CSS

Discussions similaires

Partager

Partager