| Auteur |
|
| Ironik |
|
| 3 Posts |
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
|
|
| Ironik |
|
| 3 Posts |
Ya vraiment personne qui peut m'aider? 
|
|
| Ironik |
|
| 3 Posts |
Up, c'est vraiment très important et je nage complètement, HELP
|
|
| Felipe |
|
| Administrateur 4275 Posts |
Bonjour et bienvenue, 
c'est le code qui a dû faire peur 
alors que le lien  (et Firebug) suffisent à se rendre compte du problème 
Si tu rajoutes l'instruction (ligne 136 à peu près)
div#pied {
clear: both;
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 (plus la FAQ et les tutos ici-même)
Supercalifragilisticexpealidocious
|
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe
Nikozen : Hébergement - Réalisation : Alsacreations.fr
