Sujet Précédent Sujet Suivant

Problème d'affichage sous Firefox 2

Fermé
Raymond08x - 8 avril 2008 à 20:14
 lordkoOol - 30 juil. 2008 à 10:18
Bonjour,
Je suis en train de créer un site pour mon association de jeux en réseaux. Cependant je rencontre une difficulté d'affichage sous Firefox2. Je m'explique, lorsque je charge l'index du site dans mon navigateur ( par l'intermédiaire d'EasyPHP ) ma bannière s'affiche normalement, par contre le titre du premier article (qui est un jpeg) ne s'affiche pas. Si j'actualise ma page alors mon titre apparait mais ce coup-ci c'est ma bannière qui disparait alors que sous I.E7 je ne rencontre aucun problème, tous passe correctement.

//Voici le code index.php //

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Aiglemont Lan Party</title>
</head>
<style type="text/css">
#cadre {
padding: 10px;
min-height: auto;
width: 800px;
margin: auto;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#banniere {
width: 800px;
height: 224px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#menu {
width: 800px;
height: 20px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#conteneur {
width: 650px;
min-height: auto;
margin-top: 25px;
margin: 10px;
background-color: #ffffff;
font-family: Times New Roman,serif;
line-height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
-moz-border-radius: 25px 25px 25px 25px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
.pub {
float: right;
width: 100px;
min-height: auto;
margin-top: 25px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
</style>
</head>
<body bgcolor="#999999">
<div id="cadre">
<div id="banniere">
<img src="banniere_alp02.jpg" height=224px width=800px border=0>
</div>
<div id="menu">
<a href="index.php?page=accueil"><img src="bouton_accueil.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=lan"><img src="bouton_lan.jpg" height=20px width=70px border=0></a>
<a href="index.php?page=games"><img src="bouton_games.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=organisation"><img src="bouton_organisation.jpg" height=20px width=196px border=0></a>
<a href="index.php?page=contact"><img src="bouton_contact.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=sponsors"><img src="bouton_sponsors.jpg" height=20px width=115px border=0></a>
</div>
<div class="pub">
<p><center><img src="logo_aiglemont.jpg"><p>
<img src="logo_scoregame.gif"><p>
<img src="logo_orange.jpg"></center>
</div>
<div id="conteneur">
<?php
$pages=array(
'accueil'=>'accueil',
'contact'=>'contact',
'games'=>'games',
'organisation'=>'organisation',
'lan'=>'lan',
'sponsors'=>'sponsors',
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']].'.txt';
else
include 'accueil.txt';
?>
</div>
</html>


// et voici la page accueil.txt //

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">

table{
border-collapse: collapse;
}

td{
text-align: justify;
width: 50%;
padding: 10px;
}

</style>
</head>
<body>

<table width="100%">
<tr>
<td>
<img src="titre1.jpg"><br>
Après 3 ans d'absence, Aiglemont Lan Party revient avec un nouveau site informatif.<br>
N'hésitez pas à nous faire vos remarques quelques elles soient (bugs, clarté, design) afin de nous permettre d'améliorer ce site.<br>
Pour toutes vos suggestions allez dans la rubrique contact.
</td>

<td>
<img src="titre2.jpg"><br>
Aiglemont Lan Party recherche sans cesse de nouveaux sponsors afin de nous aider à nous procurer des lots pour les vainqueurs de tournois.
Si vous êtes interressé, rendez-vous rubrique contact afin de nous faire une proposition de partenariat.
</td>
</tr>


</table>

</body>

</html>


---------------------------------------------------------------------------------------------------------------------------------------------------------

Si vous avez une petite idée n'hésitez pas.

Merci d'avance.
A voir également:

9 réponses

Réponse 1 / 9
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
8 avril 2008 à 20:28
salut,

si j'ai bien suivi tu inclues une page HTML dans une autre page HTML, ça ne va pas.

montre nous plutôt le code servi à ton navigateur ou alors beaucoup mieux une version en ligne.

et stp, mets le code en forme avec ce bouton, merci !
0
Réponse 2 / 9
Raymond08x
9 avril 2008 à 11:58
salut et merci de t'intéresser à mon problème,

désolé je n'ai pas encore mis ce site en ligne puisqu'il n'est pas tout a fait fini. Quand au code servi à mon navigateur je ne vois pas trop de quoi il s'agit, si c'est la page chargée au démarrage du site c'est bien l'index que je t'ai présenté.
étant nouveau sur le site je ne connaissais pas le bouton que tu m'as indiquer, merci pour l'astuce.
du coup je remontre le code.

//code source de la page index.php// 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Aiglemont Lan Party</title>
</head>
<style type="text/css">
#cadre {
padding: 10px;
min-height: auto;
width: 800px;
margin: auto;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#banniere {
width: 800px;
height: 224px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#menu {
width: 800px;
height: 20px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#conteneur {
width: 650px;
min-height: auto;
margin-top: 25px;
margin: 10px;
background-color: #ffffff;
font-family: Times New Roman,serif;
line-height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
-moz-border-radius: 25px 25px 25px 25px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
.pub {
float: right;
width: 100px;
min-height: auto;
margin-top: 25px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
</style>
</head>
<body bgcolor="#999999">
<div id="cadre">
<div id="banniere">
<img src="banniere_alp02.jpg" height=224px width=800px border=0>  // fameuse bannière qui disparaît quand j'actualise//
</div>
<div id="menu">
<a href="index.php?page=accueil"><img src="bouton_accueil.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=lan"><img src="bouton_lan.jpg" height=20px width=70px border=0></a>
<a href="index.php?page=games"><img src="bouton_games.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=organisation"><img src="bouton_organisation.jpg" height=20px width=196px border=0></a>
<a href="index.php?page=contact"><img src="bouton_contact.jpg" height=20px width=133px border=0></a>
<a href="index.php?page=sponsors"><img src="bouton_sponsors.jpg" height=20px width=115px border=0></a>
</div>
<div class="pub">
<p><center><img src="logo_aiglemont.jpg"><p>
<img src="logo_scoregame.gif"><p>
<img src="logo_orange.jpg"></center>
</div>
<div id="conteneur">
<?php
$pages=array(
'accueil'=>'accueil',
'contact'=>'contact',
'games'=>'games',
'organisation'=>'organisation',
'lan'=>'lan',
'sponsors'=>'sponsors',
);
if(isset($_GET['page']) && array_key_exists($_GET['page'],$pages))
include $pages[$_GET['page']].'.txt';
else
include 'accueil.txt';
?>
</div>
</html>



//code source de la page accueil.txt// 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">

table{
border-collapse: collapse;
}

td{
text-align: justify;
width: 50%;
padding: 10px;
}

</style>
</head>
<body>

	<table width="100%">
		<tr>
			<td>
			<img src="titre1.jpg"><br>  //Fameux titre qui n'apparaît que quand on actualise mais pas au chargement initial de la page//
Après 3 ans d'absence, Aiglemont Lan Party revient avec un nouveau site informatif.<br>
N'hésitez pas à nous faire vos remarques quelques elles soient (bugs, clarté, design) afin de nous permettre d'améliorer ce site.<br>
Pour toutes vos suggestions allez dans la rubrique contact.
			</td>
			
			<td>
			<img src="titre2.jpg"><br>
Aiglemont Lan Party recherche sans cesse de nouveaux sponsors afin de nous aider à nous procurer des lots pour les vainqueurs de tournois.
Si vous êtes interressé, rendez-vous rubrique contact afin de nous faire une proposition de partenariat.
			</td>
			</tr>


	</table>

</body>

</html>


Voila n'hésite pas à me redemander des infos si j'en ai oublié.

Merci.
0
Réponse 3 / 9
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
9 avril 2008 à 13:10
salut,

dans ton navigateur, fais Affichage/Code source et regarde ce que ça donne (c'est le code que j'ai qualifié de "servi").

tu dois avoir 
<html>
<head>
</head>
<body>
</body>
</html>

inséré dans le <body> du document principal, c'est ce qui doit causer problème.
dans ton fichier 'accueil.txt' tu ne dois garder que : 
	<table width="100%">
		<tr>
			<td>
			<img src="titre1.jpg"><br>  //Fameux titre qui n'apparaît que quand on actualise mais pas au chargement initial de la page//
Après 3 ans d'absence, Aiglemont Lan Party revient avec un nouveau site informatif.<br>
N'hésitez pas à nous faire vos remarques quelques elles soient (bugs, clarté, design) afin de nous permettre d'améliorer ce site.<br>
Pour toutes vos suggestions allez dans la rubrique contact.
			</td>
			
			<td>
			<img src="titre2.jpg"><br>
Aiglemont Lan Party recherche sans cesse de nouveaux sponsors afin de nous aider à nous procurer des lots pour les vainqueurs de tournois.
Si vous êtes interressé, rendez-vous rubrique contact afin de nous faire une proposition de partenariat.
			</td>
			</tr>
	</table>

et te débrouiller autrement pour le style (dans la feuille de style principale, ce serait le plus logique).
par ailleurs, le <body> de ton document principal n'est pas fermé.
0
Réponse 4 / 9
Raymond08x
9 avril 2008 à 17:38
salut,
après quelques essais j'ai l'impression que j'ai juste un problème d'affichage d'image en fait. Je m'explique, j'ai refais un petit code vite ce qui donne :

//code source index.php// 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
<html>
	<head>
	<title>Aiglemont Lan Party2</title>
	</head>
	
	<style type="text/css">
	
	#cadre {
	margin: auto;
	width: 800px;
	height: auto;
	padding: 10px;
	background-color: #000000;
	}
	
	#banniere {
	width: 800px;
	height: 224px;
	background-color: #ffffff;
	}
	
	#menu {
	margin-top: 10px;
	width: 800px;
	height: 20px;
	background-color: #000000;
	}
	
	#conteneur{
	margin-top: 5px;
	width: 690px;
	min-height: 500px;
	background-color: #ffffff;
	}
	
	.pub{
	margin-top: 5px;
	float: right;
	width: 100px;
	min-height: 500px;
	background-color: #000000;
	}
	
	.impub{
	padding-top: 5px;
	}
	
	</style>
	
	<body bgcolor="#ffffff">
	
	<div id="cadre">
	<div id="banniere">
	<img src="banniere_alp.jpg" border=0>  // toujours cette maudite bannière qui disparaît lorsqu'j'actualise la page//
	</div>
	<div id="menu">
	<img src="bouton_accueil.png" border=0>  // et le bouton accueil qui disparaît lui aussi //
	<img src="bouton_lan.png" border=0>
	<img src="bouton_games.png" border=0>
	<img src="bouton_organisation.png" border=0>
	<img src="bouton_contact.png" border=0>
	<img src="bouton_sponsor.png" border=0>
	</div>
	<div class="pub">
	<center>
	<img class="impub" src="logo_aiglemont.jpg" border=0><br>
	<img class="impub" src="logo_scoregame.gif" border=0><br>
	<img class="impub" src="logo_orange.jpg" border=0>
	</center>
	</div>
	<div id="conteneur">
	</div>
	<div style="clear:both;></div>
	
	</body>
	
