Bug Internet explorer menu et div

**cuisto44000** · 19/06/2008, 12h22

bonjour à tous, comme vous pourrez le voir sur le lien suivant :http://publicannonces.com/navettesdi....com/index.php

L'affichage est tres bien sous Firefox, mais sous explorer, attention les dégats, pourriez vous m'aider svp?
Merci par avance !

html : index.php

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<META NAME="Author" LANG="fr" CONTENT="Jonathan FORTUNE" /> 
<META NAME="Publisher" LANG="fr" CONTENT="Jonathan FORTUNE" /> 
<META NAME="Reply-to" CONTENT="jonathan.fortune@hotmail.fr (Jonathan FORTUNE)" />
<META NAME="Description" CONTENT="Louer un bus pour sortir en sécurité dans le 44 loire atlantique ." />
<META NAME="Keywords" CONTENT="bus 44, car 44, car loire atlantique, bus loire atlantique, sortir en sécurité, bus pous boite 44 loire atlantique, loire atlantique, 44, nantes, bus nantes, car nantes, boite de nuit nantes, discothèque nantes" /> 
<META NAME="Indentifier-URL" CONTENT="http://publicannonces.com/navettesdiscotheques44.com/" /> 
<META NAME="Copyright" CONTENT="navettesdiscotheques44.com et Jonathan FORTUNE" />
<META NAME="Robots" CONTENT="All" />
<META NAME="Revisit-after" CONTENT="1" /> 
 
<link href= "style.css" rel="stylesheet" type="text/css" />
<title>Navettesdiscothèques44 - Accueil</title>
</head>
<body>
 
<div class="header">
 
<h1>Navettes Discothèques 44</h1>
<p>Par ce que faire la fête rîme avec sécurité ... ...</p>
</div>
 
<div class="menu">
	<ul id="menu">
 
    <li><a href="index.php" class="on">Accueil</a></li>
    <li><a href="reservation.php">Réservation</a></li>
    <li><a href="#">Nous contacter</a></li>
	<li><a href="#">Partenaires</a></li>
	<li><a href="#">Association</a></li>
  </ul>
</div>
<div class="corps">
 
<div id="article" class="one">
<h3>La vie sexuelle des insectes ...</h3>
<p>&nbsp;&nbsp;La vie sexuelle des mouches en afghanistan est une préoccupation majeure en antarctique .<br />
&nbsp;&nbsp;Tous les chercheurs ont constaté que les moucherons réagissaient bizarrement très mal aux insecticides, les chercheurs du boost de nantes se penchent en ce moment sur le sujet ...<br />
&nbsp;&nbsp;</p>
</div>
 
<div id="article" class="two">
<h3>La vie sexuelle des insectes ...</h3>
<p>&nbsp;&nbsp;La vie sexuelle des mouches en afghanistan est une préoccupation majeure en antarctique .<br />
&nbsp;&nbsp;Tous les chercheurs ont constaté que les moucherons réagissaient bizarrement très mal aux insecticides, les chercheurs du boost de nantes se penchent en ce moment sur le sujet ...<br />
&nbsp;&nbsp;</p>
</div>
 
<div id="livre">
<?php
if (isset($_POST['enreg']))
	{
	$pre=$_POST['prenom'];
	$titre=$_POST['titre'];
	$message=$_POST['message'];
	if ($pre!="" && $titre!="" && $message!="")
	{
	mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
 
	mysql_query("INSERT INTO nav_livre VALUES('','$pre','$titre','$message')");
	echo '<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://publicannonces.com/navettesdiscotheques44.com">';
	}
	else
	{
	echo '<b style="color:#FF0000;"><u>Tous les champs doivent être remplis, merci !</u></b>';
	}
	}
?>
<h3>Livre d' or</h3>
<form method="post" action="">
<p><b>Votre prénom</b><br /><input type="text" name="prenom" /></p>
<p><b>Titre</b><br /><input type="text" name="titre" /></p>
<p><b>Message</b><br /><textarea name="message" cols="30" rows="6"></textarea></p>
<p><input type="submit" name="enreg" value="envoyer" /></p>
</form>
<div class="affiche_livre">
<h4>Vos messages</h4>
<div class="overflow">
<?php
mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
	$req=mysql_query("SELECT * FROM nav_livre ORDER BY id");
while ($l=mysql_fetch_array($req))
	{
	?>
	<p><b><?php echo $l['titre']; ?></b> par <?php echo $l['prenom']; ?> :<br />
	<?php echo $l['message']; ?></p>
	<?php
	}
 
?>
</div>
</div>
</div>
 
</div>
<div id="footer">
&copy; copyright 2008 - <a href="http://navettesdiscotheques44.com" title="Site de Navettes Discothèques 44">Navettes Discothèques 44</a><br />
Design et création par : Fortuné Jonathan - <a href="http://publicannonces.com" title="donner, échanger, reprendre gratuitement les objets dont vous ne vous servez plus ...">Publicannonces.com</a> - <a href="http://boost-cholet.com" title="Le bOOst de chOlet">Le bOOst de cholet</a>
</div>
</body>
</html>

