Aller au contenu

Affichage différent IE/FireFox (tableaux)

silver_stallion

Par silver_stallion
dans (X)HTML et CSS

 Partager

Sujets conseillés

silver_stallion

silver_stallion

Posté
Posté

Bonjour!

Je viens vous demander un peu d'aide, en espérant que vous saurez m'aider car jusqu'à présent, personne n'a su résoudre mon problème.

Alors j'ai fait un site et celui-ci est optimisé pour IE. L'adresse: http://www.etalondargent.com

Au début je ne me fais pas de soucis puis après avoir téléchargé firefox, je m'aperçois que l'affichage n'est pas le même. Regardez la différence en testant avec chacun des navigateurs. En fait, j'aimerai obtenir le même résultat sous les deux navigateurs, c'est à dire un cadre noir enveloppant correctement l'iframe du milieu et non pas cet espèce de truc bizarre à moitié transparant... J'ai beaucoup bidouillé et je suis arrivée à un résultat comme celui ci: http://www.etalondargent.com/indexsave.htm

Sous IE, il n'y a plus de cadre et sous FF, plus l'affreux truc mais un cadre à moitié noir. Bref, si quelqu'un sait comment résoudre ça, je lui en serai très reconnaissant!

Merci beaucoup!

Perrine

Perrine

Posté
Posté

Bonsoir :)

Nous n'avons pas accès au code source de ta page car tu utilises les frames. Donc, dur de t'aider. Peux-tu nous donner un extrait du code html et css ?

Au passage, si tu lis quelques interventions ci et là, tu verras que les frames sont souvent déconseillées. Voici un lien pour t'expliquer pourquoi : En finir avec les cadres

J'aime bien ton site, les couleurs. Il manque des photos pour la description des robes ! :P

D'ailleurs, dans la page des robes, sur FF, la barre de défilement verticale n'apparait pas. Autrement dit, les utilisateurs avec souris sans molette ne peuvent pas faire défiler la page.

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Bonjour! Le problème vient de la page principale et pas de l'iframe en elle-même (je crois). Voici le code de l'index (dans le 1er cas):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>L'étalon d'argent</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1458" name=GENERATOR>
</HEAD>
<BODY scroll="no"> 
<TABLE width=852 height=87 border=1 align=center cellpadding="0" cellspacing="10" bordercolor="#FFFFFF"> 
  <TBODY> 
    <TR> 
      <TD bordercolor="#253477"><IMG height=87 src="http://www.etalondargent.com/banniere2.jpg" 
      width=852></TD> 
    </TR> 
    <TR> 
      <TD bordercolor="#253477"><IFRAME name=ZONE1 src="http://www.etalondargent.com/iframe.htm" width=852 
height=451> Désolé mais votre navigateur ne supporte pas les cadres locaux. </IFRAME></TD> 
    </TR> 
  </TBODY> 
</TABLE> 
<BR> 
 </BODY>
</HTML>

Voici le code maintenant dans le 2eme cas (indexsave.htm):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>L'étalon d'argent</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1458" name=GENERATOR>
</HEAD>
<BODY scroll="no"> 
<div align="center">

<table summary="" border="0" width="749" cellspacing="10">
	<tbody><tr>

  <td><img src="http://www.etalondargent.com/banniere2.jpg" alt="" border="1" height="87" width="852"></td>
	</tr>

</tbody></table></div>
    <div align="center">

	<table border="0" width="852" bordercolor="#000000">
	<tbody><tr>

  <td><IFRAME name=ZONE1 src="http://www.etalondargent.com/iframe.htm" width="852" 
height="451" border="1" bordercolor="#000000"> Désolé mais votre navigateur ne supporte pas les cadres locaux. </IFRAME></td>
	</tr>


    
</TABLE> </div>
<BR> 
 </BODY>
</HTML>

Pour ce qui est des frames, je sais que c'est déconseillé... Mais je ne vois pas comment avoir un site avec une navigation facile, à peu près le même design et sans recharger toute la page à chaque fois.

Pour les photos, c'est vrai qu'il en manque quelques unes ;) Mais toutes ces photos sont de moi et comme je n'utilise aucune photo venant d'un autre auteur, je n'ai pas toujours tout à montrer en exemple. Mais ça arrive, ça arrive ^^

Et pour la barre de défilement, j'ai remarqué également le problème! Mais là je pense pouvoir le résoudre toute seule en cherchant un peu donc je me concentre essentiellement sur le cadre noir ;)

