Footer toujours en bas sauf... Corrigez mon code !
Publié : 29 janv. 2007, 17:20
Bonjour à tous,
Je bloque sur la fin toute proche d'un développement (enfin je pense).
Quelq'un peut-il m'aider ?
Je cherche à ce que le footer soit toujours en bas de l'écran sauf si le contenu du menu (partie gauche) ou de la page (partie droite) est trop longue et dépasse de l'écran.
J'ai presque réussi mais j'ai un bug d'affichage du fond.
Ca doit être compatible IE6/Mozilla.
Voici mon code :
Merci à tous !!
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Je bloque sur la fin toute proche d'un développement (enfin je pense).
Quelq'un peut-il m'aider ?
Je cherche à ce que le footer soit toujours en bas de l'écran sauf si le contenu du menu (partie gauche) ou de la page (partie droite) est trop longue et dépasse de l'écran.
J'ai presque réussi mais j'ai un bug d'affichage du fond.
Ca doit être compatible IE6/Mozilla.
Voici mon code :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Divers */
html,
body,
#container {
height:100%;
}
body{
padding:0;
margin:0;
}
#container {
width:800px;
margin:0 auto 0 auto;
position:relative;
background:pink;
color: #000000;
}
/* Header */
#header{
position:absolute;
top:0;
left:0;
width:100%;
overflow:hidden;
height:70px;
background:#FF0000;
color: #000000;
}
#clearheader{
height:70px;
}
/* Centre */
#centre{
min-height:100%;
margin-left:160px;
background:#F8E7EC;
margin-bottom:-40px;
color:#000000;
}
/* Menu */
#menu {
position:relative;
width:157px;
margin-left:-158px;
margin-top:70px;
float:left;
}
/* Footer */
#footer {
width:100%;
clear:both;
height:40px;
background-color: #FF8080;
position:relative;
}
#clearfooter{
clear:both;
}
</style>
<!--[if IE]>
<style>
* html #centre{
height:100%;
margin-left:157px;
}
* html #menu {
margin-right:-3px;
}
* html #page {
height:1%;
margin-bottom:12px;
}
</style>
<![endif]-->
</head>
<body><div id="container">
<div id="header">Header</div>
<div id="centre">
<div id="menu">
<p>Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here : </p>
</div>
<div id="clearheader"></div>
<div id="page">
<p>Centre Content goes here</p>
<p>2 column layout - any column can be the longest. Footer will stay at bottom
of window unless content is greater then it stays at bottom of document.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape
6.2). Opera 6 doesn't like the footer but it's usable.I expect mac and other
browsers will fall over. (<strong>*Update*</strong> Mac Firebird and Mac
Netscape 6 & 7 (OS9) look perfect in all cases. Mac IE 5.1.7 & IE5.2.3
and Safari1.1.1 don't like the footer and render it at bottom of the longest
column. However the columns works fine ane the effect is still usable. Thanks
to a number of people for checking this out for me as I don't have a mac
to test on.)</p>
<p>Centre Content goes here</p>
<p>2 column layout - any column can be the longest. Footer will stay at bottom
of window unless content is greater then it stays at bottom of document.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape
6.2). Opera 6 doesn't like the footer but it's usable.I expect mac and other
browsers will fall over. (<strong>*Update*</strong> Mac Firebird and Mac
Netscape 6 & 7 (OS9) look perfect in all cases. Mac IE 5.1.7 & IE5.2.3
and Safari1.1.1 don't like the footer and render it at bottom of the longest
column. However the columns works fine ane the effect is still usable. Thanks
to a number of people for checking this out for me as I don't have a mac
to test on.)</p>
<p>Centre Content goes here</p>
<p>2 column layout - any column can be the longest. Footer will stay at bottom
of window unless content is greater then it stays at bottom of document.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape
6.2). Opera 6 doesn't like the footer but it's usable.I expect mac and other
browsers will fall over. (<strong>*Update*</strong> Mac Firebird and Mac
Netscape 6 & 7 (OS9) look perfect in all cases. Mac IE 5.1.7 & IE5.2.3
and Safari1.1.1 don't like the footer and render it at bottom of the longest
column. However the columns works fine ane the effect is still usable. Thanks
to a number of people for checking this out for me as I don't have a mac
to test on.)</p>
<p>Centre Content goes here</p>
<p>2 column layout - any column can be the longest. Footer will stay at bottom
of window unless content is greater then it stays at bottom of document.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape
6.2). Opera 6 doesn't like the footer but it's usable.I expect mac and other
browsers will fall over. (<strong>*Update*</strong> Mac Firebird and Mac
Netscape 6 & 7 (OS9) look perfect in all cases. Mac IE 5.1.7 & IE5.2.3
and Safari1.1.1 don't like the footer and render it at bottom of the longest
column. However the columns works fine ane the effect is still usable. Thanks
to a number of people for checking this out for me as I don't have a mac
to test on.)</p>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">Footer </div>
</div></body>
</html>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
