salut ! bon je pensais avoir tout compris mais en fait non...
donc je reformule la question :
Quel paramètre dois je changer dans la CSS pour que la DIV "content"
pousse les 2 DIVs "footer" et "reflet" lorsque le texte dépasse la hauteur initiale de la DIV, au lieu de passer en dessous ?
( C'est pour un autre site cette fois )
Donc , la page en question :
http://kompleet.free.fr/abovo/index.html
Le code Html de la page :
<html>
<head>
<title>interface_site_abovo_aplati</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="abovostyle.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="MM_preloadImages('images/up/u_news.jpg','images/up/u_bio.jpg','images/up/u_disco.jpg','images/up/u_mp3.jpg','images/up/u_live.jpg','images/up/u_interview.jpg','images/up/u_contact.jpg','images/up/u_links.jpg')">
<div id="Tableau_01">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="274">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="274"></embed>
</object>
</div>
<div id="logo-left">
<img src="images/logo_left.jpg" width="136" height="33" alt="">
</div>
<div id="news">
<a href="news.htm" onMouseOver="MM_swapImage('Image1','','images/up/u_news.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/news.jpg" alt="" name="Image1" width="52" height="33" border="0" id="Image1"></a>
</div>
<div id="bio">
<a href="bio.htm" onMouseOver="MM_swapImage('Image2','','images/up/u_bio.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/bio.jpg" alt="" name="Image2" width="94" height="33" border="0" id="Image2"></a>
</div>
<div id="disco">
<a href="disco.htm" onMouseOver="MM_swapImage('Image3','','images/up/u_disco.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/disco.jpg" alt="" name="Image3" width="116" height="33" border="0" id="Image3"></a>
</div>
<div id="mp3">
<a href="mp3.htm" onMouseOver="MM_swapImage('Image4','','images/up/u_mp3.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/mp3.jpg" alt="" name="Image4" width="40" height="33" border="0" id="Image4"></a>
</div>
<div id="live">
<a href="live.htm" onMouseOver="MM_swapImage('Image5','','images/up/u_live.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/live.jpg" alt="" name="Image5" width="43" height="33" border="0" id="Image5"></a>
</div>
<div id="interview">
<a href="interview.htm" onMouseOver="MM_swapImage('Image6','','images/up/u_interview.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/interview.jpg" alt="" name="Image6" width="89" height="33" border="0" id="Image6"></a>
</div>
<div id="contact">
<a href="contact.htm" onMouseOver="MM_swapImage('Image7','','images/up/u_contact.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/contact.jpg" alt="" name="Image7" width="77" height="33" border="0" id="Image7"></a>
</div>
<div id="links">
<a href="links.htm" onMouseOver="MM_swapImage('Image8','','images/up/u_links.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/links.jpg" alt="" name="Image8" width="53" height="33" border="0" id="Image8"></a>
</div>
<div id="content">
<p>HOME</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum tempor nibh. Cras sapien eros, aliquam vel, molestie nec, ultrices vel, dui. Nulla facilisi. Donec tempus fringilla massa. Cras congue mauris sed lectus. Aenean lorem urna, vestibulum in, imperdiet egestas, rutrum eu, nunc. Aenean mattis purus vitae justo. Ut pellentesque vulputate justo. Morbi et leo id arcu ornare fermentum. Phasellus iaculis elit quis arcu. Maecenas wisi. </p>
<p>Fusce enim. Sed ullamcorper tellus fermentum nisl. In eget nibh nec nisl accumsan sollicitudin. Quisque gravida enim sed quam. Proin eget turpis ac tellus sodales fermentum. Proin sodales lacus sit amet magna. Ut malesuada erat et pede. Pellentesque vitae elit. Aliquam massa erat, vestibulum et, facilisis varius, adipiscing eu, lacus. Nunc imperdiet lacus ac massa. Proin suscipit metus nec nunc. Curabitur et turpis. Aenean bibendum justo vitae quam. </p>
<p>Aliquam suscipit, odio nec gravida varius, mauris urna mattis odio, quis sodales wisi augue vel mauris. Aenean iaculis nibh. Sed consequat magna id arcu. Curabitur euismod. In ultrices, erat ut iaculis interdum, est ligula lobortis lacus, vel dapibus orci neque vel nibh. Proin augue. Nam euismod venenatis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In velit massa, accumsan non, venenatis vitae, dictum commodo, nunc. Phasellus ut felis. Quisque luctus dapibus nulla. Pellentesque sapien eros, auctor vel, interdum ac, laoreet fermentum, ligula. Phasellus quis ante. Integer libero orci, accumsan iaculis, viverra vitae, varius quis, magna. In viverra ante nec augue. Etiam accumsan viverra justo. Praesent nec turpis luctus urna tristique egestas. Maecenas at lorem.</p>
<p> </p>
</div>
<div id="footer">
<img src="images/footer.jpg" width="700" height="40" alt="">
</div>
<div id="reflet">
<img src="images/reflet.jpg" width="700" height="86" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
La feuille CSS :
/* CSS Document */
#Tableau_01 {
position:relative;
left:0px;
top:0px;
width:700px;
height:832px;
}
#flash {
position:absolute;
left:0px;
top:0px;
width:700px;
height:274px;
}
#logo-left {
position:absolute;
left:0px;
top:274px;
width:136px;
height:33px;
}
#news {
position:absolute;
left:136px;
top:274px;
width:52px;
height:33px;
}
#bio {
position:absolute;
left:188px;
top:274px;
width:94px;
height:33px;
}
#disco {
position:absolute;
left:282px;
top:274px;
width:116px;
height:33px;
}
#mp3 {
position:absolute;
left:398px;
top:274px;
width:40px;
height:33px;
}
#live {
position:absolute;
left:438px;
top:274px;
width:43px;
height:33px;
}
#interview {
position:absolute;
left:481px;
top:274px;
width:89px;
height:33px;
}
#contact {
position:absolute;
left:570px;
top:274px;
width:77px;
height:33px;
}
#links {
position:absolute;
left:647px;
top:274px;
width:53px;
height:33px;
}
#content {
position:absolute;
left:0px;
top:307px;
width:700px;
height:399px;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:justify;
overflow:auto;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
}
#footer {
position:absolute;
left:0px;
top:706px;
width:700px;
height:40px;
}
#reflet {
position:absolute;
left:0px;
top:746px;
width:700px;
height:86px;
}
body {
background-color:#000000;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
[/i][/i][/i][/i][/i][/i]
Modifié par kompleet (12 Sep 2005 - 11:52)
