Bonjour à tous,
voilà je ne comprends pas trop j'ai un problème de positionnement et ça faisait longtemps que je n'avais pas buté sur ce genre de cas.
en fait la page d'accueil est nickel, mais pour les autres pages quand je met du texte plus long dans la page ou dans ma colonne avec scroll, le bas de page ne suit pas...
voilà 2 impressions d'écrans pour vous faire une idée :
La page OK :
http://img148.imageshack.us/my.php?image=correct7iy.gif
La page explosée :
http://img123.imageshack.us/my.php?image=probleme3ii.gif
Et voilà mon code :
HTML :
<body>
<div id="conteneur">
<div id="header">
<div id="menu">
<ul>
<li class="lien1"><a id="item1" href="#"></a></li>
<li class="lien2"><a id="item2" href="#"></a></li>
<li class="lien3"><a id="item3" href="#"></a></li>
<li class="lien4"><a id="item4" href="#"></a></li>
<li class="lien5"><a id="item5" href="#"></a></li>
<li class="lien6"><a id="item6" href="#"></a></li>
</ul>
</div>
</div>
<div id="col_gauche"><?php include("inc/pub.inc"); ?></div>
<div id="col_milieu">
<div id="content">
<div id="contenu">
<?php include("inc/contenu_accueil.inc"); ?>
</div>
<div id="colonne">
<?php include("inc/colonne.inc"); ?>
</div>
</div>
<div id="baseline"></div>
</div>
<div id="col_droite"></div>
<div id="legende"><img src="images/fleche.gif"> Cliquez sur les photos pour un affichage en grande taille</div>
<div id="pied"><?php include("inc/pied.inc"); ?></div>
</div>
</body>
Et la partie importante du CSS :
/* __________ BODY __________ */
body {
margin: 0;
padding: 0;
background: #105C5C;
line-height: 16px;
}
/* __________ CONTAINER __________ */
#conteneur
{
width: 800px;
height: 620px;
margin: 0px;
text-align: left;
background-color: #88AFB4;
border: 1px solid white;
position:relative;
}
/* __________ HEADER __________ */
#header
{
width: 800px;
height: 92px;
left: 0px;
background: transparent url(../images/logo.gif) top left no-repeat;
}
/* __________ LOGO __________ */
#logo
{
width: 210px;
height: 92px;
left: 0px;
background: transparent url(../images/logo.gif) top left no-repeat;
}
#col_gauche
{
position:absolute;
top:92px;
margin-left:4px;
margin-top:20px;
width:209px;
height: 460px;
/* border: 1px solid red; */
background-color: #88AFB4;
}
#col_milieu
{
position:absolute;
top:92px;
margin-left:209px;
width:566px;
height: 460px;
background-image: url(../images/fond.gif);
}
#col_droite
{
position:absolute;
padding-top:40px;
top:92px;
margin-left:775px;
width:25px;
height: 460px;
background-color: #88AFB4;
background: transparent url(../images/colonne_droite.gif) no-repeat;
}
/* __________ CONTENT __________ */
#content {
text-align: justify;
line-height: 15px;
margin-bottom: -30px;
}
/* __________ CONTENU __________ */
#contenu
{
top:100px;
float:left;
margin-left:0px;
width:372px;
color: #105C5C;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
padding: 20px 5px 0px 10px;
}
/* __________ COLONNE __________ */
#colonne {
margin-left:400px;
width: 150px;
height: 415px;
background-color: #EBF6F2;
border: 1px solid #B6E0D0;
scrollbar-face-color: #258989;
scrollbar-shadow-color: #3F9797;
scrollbar-highlight-color: #A5CECE;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
overflow: auto;
color: #105C5C;
font-size: 11px;
font-family: Arial, Tahoma, Verdana, sans-serif;
padding: 10px 5px 10px 0px;
}
/* __________ BASELINE __________ */
#baseline
{
width:591px;
height:22px;
position:absolute;
bottom: 0;
left : 0px;
background: transparent url(../images/bas_cadre.gif) no-repeat;
background-color:#88AFB4;
}
#legende
{
width:775px;
height:20px;
position:absolute;
top: 550px;
left : 0px;
text-align:right;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
color:#FFFFFF;
}
/* __________ PIED __________ */
#pied
{
width:800px;
height:30px;
position: absolute;
bottom: 0;
margin:0;
left: 0px;
background: url(../images/pied.gif) no-repeat;
background-color:#00879A;
color:#FFFFFF;
padding-top:5px;
}
J'n'aime pas envoyer de telles longueurs de code mais là je bloque !
Merci d'avance pour votre aide ;-)
Gregg
Balises css
