Affichage différent entre IE et Firefox

tofeon · Message par **tofeon** » 08 juin 2008, 18:12

Bonjour à tous,

je me suis lancé dans la construction d'un site tout simple pour mon activité professionnelle. Je rencontre pas mal de problème (des décalages qu'il y a un peu partout et que je ne comprends pas) mais à force de chercher sur les forums j'arrive à peu près à m'en sortir.

Le principal actuellement est que l'affichage n'est pas le meme entre IE et Firefox.
Et là je sèche!

Si quelqu'un peut m'aiguiller.

http://prestafrance.olympe-network.com/ ... ignon.html

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 08 juin 2008, 18:20

Malheureusement, tu as fait ton site à l'ancienne...

Je ne peux que te conseiller de lire les tuto épinglés en tête du forum, spécialement le site du zero, la partie html et css, ainsi que
Edition de pages web avec KompoZer
http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html

Message par **chinon37** » 08 juin 2008, 18:30

Firefox, IE, Safari = 3 affichages différents.
Il faut vraiment que tu passes par un fichier css.
Ta mise en pages actuelle est faite à partir des boutons de la barre d'outils n°2 et c'est la pire chose à faire > c'est la méthode de 90% des gens (pourcentage non certifié) qui utilisent un traitement de texte et c'est mauvais.

Egalement, faire une mise en page avec la touche entrée ne peut que poser des problèmes...
Copie à revoir

Pour une initiation aux css: http://info.sio2.be/kpz/2/index.php

tofeon · Message par **tofeon** » 09 juin 2008, 11:39

Merci pour vos réponses

Vous voulez dire que meme pour un site aussi simple que le mien il va falloir que je me lance dans le langage html ou ccs?
Il ne faut pas se servir de l'onglet "normal" pour decalé insérer des images, faire sa mise en page?
Il faut tout taper en code?

Si c'est bien cela alors c'est pas gagné cette histoire!

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 09 juin 2008, 13:04

Non tu n'es pas obligé d'apprendre à taper le code.

Il faut juste éviter de faire la mise en page et mise en forme avec la barre de mise en forme quand l'objectif est d'obtenir des résultats similaires sur les différents navigateurs.

En utilisant au mieux l'outil Kompozer, on peut faire un travail de pro, pour cela il faut juste passer un peu de temps à lire la doc pour gagner beaucoup de temps ensuite.

Message par **chinon37** » 09 juin 2008, 13:40

Non, bien sûr qu'il n'est pas question de coder. Sinon, KompoZer n'aurait pas lieu d'être et un éditeur de texte comme Notepad++ suffirait amplement!

Mais il y a tout de même des bases qu'il est important de connaître pour faire des choses qui se tiennent.
Je viens de te faire en 5 minutes une page basique dont tu peux t'inspirer:
Tu copies le code ci-dessous dans KompoZer, l'onglet source d'un nouveau document après avoir effacé ce qu'il y a dans cet onglet.

Code : Tout sélectionner

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
    <title>
      essai
    </title>
    <meta content="Chinon37" name="author">
    <style type="text/css">
#entete {
    width: 850px;
    font-size: 1em;
    background-color: #9f9f9f;
    height: 150px;
    background-image: url(http://prestafrance.olympe-network.com/Photos/Essai-banniere.gif);
    }
    #menu {
    margin-top: 0px;
    width: 850px;
    height: 40px;
    text-align: center;
    }
    #menu li {
    list-style-type: none;
    display: inline;
    padding-right: 60px;
    font-size: 1em;
    font-family: Helvetica;
    }
    #gauche {
    border: 1px solid #cccccc;
    float: left;
    width: 380px;
    height: 400px;
    background-color: #f7ffdd;
    margin-left: 20px;
    }
    #droit {
    border: 1px solid #cccccc;
    float: right;
    width: 380px;
    height: 400px;
    background-color: #f7ffdd;
    margin-right: 20px;
    }
    body {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    width: 850px;
    }

    </style>
  </head>
  <body>
    <h1 id="entete">
      entête
    </h1>
    <div id="menu">
      <ul>
        <li>menu1
        </li>
        <li>menu2
        </li>
        <li>menu3
        </li>
        <li>menu4
        </li>
      </ul>
    </div>
    <div id="gauche">
      cadre gauche
    </div>
    <div id="droit">
      cadre droit
    </div>
  </body>
</html>

Tu peux ensuite adapter cette page à tes besoins.
De très légères différences d'affichage existent sur IE, mais non rédhibitoires dues aux bordures des deux blocs du bas. Firefox et safari sont Ok.
Tu ne pourras pas faire l'économie de quelques bases en Html et Css si tu veux un site qui se tienne, et on est là pour t'aider...
Sur la page que je te donne, tu peux faire f11 en onglet normal ou aperçu:
cela ouvre l'éditeur de style: en te baladant sur les différents onglets, tu verras vraiment le potentiel de ce logiciel: comment changer la taille du texte, modifier la couleur de fond, ajouter une bordure à un bloc, etc...
Ce fichier étant un essai, et le code restant sur ce forum, n'hésite pas à modifier des choses dans l'éditeur ccs. Tu verras que les changements s'appliquent directement à la page.
Bon courage

tofeon · Message par **tofeon** » 09 juin 2008, 15:13

Alors là

C'est exactement ce qu'il me fallait pour me lancer car j'avais du mal à saisir pas mal de chose avec le CSS.
Mais là toute de suite beaucoup de choses me paraissent plus claires!
Maintenant j'ai le pied à l'étrier.

Un énorme MERCI !

Je pense que beaucoup de questions viendront par la suite mais maintenant je vais pouvoir travailler plutôt que passer mon temps dans les divers tutos pour débutants qui m'embrouillaient plus qu'autre chose.

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 09 juin 2008, 16:36

Il faut que tu regardes au moins la notion de styles dans les CSS avec la notions de classes ou d'identifiants...
Et n'oublie pas la barre de mise en forme du texte est à proscrire... si tu tiens à t'éviter les galères.

lamel · Message par **lamel** » 11 juin 2008, 10:52

Je profite de ce message pour mon problème.
J'ai également le même problème d'affichage différent entre IE et Mozilla, et pourtant j'ai bien essayé de comprendre comment fonctionnait le CSS et tenté de faire mon site avec, et ça s'affiche toujours mal...
qu'en pensez-vous ?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>index2</title>
  <link rel="stylesheet" href="nouvel%20essai"
 type="text/css">
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(225, 255, 253);"
 alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center; color: rgb(40, 81, 202);"
 id="en_tete">
<h3>TITRE</h3>
</div>
<ul id="menu_horizontal">
  <li>
    <a href="#">Nous
contacter</a>
  </li>
  <li><a href="#">
Liens</a>
  </li>
</ul>
<ul id="menu_vertical">
  <li>
    <a href="#">ACCUEIL</a>
  </li>
  <li>
    <a href="#">Le syndicat</a>
  </li>
  <li>
    <a href="#">La rivière eure</a>
  </li>
  <li>
    <a href="#">Les actions</a>
  </li>
  <li>
    <a href="#">Droits et devoirs</a>
  </li>
  <li>
    <a href="#">Conseils</a>
  </li>
  <li>
    <a href="#">Comptes rendus</a>
  </li>
</ul>
<div style="text-align: center;" id="corps"><span
 style="font-weight: bold;">Texte </span></div>
</body>
</html>

merci d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 11 juin 2008, 12:11

Il fautbannir les espaces dans les noms de fichiers!

Sans le fichier "nouvel%20essai" sensé contenir les CSS cela va être dur de cibler la cause exacte. Ce serait mieux d'avoir une arborescence de fichiers organisée (images, html, et styles).

Probablement qu'il suffit de mettre le menu vertical en "flottant" à gauche...

édité: correction grammaticale

lamel · Message par **lamel** » 12 juin 2008, 09:51

Euh

ça doit être une question débile, mais je fais comment pour mettre le fichier contenant les CSS?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Message par **chinon37** » 12 juin 2008, 10:44

Bonjour,
2 solutions:
1- Tu mets la page en ligne et tu nous donnes l'adresse où la consulter
2- Tu ouvres le fichier css avec un éditeur de texte comme notepad++ et tu fais un copié collé dans ce forum, comme tu l'as fait pour le code de la page.

Au passage, ton fichier css est enregistré sous quel nom complet? nouvel essai ou nouvel essai.css?
S'il a l'extension .css, il faut que dans ton code, tu ais:
<link rel="stylesheet" href="nouvel%20essai.css"
type="text/css">
De toute façon, pour une compréhension de tes différents fichiers, il est conseillé de lui donner l'extension .css, même si ça n'est pas obligatoire.
Si la feuille a été faite par KompoZer, il doit avoir cette extension automatiquement.
Il faut absolument éviter les espaces dans les noms de dossiers et de fichiers (qui se transforment en %20 !)

lamel · Message par **lamel** » 12 juin 2008, 11:03

Tu ouvres le fichier css avec un éditeur de texte comme notepad

... Oui tout bêtement

Alors voilà :

Code : Tout sélectionner

/* Generated by KompoZer */
ul#menu_vertical {
  list-style-type: none;
  float: left;
}
ul#menu_vertical li {
  margin-bottom: 5px;
}
ul#menu_vertical a {
  border-color: black;
  border-width: 1px;
  margin-left: 0px;
  display: block;
  background-color: white;
  width: 140px;
  background-repeat: no-repeat;
  font-family: Comic Sans MS;
  background-image: url(../../bandeau.jpg);
  background-position:  center center;
  color: black;
  height: 40px;
  text-align: center;
  font-style: normal;
}
ul#menu_vertical a:hover {
  border: 1px solid gray;
  background-color: #cccccc;
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(../../bandeau%20vert.jpg);
  color: white;
  height: 40px;
}
body {
  width: 800px;
  margin-left: 50px;
}
ul#menu_horizontal {
  list-style-type: none;
  width: 100%;
}
ul#menu_horizontal li {
  float: right;
}
ul#menu_horizontal a {
  border:  none;
  padding: 5px 15px;
  float: left;
  margin-top: 0px;
  margin-right: 2px;
  text-align: center;
  background-color: white;
  color: black;
  font-family: Comic Sans MS;
  background-image: url(../../bandeau.jpg);
  background-repeat: no-repeat;
  background-position:  center center;
}
ul#menu_horizontal a:hover {
  border:  none;
  background-color: #cccccc;
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(../../bandeau%20vert.jpg);
}
#corps {
  width: 800px;
  margin-left: 0px;
  margin-top: 50px;
  text-align: justify;
}
#en_tete {
  width: 800px;
  margin-left: 0px;
  background-position:  center center;
  background-repeat: no-repeat;
  height: 60px;
  text-align: center;
  font-style: normal;
  font-family: comic sans ms;
  font-size: medium;
  color: white;
  background-image: url(../images/DSC01530.JPG);
}
h1 {
  font-size: 1em;
  color: #6600cc;
  text-decoration: underline;
  font-family: "Times New Roman",Times,serif;
}
h2 {
  font-size: 1em;
  font-family: "Times New Roman",Times,serif;
  font-weight: bold;
}
h3 {
  color: white;
}

Pour les espaces dans les noms de fichiers je corrige tout ça! J'ai pas encore le bon réflexe.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 juin 2008, 12:01

Rapidos, c'est un peu le fouillis... inspire toi des modèles données dans ce forum pour repartir sur une base solide.
Mets d'abord ton menu horizontal, il n'a pas besoin de "flotter".

Ensuite place 2 blocs divs: l'un pour le menu de gauche, le droit pour mettre le corps.