</html>


Voili voilou donc avec l'extension .php certaines images disparaissent sous firefox, mais tous fonctionne correctement sous I.E7. Et si je change l'extension en .html je n'ai aucun soucis. bien évidemment je n'ai pas encore intégré le code php dans le conteneur pour que toutes mes pages s'affiche dedans. Ce qui me chagrine le plus c'est que j'ai souvent procédé comme çà et c'est la première fois que j'ai ce problème.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Raymond08x
9 avril 2008 à 17:42
oups désolé j'avais oublié de te donner le code servi par firefox

le voilà: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Aiglemont Lan Party</title>
</head>
<style type="text/css">
#cadre {
padding: 10px;
min-height: auto;
width: 800px;
margin: auto;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#banniere {
width: 800px;
height: 224px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#menu {
padding-top: 5px;
width: 800px;
height: 20px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
#conteneur {
width: 650px;
min-height: auto;
margin-top: 25px;
margin: 10px;
background-color: #ffffff;
font-family: Times New Roman,serif;
line-height: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
-moz-border-radius: 25px 25px 25px 25px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
.pub {
float: right;
width: 100px;
min-height: auto;
margin-top: 25px;
background-color: #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
}
</style>
</head>
<body bgcolor="#999999">
<div id="cadre">
<div id="banniere">
<img src="banniere_alp02.jpg" border=0>
</div>
<div id="menu">
<a href="index.php?page=accueil"><img src="bouton_accueil.png" height=20px width=133px border=0></a>
<a href="index.php?page=lan"><img src="bouton_lan.png" height=20px width=70px border=0></a>

