Bonjour à tous,
Pour une fois, c'est sous Firefox que ça ne colle pas (en général c'est plutôt l'inverse qui m'arrive).
Il s'agit donc d'un problème de longueur des colonnes que je désirerais voir étendues à 100% verticalement.
J'ai pensé tout d'abord facilité : le truc de l'image de fond verticale à 1px qui se répète dans le <body>, seulement, il m'est impossible de l'utiliser puisque j'ai une mise en page centrée, ainsi qu'une illustration de fond (fixed).
J'ai essayé le box model hack, mais apparemment IE s'en passe très bien, tout colle sans celui-ci (ou avec, en fait on dirait que ça ne change strictement rien).
Donc en résumé, IE m'allonge mes colonnes jusqu'au bas de page, mais pas Firefox.
Voici un aperçu de mon code CSS.
ainsi que de mon code HTML
Je travaille à faire une maquette sans les visuels (je ne peux pas les montrer) pour que ce soit plus évident à comprendre. Je vais la poster sous peu.
Merci d'avance pour toute aide / suggestion !
PS. Les xxx c'est juste pour masquer quelques trucs
Modifié par Corinne (06 Jun 2006 - 22:23)
Pour une fois, c'est sous Firefox que ça ne colle pas (en général c'est plutôt l'inverse qui m'arrive).
Il s'agit donc d'un problème de longueur des colonnes que je désirerais voir étendues à 100% verticalement.
J'ai pensé tout d'abord facilité : le truc de l'image de fond verticale à 1px qui se répète dans le <body>, seulement, il m'est impossible de l'utiliser puisque j'ai une mise en page centrée, ainsi qu'une illustration de fond (fixed).
J'ai essayé le box model hack, mais apparemment IE s'en passe très bien, tout colle sans celui-ci (ou avec, en fait on dirait que ça ne change strictement rien).
Donc en résumé, IE m'allonge mes colonnes jusqu'au bas de page, mais pas Firefox.
Voici un aperçu de mon code CSS.
*, p, body, ul, li, img, form, input, hr { margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #255317 url(images/nelson01.gif) 30px 95% no-repeat fixed; }
#container {
position: relative;
margin: 0 auto 0 auto;
width: 752px;
background: url(images/container_fd.gif) repeat-y;
min-height: 100%;
height: 100%;
}
hr { clear: both; visibility: hidden; }
/* ======================================== Text */
#content {
color: #4D4033;
float: left;
width: 364px; }
.banner { margin: 0 0 22px 0; }
/* ==== Blog */
.post_header, #content p {
padding: 0 16px 12px 16px;
}
.post_content {
clear: both;
padding: 12px 0 0 0;
margin: 0 3px 3px 3px;
background: #FFFFFF url(images/barre_brune.gif) bottom repeat-x;
}
/* ======================================== Yellow Menu */
#menu {
float: left;
width: 189px;
padding: 263px 0 0 0;
background: url(images/affiche.gif) no-repeat;
}
#menu a {
display: block;
margin: 0 3px 0 0;
padding: 0 8px 0 8px;
height: 28px;
line-height: 28px;
background: url(images/barre_brune.gif) bottom repeat-x;
text-decoration: none;
color: #4D4033; }
#menu a:hover { background-color: #FFF781; }
/* ======================================== Brown Menu Top */
#side {
float: right;
width: 199px;
margin: 36px 0 0 0;
color: #FFF12D;
background: url(images/barre_jaune.gif) top repeat-x;
}
#side a {
color: #FF9C3E;
text-decoration: none; }
#side a:hover { color: #FFF12D; }
/* ======================================== Brown Menu Bottom */
#side_menu {
position: absolute;
width: 199px;
top: 290px;
padding: 6px 0 0 0;
background: url(images/barre_jaune.gif) top repeat-x;
list-style-type: none;
}
#side_menu li { margin: 0 0 0 6px; }
ainsi que de mon code HTML
<body>
<div id="container">
<div id="content">
<img src="images/banner/banner.gif" class="banner" alt="à la une" />
<hr />
<div class="post_header">
<div class="post_title">
<h2><a href="#">L'affiche --- </a></h2>
</div>
</div>
<div class="post_content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor <a href="#">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <a href="#">voluptua</a>. </p>
<img src="images/photos/phototest.jpg" alt="phototest" />
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><a href="3">Continuer la lecture </a></p>
</div>
<hr />
<div class="post_header">
<div class="post_title">
<h2><a href="#">L'affiche --- </a><br />
</div>
</div>
<div class="post_content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor <a href="#">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <a href="#">voluptua</a>. </p>
<img src="images/photos/phototest.jpg" alt="phototest" />
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><a href="3">Continuer la lecture </a></p>
</div>
<hr />
</div>
<div id="menu">
<ul>
<li><a href="#">---</a></li>
</ul>
</div>
<div id="side">
<div class="side_bar">
<p><a href="#">Contactez-nous</a></p>
</div>
<ul id="side_menu">
<li><a href="#">sjkdhjhsda</a></li>
<li><a href="#">asjdjashdahsd</a></li>
<li><a href="3">skdjkaljsdjk</a></li>
</ul>
</div>
</div>
</body>Je travaille à faire une maquette sans les visuels (je ne peux pas les montrer) pour que ce soit plus évident à comprendre. Je vais la poster sous peu.
Merci d'avance pour toute aide / suggestion !
PS. Les xxx c'est juste pour masquer quelques trucs
Modifié par Corinne (06 Jun 2006 - 22:23)