Merci! :D

Perrine

Perrine

Posté
Posté

Tu me donnes les codes sources des pages une fois chargées ... je peux les avoir celles là ;)

Ce qui nous intéresse c'est de savoir comment ta page a été construite, si tu as utilisé des feuilles de style CSS.

Apparemment non puisque tous les attributs de mise en forme se trouvent dans ton code HTML mais sait-on jamais ... ;)

J'avoue que je ne suis pas très à l'aise avec les frames donc je ne comprends pas le comportement de tes 2 pages. Quoi qu'il en soit, il faudrait, je pense, le code source complet de ces 2 pages, et pas simplement 

<TD bordercolor="#253477"><IFRAME name=ZONE1 src="http://www.etalondargent.com/iframe.htm" width=852
height=451> Désolé mais votre navigateur ne supporte pas les cadres locaux. </IFRAME></TD>

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Comme il s'agit du cadre, je ne sais pas si le code des autres pages est utile mais je le met quand même (on ne sait jamais!). Je n'utilise pas de feuilles de styles (je ne connais que le html) :blush:

Voilà donc le code de l'iframe:

<HTML>
<HEAD>
<TITLE>L'étalon d'argent - iframe -</TITLE></HEAD>
<FRAMESET border=1 
frameSpacing=0 frameborder="NO" cols=145,*>
  <FRAME name=leftFrame 
src="http://www.etalondargent.com/iframegauche.htm" noResize scrolling=no>
  <FRAME 
name=mainFrame src="http://www.etalondargent.com/iframedroite.htm" scrolling="yes">
</FRAMESET>

<noframes></noframes>
</HTML>

Mais je pense qu'il vaut mieux s'intéresser aux premiers codes que j'ai donné puisque c'est là que j'insère l'iframe et donc le cadre qui l'entoure...

Ernestine

Ernestine

Posté
Posté (modifié)

Salut Silver,

Ton site est très joli, et agréable, là-dessus il n'y a rien à redire ;) Cependant, je pense que si personne ne répond... c'est parce que l'usage des frames est un vrai poison, et qu'on sait qu'un site qui les utilise, il aura beau faire toutes les optimisations possibles, ben ça restera un site avec des frames...

Je sais que c'est dur et long de faire un design, mais hélas, je pense sincèrement que tu devrais essayer de transformer le tien, le laisser aussi joli qu'il est... mais sans les frames ;)

Bon courage,

Ernestine

édit : un lien pour comprendre en quoi les frames sont à bannir : http://www.projetweb.com/labalise/frames_1.php

Modifié par Ernestine
silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Bonsoir!

Merci de votre réponse et du compliment.

Je sais bien que les frames sont un poison, qu'il ne faut pas les utiliser et qu'elles présentent beaucoup d'inconvénients malheureusement je ne vois pas comment transformer mon site en un site sans frames, avec un design ressemblant à l'actuel et avec une navigation "légère". Si vous avez des idées, je suis preneuse!

J'aimerai bien abandonner les frames mais comment? Sachant que je ne maitrise pas le php...

Perrine

Perrine

Posté
Posté

Bonsoir Silver,

Même si tu ne connais pas le php, tu peux quand même tenter les pseudos-frames ;) Tu vas voir, c'est facile :)

Pour dégrossir le tout, voici un tuto

Avec cette méthode, tu gardes les fichiers d'en tête, de menu et de pied de page en dehors de ta page "principale" prenons la page index pour un exemple.

Le contenu de ton header.php : (tu n'es pas obligée de l'enregistrer en php mais pour ne pas s'embrouiller, je te conseille d'utiliser des .php partout ;) )

<img src="ton image" />

à priori, un fichier header.php n'est pas nécessaire dans ce cas puisqu'il ne contient qu'une image .. mais quand même. Dans le cas où tu voudrais faire évoluer ton site, ce sera plus facile de mettre à jour ton fichier header.php que toutes tes pages ;)

Le menu.php ensuite : 

Accueil
<ul>
<li>Chevaux</li>
<li>Soins</li>
<li>Equitation</li>
<li>Races</li>
<li>Photos</li>
<li>Le site</li>
<li>Forum</li>
<li>Livre d'or</li>
<li>Contact</li>
</ul>

le footer.php

<div> Copyright © L'étalon d'argent - reproduction interdite -</div>

Voilà donc tes 3 fichiers.

Ensuite, tu reprends toutes tes pages une à une et tu insères, grâce aux codes détaillés dans le tuto tes fichiers header, menu et footer.