<a href="index.php?page=games"><img src="bouton_games.png" height=20px width=133px border=0></a>
<a href="index.php?page=organisation"><img src="bouton_organisation.png" height=20px width=196px border=0></a>
<a href="index.php?page=contact"><img src="bouton_contact.png" height=20px width=133px border=0></a>
<a href="index.php?page=sponsors"><img src="bouton_sponsor.png" height=20px width=115px border=0></a>
</div>
<div class="pub">
<p><center><img src="logo_aiglemont.jpg"><p>
<img src="logo_scoregame.gif"><p>
<img src="logo_orange.jpg"></center>
</div>
<div id="conteneur">
	<table width="100%">
		<tr>
			<td>

			<img src="titre1.jpg"><br>
Après 3 ans d'absence, Aiglemont Lan Party revient avec un nouveau site informatif.<br>
N'hésitez pas à nous faire vos remarques quelques elles soient (bugs, clarté, design) afin de nous permettre d'améliorer ce site.<br>
Pour toutes vos suggestions allez dans la rubrique contact.
			</td>
			
			<td>
			<img src="titre2.jpg"><br>
Aiglemont Lan Party recherche sans cesse de nouveaux sponsors afin de nous aider à nous procurer des lots pour les vainqueurs de tournois.
Si vous êtes interressé, rendez-vous rubrique contact afin de nous faire une proposition de partenariat.
			</td>
			</tr>
			
			<tr>

			<td>
			<img src="titre3.jpg"><br>
