5603 sujets

Sémantique web et HTML

Div height 100% prob affichage Firefox

Hello,

j'ai un problème, qui ressemble à beaucoup de problèmes que j'ai croisé sur internet, mais légèrement différent, et du coup je ne sais pas comment faire.

Voici le code :

html{
height:100%;
margin:0;
}

body {
background-image: url(images/background.gif);
padding: 0 ;
text-align: center ;
height:100%;
margin:0;
}

div#ma_page {
width:930px;
height:100%;
margin: 0 auto ;
}

div#principal {
width:768px;
height:100%;
margin: 0 auto ;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
border-top:#000000 solid 1px;
}

div#header {
height:81px;
width:768px;
background-image:url(images/header.gif);
position:relative;
}

div#precommandes {
width:158px;
border-bottom:#000000 solid 1px;
border-right:#000000 solid 1px;
border-top:#000000 solid 1px;
background-image:url(images/precommandes_back.gif);
}

div#panier {
color:#FFFFFF;
float:left;
margin-left:10px;
}

div#connexion {
color:#FFFFFF;
float:right;
margin-right:10px;
}

div#menu {
background-image:url(images/menu.gif);
height:43px;
width:100%;
}

div#menu1 {
height:21px;
width:100%;
text-align:center;
}

div#menu2 {
height:22px;
width:100%;
text-align:center;
}

div#chemin {
height:20px;
width:100%;
text-align:left;
}

div#gauche {
float:left;
width:137px;
}
div#centre {
float:left;
width:494px;
height:800px;
}
div#droite {
float:right;
width:137px;
}
div#corps {
width:768;
height:100%;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
}
div#pied {
width:100%;
}
div#nouv {
background-color:#f9f5ea;
border:#d7b387 solid 1px;
}
div#info {
background-color:#e6edf2;
border:#729ac0 solid 1px;
}
div#recherche {
background-color:#e6edf2;
border:#729ac0 solid 1px;
}
div#marge {
height:20px;
}
div#maj {
background-color:#e6edf2;
border:#729ac0 solid 1px;
}
div#promo {
text-align:center;
}
div#news {
border:#759cc2 solid 1px;
width:456px;
margin : 0 auto;
}
div#pied {
height:20px;
width:768px;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
border-bottom:#000000 solid 1px;
}


<div id="ma_page">
<table height="100%" border="0" cellpadding="0" cellspacing="0" class="tableau">
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
    
    
<div id="principal">

		<div id="header">

				<div id="panier">
				panier
                </div>

				<div id="connexion">
				connexion
                </div>
		</div>


		<div id="menu">
        
				<div id="menu1">
				menu 1
                </div>
                
				<div id="menu2">
				menu 2
                </div>
		
        </div>

		<div id="chemin">
		chemin
        </div>
</div>

<div id="corps">

			<div id="gauche">

					<div id="marge"></div>

					<div id="recherche">
					<img src="images/recherche.gif" width="135" height="20" />
					<br />
					<br />
					<br />
					<br />
					</div>

					<div id="marge"></div>

					<div id="nouv">
					<img src="images/nouv.gif" width="135" height="20" />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					</div>

					<div id="marge"></div>

					<div id="info">
					<img src="images/info.gif" width="135" height="20" />
					<br />
					<br />
					<br />
					<br />
					</div>

			</div>

			<div id="centre">

					<div id="marge"></div>

					<div id="promo">
                    <img src="promo/promo.gif" />
                    </div>

					<div id="marge"></div>

			  <div id="news">
          			<br />
  					<br />
				<br />
  					<br />
  					<br />
  					<br />
  					<br />
			  </div>

			</div>

			<div id="droite">

					<div id="marge"></div>

					<div id="maj">
					<img src="images/maj.gif" width="135" height="20" />
      				<br />
      				<br />
     				<br />
      				<br />
      				<br />
      				<br />
      				<br />
      				<br />
      				<br />
      				<br />
      				<br />
      				<br />
					</div>


			</div>

</div>

<div id="pied">
pied de page
</div>

</td>
<td valign="top">

<br />
<br />
<br />
<br />
<br />
<br />
<br />

    
<div id="precommandes">
<img src="images/precommandes.gif" width="158" height="21" />
plop
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>

</td>
</tr>
</table>





</div>



ça chie sur firefox, mais ça rend exactement ce que je veux sur IE (oui je sais c'est normal que ça bug). j'aimerais que si le contenu de ma div#news augmente, ce soit également la div#corps qui s'étire. Car si je laisse une valeur en pixels à la div#corps et que la div#news s'étire, elle viendra déborder par dessus la div#pied, ...

Je tourne en rond depuis deux jours, comment faire? J'ai lu les tutos avec le truc des colonnes factices, je ne vois pas comment adapter ça à ma situation.
J'ai uploadé la page pour mieux vous rendre compte : http://remi.loyer.free.fr/test_gamespirit/index_page.html

Merci d'avance
Administrateur
Bonjour et bienvenue, Smiley smile

c'est le code qui a dû faire peur Smiley lol
alors que le lien Smiley jap (et Firebug) suffisent à se rendre compte du problème Smiley cligne

Si tu rajoutes l'instruction (ligne 136 à peu près)

div#pied {
[b]clear: both;[/b]
height:20px;
width:768px;
border-left:#000000 solid 1px;
border-right:#000000 solid 1px;
border-bottom:#000000 solid 1px;
}

alors le pied de page ne va pas tolérer d'avoir des blocs flottants aux alentours et va se placer en dessous.
Si tu enlèves les <br /> inutiles, ça aidera à avoir le résultat voulu (privilégie plutôt le remplissage avec du "lorem ipsum")

Pour aller plus loin, la série de 3 articles d'Openweb ( http://www.openweb.eu.org/articles/initiation_flux/ ) est un prérequis de base à mon humble avis Smiley cligne (plus la FAQ et les tutos ici-même)
Sujet clos
Aller à