Bonjour a tous,
Alors voici mon problème http://www.peau-rouge.fr/binary_juice/ :
en gros je veux que ce .....BIP.... de footer reste en bas de ma page et qui si mon contenu dépasse la hauteur de ma page qu'il se place en dessous , le tout sous ff ie7 ie6 en XHTML Strict 1.0...
Un grand merci à celui qui me donnera la solution magique, bon je suppose que ce sujet a déjà été posté alors pas de "demande a ton meilleur ami GOOGLE" 
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BINARY JUICE :: Présentation</title>
<link href="css/styles_layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/mootools.js"></script>
<script type="text/javascript" src="javascript/menu.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
<ul id="kwicks">
<li><a id="kwick_red" class="kwick download" href="presentation.php"></a></li>
<li><a id="kwick_orange" class="kwick documentation" href="realisations.php"></a></li>
<li><a id="kwick_yellow" class="kwick blog" href="competences.php"></a></li>
<li><a id="kwick_green" class="kwick trac" href="contacts.php"></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content_titre"><img src="images/titre_binary.jpg" alt="Binary Juice" width="213" height="31" /></div>
<div id="content_text">
<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem.<br />
<br />
<img src="images/puce.gif" alt="puce" width="9" height="8" /><span class="commentaire">Dernière réalisation</span><br />
</p>
</div>
<div id="maquette"><img src="images/maquette02.jpg" alt="maquette 01" /></div>
<div id="content_commentaire">
<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem.</p>
<p class="commentaire_text"> </p>
</div>
</div>
<div id="footer">
<div id="footer_text">
<p class="footer_text">All Content Copyright Binary Juice / Wojciech Pawlak & Clément Divry 2008</p>
</div>
</div>
</body>
</html>
CSS:
html, body {
background-color: #e6e7e4;
height:100%;
min-height:800px;
width:100%;
margin:0;
padding:0;
}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#4a4a4a;
text-align:justify;
margin:0;
padding:0;
}
#header{
position:absolute;
background-image:url(../images/bg_header.jpg);
background-repeat:repeat-x;
width:100%;
height:100px;
z-index:1;
}
#menu{
position:absolute;
left:40px;
height:95px;
z-index:2;
}
#kwicks {
position:absolute;
display:block;
width:508px;
background-image:url(../images/bg_ul.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
}
#kwicks li {
list-style-type: none;
display:block;
float:left
}
#kwicks .kwick {
list-style-type: none;
float:left;
display:block;
width:126px;
height:95px;
}
#kwick_red {
background-image:url(../images/bt_presentation.jpg);
background-repeat:no-repeat;
}
#kwick_orange {
background-image:url(../images/bt_realisations.jpg);
background-color:#CC6633;
}
#kwick_yellow {
background-image:url(../images/bt_competences.jpg);
background-color:#9933CC;
}
#kwick_green {
background-image:url(../images/bt_contacts.jpg);
background-color:#FF6666;
}
#content{
position:absolute;
top:100px;
z-index:1;
min-height:750px;
}
#content_titre{
position:absolute;
top:30px;
left:40px;
z-index:2;
}
#content_text{
position:absolute;
width:476px;
top:84px;
left:70px;
z-index:2;
border-bottom:solid 2px #4a4a4a;
}
#maquette{
position:absolute;
top:265px;
left:64px;
z-index:2;
}
#content_commentaire{
position:absolute;
width:476px;
top:560px;
left:70px;
z-index:3;
}
.jaune_gras{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ff9600;
font-weight:bold;
}
.gris_gras{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#4a4a4a;
font-weight:bold;
}
.commentaire{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#4a4a4a;
}
.commentaire_text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#4a4a4a;
}
.footer_text{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
}
#footer{
position:absolute;
bottom:0;
background-image:url(../images/bg_footer.jpg);
background-repeat:repeat-x;
width:100%;
height:44px;
z-index:1;
}
#footer_text{
position:absolute;
top:20px;
left:100px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
z-index:2;
}
Modifié par climzerland (26 Apr 2008 - 14:14)
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org