Une Lan est en cours de préparation.<br>
2 tournois sont annoncés :<br>
Un par Team et un en Solo<br>
- Counter Strike Source<br>
- Warcraft III The Frozen Throne<br>
Toutes les informations sur la date, l'horaire ainsi que les lots a gagner seront bientôt disponible.
			</td>

			<td>
			</td>
			</tr>

	</table></div>
<div style="clear:both;"></div>
</body>
</html>
0
Réponse 6 / 9
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
9 avril 2008 à 18:07
commence par remplacer ta balise <html> par : 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

et ensuite passe ton document au validateur.
un validateur en français si tu préfères.
0
Réponse 7 / 9
Raymond08x
9 avril 2008 à 21:03
pour info j'ai testé mon code sur l'ordinateur d'un ami ayant la même version de firefox que moi mais pas le même os ( lui vista moi xp lsd 3.7 ) et la impeccable, aucun problème, tout passe bien. J'en déduit donc que le problème vient de mon navigateur.
Je ne connaissais pas le validateur, merci pour le lien, je vais quand même remplacer ma balise et faire le test.
0
Réponse 8 / 9
malokran
26 avril 2008 à 10:50
J'ai le même problème : dans un cas bien particulier (que je ne saurais décrire) IE affiche la première image mais pas FF. (Les images suivantes sont ok). Après diverses variations de présentation sans succés, je me suis résolu à afficher un pixel blanc en début de page, et ça marche.
0
Réponse 9 / 9
lordkoOol
30 juil. 2008 à 10:18
Bonjour,

en passant (je cherchais autre chose) le prob ce sont tes <style> css qui sont en dehors du <head>,
qui d'ailleurs se ferme 2 fois ( ! )

ci aprés structure à respecter >>>

<html>

<head>
<title>xxx</title>
<meta xxx />
<style> ... </style> ou <link rel="stylesheet" href="xxx/style.css" type="text/css" media="all" />
<script>si y'en a</script>
</head>

<body>
...
</body>

</html>
0

Discussions similaires

Great Teacher Onizuka SAISON 2
remi1912 -
Firaz -

34 réponses
A3 paysage en deux A4...est-ce possible?
nikoss -
Lilo -

10 réponses
Windows defender: avertissement de sécurité
surfinia -
Tchoumi -

20 réponses