Par exemple :

<?php include ("header.php"); ?>

<?php include ("menu.php"); ?>

<h1>Bienvenue sur l'étalon d'argent!</h1>
<p>Bienvenue sur la nouvelle version de mon site, l'étalon d'argent. Ce site est consacré uniquement aux chevaux et à l'équitation et j'espère que vous y trouverez votre bonheur. Il contient diverses rubriques, pour tous les goûts: soins, races, photos, équitation... Avant de partir, n'oubliez pas de signer le livre d'or, ça me ferait très plaisir. Bonne visite!</p>
<h1>Nouveautés du 02/09/04</h1>
<p>La nouvelle version de l'étalon d'argent vient juste de sortir. Un nouvel hébergeur, un nouveau design, de nouvelles rubriques... La présentation est maintenant plus claire et la navigation est facilitée afin de vous assurer le plus grand confort lors de votre visite. Les mises à jour seront également beaucoup plus fréquentes. Vous pouvez donner votre avis sur le site en répondant au sondage. A bientôt!</p>

<?php include ("footer.php"); ?>

J'ai simplifié au max pour que tu comprennes les mécanismes. A toi ensuite de voir si tu veux travailler avec une feuille de style (CSS) externe et définir la mise en page de tes pages grâce à ça.

C'est vraiment ludique les CSS, c'est comme un jeu de construction... tu batis ta page HTML, elle est brute ... et au fur à mesure, tu la vois s'enjoliver. J'adore ! :D

Si tu as besoin de précisions, n'hésite pas ;)

Avant d'oublier : tes pages sont maintenant en php donc pour être exécutées, elles ont besoin d'un serveur. Je te conseille donc de t'installer easy php sur ton ordinateur pour avoir un serveur en local. Sinon, tu peux toujours uploader tes pages au fur et à mesure sur ton hébergement ... mais c'est plus contraignant ;)

A bientôt :)

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Bonjour!

Je crois que vous m'avez convaincue d'abandonner les frames, c'est vrai qu'elles présentent des inconvénients majeurs, surtout que j'ai l'intention de faire grandir mon site de plus en plus... Bref, j'ai essayé de me lancer dans les pseudo-frames et heu... ça ne marche pas! Juste pour avoir un résultat, j'ai testé avec simplement le header et le footer. J'ai fait un fichier header.php + upload => s'affiche correctement. J'ai fait un fichier footer.php + upload => s'affiche correctement. Mais alors c'est avec la page index.php que ça se corse... Je l'ai uploadé mais rien ne s'affiche. Je vous laisse tester: http://www.etalondargent.com/index.php

Je peux vous mettre le code source mais je ne suis pas certaine de m'en sortir avec les pseudo-frames... D'ailleurs je ne sais même pas à quoi ça ressemble, quelqu'un pourrait-il me montrer un exemple de site les utilisant?

Sinon mettons qu'on oublie tout ce qui concerne les frames (aussi bien frames normales que pseudo-frames). Est-il possible d'obtenir la même présentation qu'actuellement? Il faudra je suppose un jeu de tableaux... Mais alors la page se rechargera à chaque fois et le code deviendrait probablement très lourd... Comment remédier au problème et faire en sorte que le menu soit "enregistré" par l'ordinateur et que seule la page centrale mette du temps à se charger? Désolée si je ne m'exprime pas très bien.

Merci à vous :)

Sarc

Sarc

Posté
Posté

Faut te dire que tous les sites en PHP utilisent ca, mais tu ne verras pas vraiment de code source, vu que le PHP est géré coté serveur, et n'est donc pas envoyé a la machine de l'utilisateur...

Envoie le code PHP que tu as créé, pour qu'on te dise s'il y a un probleme ;)

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Tous les sites en php utilisent les pseudo-frames? (Enfin, presque tous je suppose). Pourriez-vous me donner un exemple quand même?

Sinon voila le code de ma page index... Si je l'ouvre dans mes documents, j'ai juste la page centrale sans le footer et le header et si j'essaye de l'ouvrir à partir d'internet, rien de s'affiche...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<?php include ("http://www.etalondargent.com/header.php"); ?>


