Internet explorer: mon site est mal positioné
Forum Programmation : Internet explorer: mon site est mal positioné
Bonjour tous le monde, j' ai fait un site, avec firefox, tout s' affichent correctement. Ce matin, j' ai visité mon site avec internet explorer et là, mauvaise surprise ...
Regardez mon site avec firefox puis avec internet exlorer:
http://bpzoom62.free.fr/decoupe/index.php
Voici les images que j' ai découpé:
http://bpzoom62.free.fr/decoupe/images/
Voici la page index:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>BP Zoom</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center>
<div id="contenu">
<div id="header">
</div>
<div id="menu_gauche">
<a id="zone1" href="index.php" title="Accueil"></a>
<a id="zone2" href="index.php?page=legroupe" title="Le Groupe"></a>
<a id="zone3" href="index.php?page=concerts" title="Concerts"></a>
<a id="zone4" href="index.php?page=photos" title="Photos"></a>
</div>
<div id="texte_bg">
<?php
if (isset($_GET["page"])) $page = $_GET["page"];
else $page = 0;
switch ($page){
default : @include("news.php" );break;
case "news" : @include("news.php" );break;
case "legroupe" : @include("legroupe.php" );break;
case "contact" : @include("contact.php" );break;
case "concerts" : @include("concerts.php" );break;
case "photos" : @include("photos.php" );break;
case "telechargements" : @include("telechargements.php" );break;
case "zonefans" : @include("zonefans.php" );break;
}
?>
</div>
<div id="menu_droite">
<a id="zone5" href="index.php?page=telechargements" title="Téléchargements"></a>
<a id="zone6" href="#" title="Livre D'or"></a>
<a id="zone7" href="index.php?page=zonefans" title="Zone Fans"></a>
<a id="zone8" href="index.php?page=contact" title="Contact"></a>
</div>
<div id="footer">
Prochain Concert : Le 17 Juin à Hénin Baumont
</div>
</div>
</center>
</body>
</html>
Voici la page style.css:
body {
background-color:#cf1b20;
background-repeat:repeat;
font-family:Arial;
font-size:10px;
color:#e9eaea;
margin:0;
padding:0;
scrollbar-face-color:#7E7D7D; /* couleur du dessus des boutons et de la barre de défilement */
scrollbar-arrow-color:#000000; /* couleur des flèches */
scrollbar-track-color:#6E6D6D; /* couleur du fond de la barre */
scrollbar-highlight-color:#333333; /* couleur claire du relief des boutons */
scrollbar-shadow-color:#444444; /* couleur sombre du relief des boutons */
scrollbar-3dlight-color:#555555; /* couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés */
scrollbar-darkshadow-color:#666666; /* couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés */
}
div#contenu {
width:1024px;
height:auto;
}
div#header {
float:center;
background-image:url('./images/header.jpg');
width:801px;
height:122px;
}
div#menu_gauche {
background-image:url('./images/menu_gauche.jpg');
width:132px;
height:502;
float:left;
margin-left:111px !important;
}
#zone1 {
float: left;
width : 77px;
height: 40px;
margin-left: 40px;
margin-top: 60px;
}
#zone2 {
float: left;
width : 104px;
height: 36px;
margin-left: 13px;
margin-top: 50px;
}
#zone3 {
float: left;
width : 97px;
height: 36px;
margin-left: 20px;
margin-top: 54px;
}
#zone4 {
float: left;
width : 75px;
height: 36px;
margin-left: 42px;
margin-top: 64px;
}
div#menu_droite {
background-image:url('./images/menu_droite.jpg');
width:172px;
height:502px;
float:right;
margin-right:112px !important;
}
#zone5 {
float: right;
width : 150px;
height: 40px;
margin-right: 7px;
margin-top: 70px;
}
#zone6 {
float: right;
width : 110px;
height: 36px;
margin-right: 47px;
margin-top: 50px;
}
#zone7 {
float: right;
width : 107px;
height: 36px;
margin-right: 50px;
margin-top: 50px;
}
#zone8 {
float: right;
width : 87px;
height: 36px;
margin-right: 70px;
margin-top: 62px;
}
div#texte_bg {
background-image:url('./images/texte_bg.jpg');
width:497px;
height:502px;
float:left;
overflow:auto;
font-family:Arial;
font-size:10px;
margin-left:0px;
}
div#texte {
width:480px;
height:490px;
}
div#footer {
color:#000000;
background-image:url('./images/footer.jpg');
width:801px;
height:144px;
margin-top:502px;
}
img { display:inline; margin:0; padding:0; }
ul , li { margin:0; padding:0; list-style-type:none; }
a { color:#000000; text-decoration:none; font-weight:bold; }
a:hover { color:#3F3E3E; font-weight:bold; }
h1 { text-align:center; margin:0; }
p { margin:0; padding:0; text-indent:10px; padding-top:10px;}
div.clear { clear:both; }
Est-ce que quelqu' un pourrait me conseiller ?
Merci d' avance !
Salut,
J'ai regardé ton problème
Y'a un petit truc qui me chiffone, c'est le float right pour le menu de droite...
Essaie de mettre un float left et de supprimer la marge peut être :
Code :
|
Alors j'ai testé tout çà, et en fait, la solution que je te dit marche pour bien mettre le menu en place...
Par contre après ça déconne, la marge du menu gauche (ce qui fait le centrage de ta page par rapport au header) n'est pas representé pareil su IE et sur Firefox...
Mais j'ai réussi à faire ce que tu voulais, en ajoutant
directement la marge dans l'image....
Si tu veux jeter un oeil :
http://mileskabal.free.fr/bpzoom/
Ca marche sur les deux navigateurs...
Par contre maintenant les area shape pour l'image ne fonctionne plus, à toi de voir ça... ;-)
Je donne des nouvelles: j' ai changé la page style.css, j' ai mis celle-ci:
Citation : Page style.css
body {
background-color:#cf1b20;
background-repeat:repeat;
font-family:Arial;
font-size:10px;
color:#e9eaea;
margin:0;
padding:0;
scrollbar-face-color:#7E7D7D; /* couleur du dessus des boutons et de la barre de défilement */
scrollbar-arrow-color:#000000; /* couleur des flèches */
scrollbar-track-color:#6E6D6D; /* couleur du fond de la barre */
scrollbar-highlight-color:#333333; /* couleur claire du relief des boutons */
scrollbar-shadow-color:#444444; /* couleur sombre du relief des boutons */
scrollbar-3dlight-color:#555555; /* couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés */
scrollbar-darkshadow-color:#666666; /* couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés
*/
}
div#contenu {
width:801px;
height:auto;
}
div#header {
float:center;
background-image:url('./images/header.jpg');
width:801px;
height:122px;
}
div#menu_gauche {
background-image:url('./images/menu_gauche.jpg');
width:132px;
height:502;
float:left;
margin-left:0px;
}
#zone1 {
float: left;
width : 77px;
height: 40px;
margin-left: 40px;
margin-top: 60px;
}
#zone2 {
float: left;
width : 104px;
height: 36px;
margin-left: 13px;
margin-top: 50px;
}
#zone3 {
float: left;
width : 97px;
height: 36px;
margin-left: 20px;
margin-top: 54px;
}
#zone4 {
float: left;
width : 75px;
height: 36px;
margin-left: 42px;
margin-top: 64px;
}
div#menu_droite {
background-image:url('./images/menu_droite.jpg');
width:172px;
height:502px;
float:right;
}
#zone5 {
float: right;
width : 150px;
height: 40px;
margin-right: 7px;
margin-top: 70px;
}
#zone6 {
float: right;
width : 110px;
height: 36px;
margin-right: 47px;
margin-top: 50px;
}
#zone7 {
float: right;
width : 107px;
height: 36px;
margin-right: 50px;
margin-top: 50px;
}
#zone8 {
float: right;
width : 87px;
height: 36px;
margin-right: 70px;
margin-top: 62px;
}
div#texte_bg {
background-image:url('./images/texte_bg.jpg');
width:497px;
height:502px;
float:left;
overflow:auto;
font-family:Arial;
font-size:10px;
margin-left:0px;
}
div#texte {
width:480px;
height:490px;
}
div#footer {
color:#000000;
background-image:url('./images/footer.jpg');
width:801px;
height:144px;
clear:both;
}
img { display:inline; margin:0; padding:0; }
ul , li { margin:0; padding:0; list-style-type:none; }
a { color:#000000; text-decoration:none; font-weight:bold; }
a:hover { color:#3F3E3E; font-weight:bold; }
h1 { text-align:center; margin:0; }
p { margin:0; padding:0; text-indent:10px; padding-top:10px;}
div.clear { clear:both; }
Regardez maintenant le site avec firefox, c' est toujours nikel, regardez ensuite avec IE, c' est beaucoup mieu mais le cadre noir se répéte alors qu' il ne le devrait pas. Avez-vous une solution ?
T'as pas vu mon message....
Il y a 1081 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
