18073 sujets

Questions générales et questions de débutants

Problème d'affichage selon navigateurs

Bonjour,

Je viens d'essayer ce tuto : "Inclure un fichier dans un autre, grâce à CSS et PHP"

c'est génial, mais j'ai un problème la balise div pour le menu ne se trouve pas à la même place selon le navigateur, IE c'est ok, FireFox c'est décalé !?!

Pouvez-vous me dire ce qui ne va pas dans mes fichiers ?

index.html

<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="haut">mon site .com</div>
<div class="frame"> 
  <?php
if (!isset($_GET['page'])) $page= 'accueil';
else $page= $_GET['page'];
switch($page) {
case 'accueil': include ('accueil.txt');
break;
case 'presentation': include ('presentation.txt');
break;
case 'suite':include ('suite.txt');
break;
case 'fin':include ('fin.txt');
break;
}
?>
</div>
<div class="bas">Cette partie basse reste fixe</div>
<div class="gauche"> 
  <a href="index.php?page=accueil">Accueil du site</a><br>
  <a href="index.php?page=presentation">Présentation</a><br>
  <a href="index.php?page=suite">Suite</a><br>
  <a href="index.php?page=fin">Dernière page</a><br>
</div>
</body>
</html>


style.css


/* CSS Document */
<style type="text/css">

a:link {
	color: #0066CC;
}
a:hover {
	color: #009933;
	/*text-decoration: underline overline;*/
}
a:visited {
	color: #0066CC;
}
a:active {
	color: #990000;
}
.haut {
width: 700px;
height: 100px;
background-color: #06C;
color: #fff;
font-size: 30px;
padding: 10px;
}
.frame {
	margin-left: 200px;
	width: 500px;
	height: 350px;
	overflow: auto;
	font-size: 14px;
	border: thin solid #0066CC;
	padding: 10px;
}
.bas {
width: 700px; /* avant : auto */
height: 50px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}
.gauche {
	position: absolute;
	width: 200px;
	height: 350px;
	left: 0px;
	top: 100px;
	padding: 10px;
	border: thin solid #0066CC;
}
body {
margin: 0;
padding: 0;
leftmargin: 0;
topmargin: 0;
marginwidth: 0;
marginheight: 0;
font-family: verdana, arial, sans-serif;
}
</style>

Modifié par centaure (16 Mar 2006 - 17:26)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

upload/1-code.gif

Au sujet de ton problème, as-tu pris la peine de tester nos ressources, notamment la FAQ ?

La Méthodologie que tu y trouveras fait généralement des miracles Smiley cligne

Bonne continuation Smiley smile
rien à voir avec ton probleme mais petite remarque sur le php.
remplace : 

<?php
if (!isset($_GET['page'])) $page= 'accueil';
else $page= $_GET['page'];
switch($page) {
    case 'accueil': include ('accueil.txt');
    break;
    case 'presentation': include ('presentation.txt');
    break;
    case 'suite':include ('suite.txt');
    break;
    case 'fin':include ('fin.txt');
    break;
}
?>

par : 

<?php
$page="accueil"; // valeur par défaut
if (isset($_GET['page'])) $page= $_GET['page']; // on remplace en cas d'existence
include($page."txt");
?>

Plus lisible, plus court. Smiley cligne
Zeke a écrit :
rien à voir avec ton probleme mais petite remarque sur le php.
remplace : 

<?php
if (!isset($_GET['page'])) $page= 'accueil';
else $page= $_GET['page'];
switch($page) {
    case 'accueil': include ('accueil.txt');
    break;
    case 'presentation': include ('presentation.txt');
    break;
    case 'suite':include ('suite.txt');
    break;
    case 'fin':include ('fin.txt');
    break;
}
?>

par : 

<?php
$page="accueil"; // valeur par défaut
if (isset($_GET['page'])) $page= $_GET['page']; // on remplace en cas d'existence
include($page."txt");
?>

Plus lisible, plus court. Smiley cligne


Non non ! sa solution est peut être plus longue mais beaucoup plus sûre... on ne veut pas laisser à l'utilisateur la possibilité d'inclure n'importe quel fichier en bidouillant les paramètres de la barre d'adresse.

Il faut mieux faire comme il l'a fait et pour compléter, définir un cas default au cas où l'attribut "page" ne correspond à aucune des pages.

Sinon, dans le cas de la vérification de la présence d'une variable GET ou POST, il ne faut pas seulement tester sa présence, mais aussi sa non-nulité:


<?php

if (isset($_GET['page']) && $_GET['page'] != "") 

?>

Modifié par SuD (16 Mar 2006 - 17:38)
j'ai oublié la vérification du fichier.... Smiley sweatdrop
mais c'est vrai que j'ai réfléchi trop vite là... Smiley rolleyes

je vais me coucher....
Modifié par Zeke (16 Mar 2006 - 19:51)
Si tu retires

top: 100px;

de ta div .gauche dans le css

et que tu places ta div .gauche après ta div .haut dans le html

c'est mieux Smiley smile
merci, mais j'ai toujours un soucis en tre les deux navigateurs, ils ne m'affichent pas la même chose :

Internet Explorer

upload/5627-ecran-IE.JPG

FireFox

upload/5627-ecran-FF.JPG

merci beaucoup par avance pour vos futurs solutions !
Sujet clos
Aller à