html : reservation.php

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<META NAME="Author" LANG="fr" CONTENT="Jonathan FORTUNE"> 
<META NAME="Publisher" LANG="fr" CONTENT="Jonathan FORTUNE"> 
<META NAME="Reply-to" CONTENT="jonathan.fortune@hotmail.fr (Jonathan FORTUNE)">
<META NAME="Description" CONTENT="Louer un bus pour sortir en sécurité dans le 44 loire atlantique .">
<META NAME="Keywords" CONTENT="bus 44, car 44, car loire atlantique, bus loire atlantique, sortir en sécurité, bus pous boite 44 loire atlantique, loire atlantique, 44, nantes, bus nantes, car nantes, boite de nuit nantes, discothèque nantes"> 
<META NAME="Indentifier-URL" CONTENT="http://publicannonces.com/navettesdiscotheques44.com/reservation.php"> 
<META NAME="Copyright" CONTENT="navettesdiscotheques44.com et Jonathan FORTUNE">
<META NAME="Robots" CONTENT="All">
<META NAME="Revisit-after" CONTENT="1"> 
 
<link href= "style.css" rel="stylesheet" type="text/css" />
<title>Navettesdiscothèques44 - Accueil</title>
</head>
<body>
 
<div class="header">
 
<h1>Navettes Discothèques 44</h1>
<p>Par ce que faire la fête rîme avec sécurité ... ...</p>
</div>
 
<div class="menu">
	<ul id="menu">
 
    <li><a href="index.php">Accueil</a></li>
    <li><a href="reservation.php" class="on">Réservation</a></li>
    <li><a href="#">Nous contacter</a></li>
	<li><a href="#">Partenaires</a></li>
	<li><a href="#">Association</a></li>
  </ul>
</div>
<div class="corps">
 
<div id="resa" align="center">
<?php
if (isset($_POST['enreg']))
	{
	$pre=$_POST['prenom'];
	$titre=$_POST['titre'];
	$message=$_POST['message'];
	if ($pre!="" && $titre!="" && $message!="")
	{
	mysql_connect('mysql5-6','jojo','jojo');
	mysql_select_db('jojo');
 
	mysql_query("INSERT INTO nav_livre VALUES('','$pre','$titre','$message')");
	echo '<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://publicannonces.com/navettesdiscotheques44.com">';
	}
	else
	{
	echo '<b style="color:#FF0000;"><u>Tous les champs doivent être remplis, merci !</u></b>';
	}
	}
?>
<h3>Réserver un bus ...</h3>
<form method="post" action="">
<table>
	<tr><th>Nom *</th><td><input type="text" name="nom" /> *</td>
<tr><th>Prénom *</th><td><input type="text" name="prenom" /> *</td>
<tr><th>Teléphone fixe</th><td><input type="text" name="fixe" /></td>
<tr><th>Teléphone portable</th><td><input type="text" name="port" /></td>
<tr><th>Adresse mail</th><td><input type="text" name="mail" /> *</td>
<tr><th>Adresse *</th><td><input type="text" name="adr" /> *</td>
<tr><th>Ville *</th><td><input type="text" name="ville" /> *</td>
<tr><th>Code postal *</th><td><input type="text" name="cp" /> *</td>
<tr><th>Déstination *</th><td><input type="text" name="desti" /> *</td>
<tr><th>Nombre de passagers *</th><td><select name="nbr"><?php for ($i=1;$i<61;$i++){ echo '<option value="'.$i.'">'.$i.'</option>'; } ?></select> *</td>
<tr><th>Date de la reservation</th><td><input type="text" name="date_demande" value="<?php echo date("d/m/Y"); ?>" readonly /> non modifiable .</td>
<tr><th>Date de votre soirée *</th><td><input type="text" name="date_soiree" value="Jour/Mois/2008"/> modifiable .</td>
<tr><th>Infos complémantaires </th><td><textarea name="compl" cols="15" rows="6"></textarea></td>
<tr><th><u>* :</u></th><td><u>Champs obligatoires !</u></td>
<tr><th></th><td><input type="reset" value="remettre à zéro" /> | <input type="submit" name="enreg" value="envoyer" /><td></tr>
</table>
</form>
 
</div>
</div>
 
</div>
<div id="footer">
&copy; copyright 2008 - <a href="http://navettesdiscotheques44.com" title="Site de Navettes Discothèques 44">Navettes Discothèques 44</a><br />
Design et création par : Fortuné Jonathan - <a href="http://publicannonces.com" title="donner, échanger, reprendre gratuitement les objets dont vous ne vous servez plus ...">Publicannonces.com</a> - <a href="http://boost-cholet.com" title="Le bOOst de chOlet">Le bOOst de cholet</a>
</div>
</body>
</html>

et 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
 
 
body
{background-color:#333333;}
 
.header
{width:900px;height:200px; position:absolute; left:200px; top:10px;background-image:url("images/header.png");z-index:20;}
 
.header h1
{color:#FFFF33;text-align:center;margin-top:80px;font-family:verdana;}
 
.header p
{color:#fff;text-align:center;font-size:20px;font-weight:bold;}
 
ul#menu {
list-style-type: none;
width: 100%; /* précision pour Opera */
}
.menu
{position:absolute;left:210px;top:190px;z-index:10;background-image:url("images/menu.png");width:880px;height:100px;background-repeat:no-repeat;}
 
ul#menu li {
float: left;
 
}
ul#menu a {
float: left;
margin-right:2px;
padding-top:5px;;
text-align: center;
border:0;
text-decoration: none;
width:120px;
height:25px;
color:#0033FF;
font-weight:bold;
background: #fff;
background-image:url("images/off.png");
}
ul#menu a.on
{background-image:url("images/on.png");color:#FFFF00;}
 
ul#menu a:hover
{background-image:url("images/hover.png");color:#fff;}
 
ul#menu a.on:hover
{background-image:url("images/on.png");color:#FFFF00;}
 
.corps
{width:900px;height:700px;background-image:url("images/corps.png");position:absolute;left:200px;top:180px;}
 
#article
{width:380px;}
 
#article.one
{position:relative;top:100px;left:20px;}
 
#article.two
{position:absolute;top:100px;left:440px;}
 
#article h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
#article p
{font-size:16px;color:#255087;font-weight:bold;}
 
#livre
{width:800px;position:relative;top:100px;left:20px;}
 
#livre b
{font-size:16px;color:#255087;font-weight:bold;}
 
#livre h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
.affiche_livre
{position:absolute;top:30px;left:440px;}
 
.overflow
{overflow:auto;width:350px;height:200px;border:4px dotted #000;color:#000;}
 
#resa
{position:relative;top:100px;left:20px;width:800px;}
 
#resa h3
{border-bottom:3px dotted #07f308;color:#07f308;}
 
th
{padding-bottom:5px;text-align:right;}
 
#footer
{background-image:url("images/footer.png");position:absolute;left:200px;top:880px;width:900px;height:50px;z-index:30;text-align:center;font-weight:bold;}

C'est un peu lourd certes, mais je n'ai jamais travaillé sur les bug entre ff et ie, donc merci de votre aide milles fois par avance

je vais me renseigner avec mon amis google de mon coté pendant ce temps la avant que vous ne me le suggeriez

**romain_ci** · 19/06/2008, 12h29

dans le css du ul
rajoute

Code :

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

 margin-top:20px;

**cuisto44000** · 19/06/2008, 12h57

effectivement, sa résoud le problème du menu

merci, déja un point de rêglé, merci beaucoup

Maintenants, reste le problème des encadrés blazncs autour de mes images du header

et du div #article.two

**cuisto44000** · 19/06/2008, 13h04

ps, je viens d'essayer de modifier les proprietes suivantes :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
#article.two
{position:relative;top:-103px;right:-450px;}
 
et
 
#livre
{width:800px;position:relative;top:-100px;left:20px;}

Sur FF sa donne le même résultat qu'avant, mais sous IE c'est encore plus le bordel

**romain_ci** · 19/06/2008, 14h07

Envoyé par cuisto44000

effectivement, sa résoud le problème du menu

merci, déja un point de rêglé, merci beaucoup

Maintenants, reste le problème des encadrés blazncs autour de mes images du header

et du div #article.two

je ne voi rien de tel !!

Soit peut etre plus précis

**cuisto44000** · 19/06/2008, 14h13

je parles sous ie, les images du header sont encadrés de blanc, et les div se superposent, mais sous FF, tout est très bien disposé . désolé pour mon manque de précision .

**tzilliox** · 19/06/2008, 14h21

Bonjour cuisto 44000,

Tu peux nous préciser ta version internet Explorer ?
Si tu as encore la version 6.0, elle a du mal à afficher la transparence des PNG.

Bonne chance,
Thoams ;-)

**Candygirl** · 19/06/2008, 14h34

Bonjour,

tu devrais éviter d'utiliser le positionnement absolu lorsqu'il n'est pas nécessaire. D'ailleurs, avec ton montage, ton site voit déjà appraître la scrollbarre en 1024x768; pas très judicieux.

Tu devrait ajouter un div qui englobe tout le site et qui s'occupe du centrage:

Code html :

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

1
2
3
4
5
<body>
  <div id="page">
    [...]
  </div>
</body>

Code :

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

1
2
3
4
#page {
  width:900px;
  margin:0 auto;
}

Ensuite tu vires tes positionnments absolus, tes déclarations de width inutiles:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header {
  height:200px; 
  background-image:url("images/header.png");
}
 
.menu {
  background-image:url("images/menu.png");
  background-repeat:no-repeat;
  margin:0 10px;
  height:100px;
}
 
.corps {
background-image:url("images/corps.png");
}

etc...

Pour tes "encadrements blancs", je suppose que tu regardes sur IE6 ? Tes images font appel à la transparence progressive non gérée nativement sur IE6. En as-tu vraiment besoin? Si non, tu peux réexporter tes images avec de la transparence simple ou alors les garder ainsi et appliquer un correctif à l'aide du filtre approprié (soit manuellement soit par un script de correctif).

Bug Internet explorer menu et div

CSS

Vue hybride

Discussions similaires

Partager

Partager