problème affichage sous firefox

icarex · 14 Juillet 2005

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

Sarc · 14 Juillet 2005

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 ?

MS-DOS_1991 · 14 Juillet 2005

Bonjour :hypocrite:

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

C'est à dire ? :huh: :huh:

Pourrais-tu poster une url, une capture d'écran, enfin quelquechose quoi :unsure:

icarex · 14 Juillet 2005

Pourrais-tu poster une url, une capture d'écran, enfin quelquechose quoi

<{POST_SNAPBACK}>

salut,

je pensais que le code suffisait...

page à tester

et deux captures d'écrans

d'avance merci

MS-DOS_1991 · 14 Juillet 2005

le css pour le pied de page:

div#pied {
      height: 30px;
      background-color: gray;
      clear: both;
      }

ah et il te manque un <div> avant </body>

Modifié 14 Juillet 2005 par MS-DOS_1991

Sarc · 14 Juillet 2005

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

MarvinLeRouge · 14 Juillet 2005

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.

icarex · 14 Juillet 2005

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

MS-DOS_1991 · 14 Juillet 2005

<!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é 14 Juillet 2005 par MS-DOS_1991

icarex · 14 Juillet 2005

<!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

Sarc · 14 Juillet 2005

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

Connexion

problème affichage sous firefox

Sujets conseillés

icarex

Sarc

MS-DOS_1991

icarex

MS-DOS_1991

Sarc

MarvinLeRouge

icarex

MS-DOS_1991

icarex

Sarc

Veuillez vous connecter pour commenter

Parcourir

Activité