Ave à tous,
Je me permets de soumettre cette solution à un sujet qui apparemment a déjà posé problème à plusieurs alsanautes et qui m'a fait pas mal chercher.
Dans les renvois que donne Raphaël et sur d'autres sites, on retrouve toujours la colonne de gauche et de droite de largeur fixe et la colonne centrale, de largeur variable. Mais quid lorsque l'on veut la colonne centrale fixe et que l'on veuille également des backgrounds différents sur la 1ère et 3ème colonnes ? (Il faut donc remplir les <div> gauche et droite au maximum) ?
Il y a 2 solutions :
Soit le centrage absolu de la colonne centrale proposé par Raphaël :
Soit un centrage relatif : voir code ci-dessus
L'astuce vient du fait que, outre les marges négatives, ce n'est pas chaque colonne qu'il faut définir, comme j'ai en vain, essayer de faire, avec un "overflow: hidden" mais le tout. Merci à Noisequick [http://forum.alsacreations.com/topic.php?id=4&tid=19825&s=3+colonnes
Modifié par Polhux (26 Feb 2007 - 14:53)
Je me permets de soumettre cette solution à un sujet qui apparemment a déjà posé problème à plusieurs alsanautes et qui m'a fait pas mal chercher.
Dans les renvois que donne Raphaël et sur d'autres sites, on retrouve toujours la colonne de gauche et de droite de largeur fixe et la colonne centrale, de largeur variable. Mais quid lorsque l'on veut la colonne centrale fixe et que l'on veuille également des backgrounds différents sur la 1ère et 3ème colonnes ? (Il faut donc remplir les <div> gauche et droite au maximum) ?
Il y a 2 solutions :
Soit le centrage absolu de la colonne centrale proposé par Raphaël :
/* Soit la colonne centrale = 780 px */
div#conteneur {
position:relative;
height:100%;
[b]overflow:hidden;[/b]
}
Centrage absolu de la colonne centrale (les 2 fonctionnent)
div#blocmilieu {
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
height:100%;
}
Centrage relatif de la colonne centrale (les 2 fonctionnent)
div#blocmilieu {
position:relative;
width: 780px;
margin-left: -390px;
margin-left:auto;
margin-right:auto;
}
div#blocgauche {
float: left;
width: 50%;
margin-left: -390px;
background-image: url(fond_gauche);
height:100%;
}
div#blocdroit{
float: right;
width: 50%;
margin-right: -390px;
background-image: url(fond_droit.jpg);
height:100%;
}
div#piedpage1 {
height: 80px;
clear: both;
}
div#piedpage2 {
position: absolute;
bottom: 0; left: 0;
width: 100%;
}
<!--[if lte IE 6]>
<style type="text/css">
div#page {
height: 100%;
}
div#piedpage2 {
bottom: -1px;
/* Corrige un décalage d'1px par rapport au bord inférieur (source du bug IE ?) */
}
</style>
<![endif]-->
Et pour le code XHTML
<div id="conteneur">
<div id="blocmilieu"><h1>Colonne centrale</h1></div>
<div id="blocgauche"><h1>Colonne de gauche</h1></div>
<div id="blocdroit""><h1>Colonne de droite</h1></div>
<div id="piedpage1">
<div id="piedpage2">Ceci est un pied de page</div>
</div>
</div>
Soit un centrage relatif : voir code ci-dessus
L'astuce vient du fait que, outre les marges négatives, ce n'est pas chaque colonne qu'il faut définir, comme j'ai en vain, essayer de faire, avec un "overflow: hidden" mais le tout. Merci à Noisequick [http://forum.alsacreations.com/topic.php?id=4&tid=19825&s=3+colonnes
Modifié par Polhux (26 Feb 2007 - 14:53)
