Se connecter / S'enregistrer
Votre question

Internet explorer: mon site est mal positioné

Tags :
  • Index
  • Programmation
Dernière réponse : dans Programmation
11 Juin 2006 11:06:41

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 !

Autres pages sur : internet explorer site mal positiona

11 Juin 2006 13:13:14

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 :
  1. div#menu_droite {
  2. background-image:url('./images/menu_droite.jpg');
  3. width:172px;
  4. height:502px;
  5. float:left;
  6. }
11 Juin 2006 13:32:04

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... ;-)
Contenus similaires
11 Juin 2006 18:31:20

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 ?
12 Juin 2006 02:03:58

T'as pas vu mon message....
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS