Affichage différent entre IE et Firefox

Message par **chinon37** » 12 juin 2008, 14:28

Pour faire simple, peux-tu nous faire une image avec l'aspect que tu veux donner à ta page et mettre cette image quelque part où on pourrait la consulter?
Ainsi, on pourra peut-être te faire un modèle de base que tu modifieras à ton gré...

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

Je voudrais partir sur la même base qu'à cette adresse http://www.siave.net mais avec un menu horizontal contenant "liens" et "nous contacter"
(Pas de critiques sur le site du lien

c'était vraiment mes tout tout débuts avec la création de sites,tout à été fait avec des tableaux et pas de CSS

, j'en étais presque fière au début, mais plus maintenant...)

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

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

Vous embêtez pas à faire un modèle de base, je suis repartie de zéro, c'est peut-être pas parfait, mais je m'en sors un peu plus avec l'affichage et j'ai abandonné le menu horizontal que je maîtrise toujours pas.

Voici le début de résultat :

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="index2css"
 type="text/css">
</head>
<body>
<div style="top: 0px; height: 433px;" id="conteneur">
<div style="text-align: center; color: rgb(40, 81, 202);"
 id="en_tete">
<h3><br>
</h3>
<span style="font-weight: bold;"></span></div>
<div id="gauche">
<ul class="menugauche">
  <li><a href="#">A</a>
  </li>
  <li>
    <a href="#">L</a>
  </li>
  <li>
    <a href="#">L</a>
  </li>
  <li>
    <a href="#">L</a>
  </li>
  <li>
    <a href="#">D</a>
  </li>
  <li>
    <a href="#">C</a>
  </li>
  <li>
    <a href="#">C</a>
  </li>
</ul>
</div>
<div id="droite">
<ul class="menudroite">
  <li><a href="#">Nous
contacter</a>
  </li>
  <li><a href="#">
Liens</a>
  </li>
</ul>
</div>
<div style="text-align: center;" id="centre"><span
 style="font-weight: bold;">Bienvenue <br>
<br>
<br>
</span><br>
<br>
<br>
<div style="text-align: center;"><span
 style="color: rgb(204, 0, 0);"><br>
</span><a href="#"></a></div>
<div id="pied"></div>
</div>
</div>
</body>
</html>

et le CSS qui va avec pas encore terminé :

Code : Tout sélectionner

/* Generated by KompoZer */
body {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  font-family: Trebuchet MS;
}
#conteneur {
  width: 100%;
  position: absolute;
  background-color: #c8fff6;
}
#en_tete {
  height: 80px;
  background-color: #99ff99;
}
#gauche {
  position: absolute;
  width: 150px;
  left: 0;
}
#centre {
  margin-left: 150px;
  margin-right: 150px;
  background-color: #c8fff6;
}
#droite {
  position: absolute;
  width: 150px;
  right: 0;
  background-color: #ffff66;
}
#pied {
  background-color: silver;
}
.menugauche {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-repeat: no-repeat;
}
.menudroite {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.menugauche li {
  border:  none;
  margin-bottom: 8px;
  height: 25px;
  background-repeat: no-repeat;
  background-image: url(../images/BANDEAU.jpg);
  background-position:  center center;
  text-align: center;
}
.menudroite li {
  margin-bottom: 5px;
}
.menudroite a {
}
.menugauche a {
  background-repeat: no-repeat;
  background-position:  center center;
}
.menudroite a:hover {
}
.menugauche a:hover {
}

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, 17:21

Et que penses-tu de cela?
n'est ce pas un menu en ligne comme cela que tu veux?
*pour simplifier, j'ai fait une feuille de style interne, qu'il est possible d'exporter*
**je suis parti de ta page**

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>
    <style type="text/css">
body {
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    font-family: Trebuchet MS;
    }
    #conteneur {
    width: 100%;
    position: absolute;
    background-color: #c8fff6;
    }
    #en_tete {
    height: 80px;
    background-color: #99ff99;
    }
    #gauche {
    position: absolute;
    width: 150px;
    left: 0;
    }
    #centre {
    margin-left: 150px;
    margin-right: 150px;
    background-color: #c8fff6;
    }
    #droite {
    right: 0;
    background-color: #ffff66;
    }
    #pied {
    background-color: silver;
    }
    .menugauche {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-repeat: no-repeat;
    }
    .menudroite {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    .menugauche li {
    border:  none;
    margin-bottom: 8px;
    height: 25px;
    background-repeat: no-repeat;
    background-image: url(../images/BANDEAU.jpg);
    background-position:  center center;
    text-align: center;
    }
    .menudroite li {
    margin-bottom: 5px;
    display: inline;
    padding-right: 50px;
    }
    .menudroite a {
    }
    .menugauche a {
    background-repeat: no-repeat;
    background-position:  center center;
    }
    .menudroite a:hover {
    }
    .menugauche a:hover {
    }

    </style>
  </head>
  <body>
    <div style="top: 0px; height: 433px;" id="conteneur">
      <div style="text-align: center; color: rgb(40, 81, 202);" id="en_tete">
        <h3>
          <br>
        </h3>
      </div>
      <div id="gauche">
        <ul class="menugauche">
          <li>
            <a href="#">A</a>
          </li>
          <li>
            <a href="#">L</a>
          </li>
          <li>
            <a href="#">L</a>
          </li>
          <li>
            <a href="#">L</a>
          </li>
          <li>
            <a href="#">D</a>
          </li>
          <li>
            <a href="#">C</a>
          </li>
          <li>
            <a href="#">C</a>
          </li>
        </ul>
      </div>
      <div style="text-align: center;" id="centre">
        <span style="font-weight: bold;">Bienvenue<br></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
        <br>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
        <br>
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
        <br>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
        <br>
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
        <span style="font-weight: bold;"><br></span><br>
        <br>
        <br>
        <div style="text-align: center;">
          <span style="color: rgb(204, 0, 0);"><br></span>
        </div>
        <div id="droite">
          <ul class="menudroite">
            <li>
              <a href="#">Nous contacter</a>
            </li>
            <li>
              <a href="#">Liens</a>
            </li>
          </ul>
        </div>
        <div id="pied"></div>
      </div>
    </div>
  </body>
</html>

lamel · Message par **lamel** » 16 juin 2008, 10:37

oui c'est ça, merci beaucoup !!

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

mike giorno · Message par **mike giorno** » 18 juin 2008, 15:44

Fabrice.Tres.Net a écrit :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

J'ai eu le même problème que toi lors de la conception de mon site.
IE 7 ne respecte pas très bien les standards HTML. Sur un écran large. Je n'ai pas le même présentation du site suivant que j'utilise Firefox et IE7.

Cependant IE 8 je pense respectera mieux les normes html et ainsi tu devrais avoir la même présentation de ton site entre IE8 Firefox 3 et safari 3.
C'est dans mon cas a peu près le même résultat.

Si non il faut que tu réalise ton site en fonction des deux navigateurs les plus courants qui sont IE 7 et Firefox 3 depuis aujourd'hui. Tu n'obtiendras pas tout a fait le même résultat, mais tu peux avoir quelque chose de très correct sur les deux.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9) Gecko/2008052906 Firefox/3.0

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 18 juin 2008, 22:50

mike giorno a écrit : Si non il faut que tu réalise ton site en fonction des deux navigateurs les plus courants qui sont IE 7 et Firefox 3 depuis aujourd'hui. Tu n'obtiendras pas tout a fait le même résultat, mais tu peux avoir quelque chose de très correct sur les deux.

Encore une solution à l'ancienne à ne pas envisager sauf cas très très exceptionnel!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

Geckozone

Affichage différent entre IE et Firefox

Qui est en ligne ?