Aller au contenu

problème affichage sous firefox


icarex

Sujets conseillés

code CSS

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
background-color: Black;
}
div#conteneur {
position: absolute;
width: 800px;
}
div#header {
height: 100px;
background-color: yellow;
}
div#centre {
background-color:red;
width: 800px;
height: auto;
padding-bottom: 20px;
}
div#pied {
height: 30px;
background-color: gray;
}
.zone1{
background-color: Fuchsia;
float: left;
width: 100px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
}
.zone2{
background-color: Green;
width: 650px;
height: 50px;
margin-top: 10px;
float: left;
clear: none;
}

le HTML

<div id="conteneur">
  <div id="header">header</div>

<div id="centre">
 <div class="zone1">wwwwwwww</div>
 <div class="zone2">ceci est un test</div>
 <div class="zone1">xxxxxxxxxxx</div>
 <div class="zone2">ceci est un autre test</div>
</div>
  <div id="pied">footer</div>

l'affichage correspond à mon attente sous IE6 mais ne fonctionne pas sous firefox

j'implore votre aide

merci d'avance

Lien vers le commentaire
Partager sur d’autres sites

Bonjour...

Pas de bonjour, pas de présentation (c'est ton premier post), pas d'explication du problème, ni d'url pour le voir de nous même...

On doit faire quoi ?

Lien vers le commentaire
Partager sur d’autres sites

Hum...

Essaye avec

<div id="conteneur">
 <div id="header">header</div>

<div id="centre">
<div class="zone1">wwwwwwww</div>
<div class="zone2">ceci est un test</div>
<div class="zone1">xxxxxxxxxxx</div>
<div class="zone2">ceci est un autre test</div>
 <div id="pied">footer</div>
</div>

et le code qu'a donné MS DOS ;)

Lien vers le commentaire
Partager sur d’autres sites

1) C'est logique que ça parte en vrille si tu conçois sous IE. C'est sous un navigateur qui fait la bonne chose qu'il faut tester, pas sous un buggé.

2) Mets un clear à ton "pied", si tu veux qu'il passe sous les floats qui sont dans ton corps de page.

Lien vers le commentaire
Partager sur d’autres sites

1) C'est logique que ça parte en vrille si tu conçois sous IE. C'est sous un navigateur qui fait la bonne chose qu'il faut tester, pas sous un buggé.

2) Mets un clear à ton "pied", si tu veux qu'il passe sous les floats qui sont dans ton corps de page.

j'ai testé, mais ça ne marche toujours pas

merci

Lien vers le commentaire
Partager sur d’autres sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
background-color: Black;
}
div#conteneur {
position: absolute;
width: 800px;
}
div#header {
height: 100px;
background-color: yellow;
}
div#centre {
background-color: red;
width: 800px;
height: auto;
padding-bottom: 20px;
}
div#pied {
height: 30px;
background-color: gray;
clear: both;
}.zone1{
background-color: fuchsia;
float: left;
width: 100px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
}.zone2{
background-color: green;
width: 650px;
height: 50px;
margin-top: 10px;
float: left;
clear: none;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">header</div>
<div id="centre">
<div class="zone1">wwwwwwww</div>
<div class="zone2">ceci est un test</div>
<div class="zone1">xxxxxxxxxxx</div>
<div class="zone2">ceci est un autre test</div>
</div>
<div id="pied">footer</div>
</div>
</body>
</html>

Chez moi, ça marche :unsure:

[edit]Oh pardon je ne m'intéressait qu'au footer :blush:[/edit]

Modifié par MS-DOS_1991
Lien vers le commentaire
Partager sur d’autres sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body {
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      margin: 0;
      padding: 0;
      background-color: Black;
      }
      div#conteneur {
      position: absolute;
      width: 800px;
      }
      div#header {
      height: 100px;
      background-color: yellow;
      }
      div#centre {
      background-color: red;
      width: 800px;
      height: auto;
      padding-bottom: 20px;
      }
      div#pied {
      height: 30px;
      background-color: gray;
      clear: both;
      }.zone1{
      background-color: fuchsia;
      float: left;
      width: 100px;
      height: 50px;
      margin-top: 10px;
      margin-left: 10px;
      }.zone2{
      background-color: green;
      width: 650px;
      height: 50px;
      margin-top: 10px;
      float: left;
      clear: none;
      }
    </style>
  </head>
  <body>
    <div id="conteneur">
      <div id="header">header</div>
      <div id="centre">
        <div class="zone1">wwwwwwww</div>
        <div class="zone2">ceci est un test</div>
        <div class="zone1">xxxxxxxxxxx</div>
        <div class="zone2">ceci est un autre test</div>
      </div>
      <div id="pied">footer</div>
    </div>
  </body>
</html>

Chez moi, ça marche

voilà ce que j'obtiens avec un copier-coller de ton code

résultat sous firefox

Lien vers le commentaire
Partager sur d’autres sites

Et moi je t'ai conseillé d'inclure le pied de page dans le div id=centre... et là ça marche !

Enlève aussi le padding-bottom ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

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



Connectez-vous maintenant
×
×
  • Créer...