<style type="text/css">
<!--
.Style2 {font-size: 18px; font-family: Verdana;}
.Style3 {font-size: 10px}
.Style4 {color: #006697}
.Style5 {color: #006699}
-->
</style>
</head>

<body scroll="yes">
<table width="506" border="0" align="center">
  <tr>
    <td width="500" height="405" align="center" valign="top"><div align="justify" class="Style2 Style4">
      <p align="center"><u>Bienvenue sur l'étalon d'argent! </u></p>
      <br>
      <span class="Style3"><strong> Bienvenue sur la nouvelle version de mon site, l'étalon d'argent. Ce site est consacré uniquement aux chevaux et à l'équitation et j'espère que vous y trouverez votre bonheur. Il contient diverses rubriques, pour tous les goûts: soins, races, photos, équitation... Avant de partir, n'oubliez pas de signer le livre d'or, ça me ferait très plaisir. Bonne visite! <br>
 <p align="center"><img src="http://www.etalondargent.com/lignechevauxsoleil.gif"><br>
 </p>
      </strong></span>
      <p align="center"><span class="Style3"><strong><u>Nouveautés du 02/09/04 </u></strong></span></p>
      <div align="justify"><span class="Style3"><strong> La nouvelle version de l'étalon d'argent vient juste de sortir. Un nouvel hébergeur, un nouveau design, de nouvelles rubriques... La présentation est maintenant plus claire et la navigation est facilitée afin de vous assurer le plus grand confort lors de votre visite. Les mises à jour seront également beaucoup plus fréquentes. Vous pouvez donner votre avis sur le site en répondant au sondage. A bientôt! 
          <p align="center"><img src="http://site.voila.fr/etalondargent4/chevalcabre.jpg"><br>
            <br>
                    
      </strong></span></div>
      </div></td>
  </tr>
</table>


<?php include ("http://www.etalondargent.com/footer.php"); ?>


</body>
</html>






</body>
</html>

Sarc

Sarc

Posté
Posté (modifié) 
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<?php include ("http://www.etalondargent.com/header.php"); ?>


<style type="text/css">
<!--
.Style2 {font-size: 18px; font-family: Verdana;}
.Style3 {font-size: 10px}
.Style4 {color: #006697}
.Style5 {color: #006699}
-->
</style>
</head>

<body scroll="yes">

Tu as deux head et deux body la... Ptit probleme tout de meme ;)

Sinon mon site (pour ne pas prendre un exemple intéressé) Fun-Ados utilise un include pour le header et le footer, il reste plus apres qu'a mettre le contenu de la page :D

Modifié par sarc
silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Encore un essai, j'ai simplifié le code au maximum et toujours le même problème... C'est peut-être à cause de l'hébergeur? Pourtant je ne comprend pas, il accepte le php et j'ai un forum type IPB qui marche sans problème. Une mauvaise écriture de "include"? Pourtant j'ai fait un copier coller... Je vous remet le code, simplifié cette fois

<?php include ("http://www.etalondargent.com/header.php"); ?>
<?php include ("http://www.etalondargent.com/footer.php"); ?>


<html>
<head>
<title>L'étalon d'argent</title>
</head>

<body>





Bienvenue sur l'étalon d'argent!




</body>
</html>

Là j'ai mis les deux fonctions include hors balises <head>, <html> et <body> parceque je l'ai vu sur un autre site mais même si je le met entre ces balises, ça ne change rien...

Sarc

Sarc

Posté
Posté

La, tu as mis du code avant la balise <html> donc forcément ca ne marchera psa non plus...

Il faut te dire que les include servent juste a raccourcir un programme en mettant des morceaux dans un autre fichier ! Par ex, dans ton header, tu mets 

<html>
<head>
<title>L'étalon d'argent</title>
</head>

<body>

puis dans ton fichier, tu mets ton contenu (par ex echo "bienvenue sur ma page !";)

Puis dans ton footer, tu mets </html>

Et voila, le tour est joué...

Quand tu mets le code de ta page, mets au passage ce que tu as mis dans ton header et ton footer pour vérifier que c'est bon ;)

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Lis bien mon message pour le fait de l'avoir mis avant la balise <html> ^^

Là j'ai mis les deux fonctions include hors balises <head>, <html> et <body> parceque je l'ai vu sur un autre site mais même si je le met entre ces balises, ça ne change rien...

Par contre la dernière partie de ton message va peut etre m'aider... Dans mon header j'ai mis <html> et </html> et idem pour le footer... Je change tout ça et je te dis, merci!

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

Toujours rien et ça commence à m'énerver... Je ne vois pas pourquoi! J'enlève l'idée de mettre <html> et <body> dans le head et </html></footer> dans le footer car c'est encore pire... Rien ne se charge... Voila les codes des trois pages:

HEADER:

<html>
<head>
<title>L'étalon d'argent</title>
</head>

<body><img src="http://www.etalondargent.com/banniere2.jpg">

</body></html>

FOOTER:

<html>
<head>
<title>Footer</title>
<style type="text/css">
<!--
.Style2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	color: #006697;
}
-->
</style>
</head>




<body>
<span class="Style2"> Copyright © L'étalon d'argent - reproduction interdite - </span>
</body>
</html>

INDEX:

<html>
<head>
<title>Index</title>
</head>

<body>

<?php include ("http://www.etalondargent.com/header.php"); ?>


Bienvenue sur l'étalon d'argent





<?php include ("http://www.etalondargent.com/footer.php"); ?>


</body>
</html>

Sarc

Sarc

Posté
Posté

Voila le probleme, toi non plus tu n'as pas bien lu mon message ;)

J'ai bien insisté sur le fait que c'était un morceau de ton code que tu incluais dans une page... Par exemple, voila une page normale :

<html><head>...</head><body>CONTENU</body></html>

Ca c'est une page entiere... Tu sais que tu vas utiliser <html><head>...</head><body> dans chacune des pages de ton site... Donc tu le mets dans un fichier que tu appelles header.

Tu sais également que tu auras </body></html> sur chacune de tes pages, tu le mets donc dans footer.

Ton index ressemble à ca : 

<? 
include('header.php');

echo "contenu";

include('footer.php');
?>

En fait, ce que tu avais fait juske la t'aurais donné :

<html>
<head>
<title>Index</title>
</head>
<body>

<html>
<head>
<title>L'étalon d'argent</title>
</head>

<body><img src="http://www.etalondargent.com/banniere2.jpg">

</body></html>


Bienvenue sur l'étalon d'argent

<html>
<head>
<title>Footer</title>
<style type="text/css">
<!--
.Style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #006697;
}
-->
</style>
</head>




<body>
<span class="Style2"> Copyright © L'étalon d'argent - reproduction interdite - </span>
</body>
</html>

</body>
</html>

Tu vois que ca n'a aucun sens :P

J'avoue que je sais pas expliquer autrement que ce que je viens de faire :blush: m'enfin si jamais ca ne marche toujours pas, j'essaierai de t'aider tel que je peux :P

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

On doit avoir tous les deux des problèmes de vision hihi!

Car là encore je crois que tu n'as pas lu attentivement. J'ai en effet essayé avec la méthode que tu viens juste de me citer mais ça ne marche pas non plus et c'est même pire (cf. mon message), regarde:

J'enlève l'idée de mettre <html> et <body> dans le head et </html></footer> dans le footer car c'est encore pire... Rien ne se charge

Je vais tout reprendre et réessayer mais je ne m'attend pas à un résultat...

Merci encore :)