lamel · Message par **lamel** » 12 juin 2008, 14:22

ouh la la, je crois que je ne suis vraiment pas faite pour faire des sites !
En fait mon fouillis, il vient déjà d'un modèle (pour les menus)...

J'ai fait quelques modifs, j'ai remplacé mes listes par des blocs div, apparemment c'est pas ce qu'il fallait faire, ça ressemble encore moins à quelque chose maintenant.
Je pense qu'il y a vraiment quelque chose qui cloche mais quoi ??

Merci beaucoup pour l'aide, sans ça je crois que j'aurais laissé tomber depuis longtemps.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>index2</title>
  <link rel="stylesheet" href="nouvelessai"
 type="text/css">
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(225, 255, 253);"
 alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center; color: rgb(40, 81, 202);"
 id="en_tete">
<h3>S</h3>
<span style="font-weight: bold;"></span></div>
<div id="menu_horizontal">
<li><a href="#">Nous
contacter</a>
</li>
<li><a href="#">
Liens</a>
</li>
</div>
<div id="menu_vertical">
<li><a href="#">ACCUEIL</a>
</li>
<li>
  <a href="#">Le&nbsp;</a>
</li>
<li>
  <a href="#">La&nbsp;</a>
</li>
<li>
  <a href="#">Les&nbsp;</a>
</li>
<li>
  <a href="#">D</a>
</li>
<li>
  <a href="#">C</a>
</li>
<li>
  <a href="#">C</a>
</li>
</div>
<div style="text-align: center;" id="corps"><span
 style="font-weight: bold;">Bienvenue </span><br>
<br>
</div>
</body>
</html>

Code : Tout sélectionner

/* Generated by KompoZer */
body {
  width: 800px;
  margin-left: 50px;
}
#corps {
  width: 800px;
  margin-left: 0px;
  margin-top: 50px;
  text-align: justify;
}
#en_tete {
  width: 800px;
  margin-left: 0px;
  background-position:  center center;
  background-repeat: no-repeat;
  height: 60px;
  text-align: center;
  font-style: normal;
  font-family: comic sans ms;
  font-size: medium;
  color: white;
  background-image: url(../images/DSC01530.JPG);
}
h1 {
  font-size: 1em;
  color: #6600cc;
  text-decoration: underline;
  font-family: "Times New Roman",Times,serif;
}
h2 {
  font-size: 1em;
  font-family: "Times New Roman",Times,serif;
  font-weight: bold;
}
h3 {
  color: white;
}
div#menu_vertical {
  list-style-type: none;
  float: left;
  margin-top: 10px;
}
div#menu_vertical li {
  margin-bottom: 5px;
}
div#menu_vertical a {
  border-color: black;
  border-width: 1px;
  margin-left: 0px;
  display: block;
  background-color: white;
  width: 140px;
  background-repeat: no-repeat;
  font-family: Comic Sans MS;
  background-image: url(../../bandeau.jpg);
  background-position:  center center;
  color: black;
  height: 40px;
  text-align: center;
  font-style: normal;
}
div#menu_vertical a:hover {
  border:  none;
  background-color: #cccccc;
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(../../bandeau%20vert.jpg);
}
div#menu_horizontal {
  list-style-type: none;
  margin-left: 550px;
  margin-top: 5px;
}
div#menu_horizontal li {
  display: inline;
}
div#menu_horizontal a {
  border:  none;
  padding: 5px 15px;
  float: left;
  margin-top: 0px;
  margin-right: 2px;
  text-align: center;
  background-color: white;
  color: black;
  font-family: Comic Sans MS;
  background-image: url(../../bandeau.jpg);
  background-repeat: no-repeat;
  background-position:  center center;
}
div#menu_horizontal a:hover {
  border:  none;
  background-color: #cccccc;
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(../../bandeau%20vert.jpg);
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Geckozone

Affichage différent entre IE et Firefox

Affichage différent entre IE et Firefox

Qui est en ligne ?