silver_stallion

silver_stallion

Posté
  • Auteur
Posté

J'ai fait exactement (du moins je pense) comme du m'a dit et même résultat que tout à l'heure: rien ne veut se charger, même pas quand j'essaye d'ouvrir la page à partir de mon ordi. Les codes:

HEADER:

<html>
<head>
<title>L'étalon d'argent</title>
</head>

<body><img src="http://www.etalondargent.com/banniere2.jpg">

INDEX:

<?php include ("http://www.etalondargent.com/header.php"); ?>


Bienvenue sur l'étalon d'argent





<?php include ("http://www.etalondargent.com/footer.php"); ?>

FOOTER:

<span class="Style2"> Copyright © L'étalon d'argent - reproduction interdite - </span>
</body>
</html>

Je ne vois pas où peut être l'erreur... :unsure:

Sarc

Sarc

Posté
Posté (modifié)

Ne vas pas dire que je me trompé si j'ai raison :hypocrite: lol

Bon, telecharger le script suivant :

[viré l'url]

Installe le tel quel sur ton ftp (sans oublier de le dezipper, je précise au cas ou :P), et teste... Si ca marche (en gros, si ton hebergeur prend le FTP), analyse les codes, et comprends... Je t'ordonne de comprendre maintenant :D

Le résultat souhaité est visible [pareil]

EDIT : une question a la con : tu es sur du chemin d'acces de ton fichier, que tu l'as bien appelé qquechose.php, que ton header et ton footer sont dans les bons dossiers... ??

Ton probleme ca sent quand meme un probleme a la con... :P

Modifié par sarc

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...