Salut, ça fait quelques heures que j'essaie en vain de fixer un pied de page, de manière à ce qu'il soit à chaque fois en bas de ma page, même quand il y a peu de texte.
J'ai testé la prop. de FV, mais pas moyen, y'a tjs un élément qui fait tout basculer.
(le fait que mon footer soit hors de ma zone principale). Soit ça fontionne sur Firefox, soit ça fonctionne pas du tout. A force de rajouter et retirer, c'est assez confus, alors, je repars de zéro. Je précise en passant la structure de la page:
Un header width 100%
Un Global width 1000 pxl
Dans le Global, 1 div flottant à gauche, 1 autre à gauche, et 1 à droite
Ensuite mon Footer.
Mon HTML:
Puis Ce cSs:
Une idée?
En ligne ça donne ça presentation.html
Modifié par FranZz (03 Nov 2008 - 11:47)
J'ai testé la prop. de FV, mais pas moyen, y'a tjs un élément qui fait tout basculer.
(le fait que mon footer soit hors de ma zone principale). Soit ça fontionne sur Firefox, soit ça fonctionne pas du tout. A force de rajouter et retirer, c'est assez confus, alors, je repars de zéro. Je précise en passant la structure de la page:
Un header width 100%
Un Global width 1000 pxl
Dans le Global, 1 div flottant à gauche, 1 autre à gauche, et 1 à droite
Ensuite mon Footer.
Mon HTML:
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page d'accueil du site </title>
<meta name="description" content="boule à facettes" />
<meta name="keywords" content=" boule à facettes" />
<link rel="stylesheet" media="screen" type="text/css" id="css" href="style.css" />
</head>
<body>
<div id="header"><div id="dansheader"><img src="images/alogoo.gif" alt="header" /></div></div>
<div id="global">
<div id="gauche">
<div id="menu2">
<div class="indentmenu">
<ul><li><a href="/index.php" class="current">Accueil</a></li>
<li><a href="/news.php">Domaines</a></li>
<li><a href="/conseils.php">Services</a></li>
</ul>
</div>
</div>
</div>
<div id="migauche">
<h3>Présentation</h3>
<div class= "container">
<div class= "couve2"><img src="images/minilogo.gif" alt="Mini logo " width="90" height="90"/></div>
<h1>Qui sommes nous?</h1>
<span class="chapeau"> Lorem ipsum doada liberoLorem ipsum doada libero LorLorem ipsum doada liberoLorem ipsum doada liberoem ipsum doada libero. Fusce ac quam. Donec neque</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. </p>
</div>
</div>
<div id="droite">
<div class="indentmenu"><ul><li><a href="/admin.php" class="current">Admin</a></li></ul></div>
</div>
</div>
<div id= "footer"> Footer || © || Adresse || Tel || Fax || Footer || Footer || Footer || Footer || Footer || </div>
</body>
</html>Puis Ce cSs:
body{margin:0;padding:0;font-family:"Trebuchet MS", Geneva, Verdana, Arial, sans-serif; background-image: url(images/img03.gif); background-repeat: repeat-x; background-position: bottom; }
#header{ text-align:left; vertical-align:text-bottom; background-repeat:repeat-x; background-image:url(images/baground.gif); margin:0; padding:0; }
#dansheader{margin-right:auto;margin-left:auto;width:1100px;text-align:left;}
#global{ overflow:hidden; margin-top:0; margin-left:auto; padding-left:0; width:1000px; margin-right:auto; background-position: bottom; }
#footer{ border-top-width:1px; border-top-style:solid; border-top-color:#666; margin-top:0px; margin-bottom:0; background-color:#EE9803; font-size:12px; color:#FFF; text-align:center; padding-top:10px; padding-bottom:10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #666; height: 10px; }
#gauche{float:left;width:160px;font-size:13px;text-align:center;padding-top:0;padding-left:10px;padding-right:0;margin:0;}
#migauche{ float:left; width:600px; margin-left:20px; margin-top:0; margin-right:20px; padding-top:5px; padding-bottom: 10px; }
#droite{float:left;width:160px;font-size:13px;color:#CCC;margin-top:0;text-align:center;margin-bottom:0;border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:#000;padding-bottom:10px;padding-top:0;}
#menu2{float:left;width:160px;padding-bottom:10px;text-align:right;background-repeat:no-repeat;background-position:top;padding-top:0;}
div.container{color:#333;text-align:left;font-size:14px;font-weight:lighter;margin-left:0;margin-top:0;margin-bottom:0;line-height:1.64em;background-image:url(images/bgh3.jpg);background-repeat:repeat;padding:10px;}
h1{ font-size:17px; color:#EE9803; padding-bottom:4px; margin-bottom:0; margin-top:0; }
h3{ color:#999; margin-top:0; text-align:left; font-size:20px; line-height:25px; margin-bottom:20px; margin-left:0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#CCC; }
.indentmenu{font:lighter 16px Arial;text-align:left;float:none;list-style-type:none;padding-right:0;}
.indentmenu ul{line-height:25px;list-style-type:none;margin:0;padding:0;}
.indentmenu ul li{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;padding:5px 0 0;}
.indentmenu ul li a{ text-decoration:none; color:#EE9803; padding-top:0; list-style-type:none; padding-left:18px; background-image:url(images/afleche.png); background-position:left center; background-repeat:no-repeat; display:block; }
.indentmenu ul li a:hover,.indentmenu ul li .current{ padding-top:0; background-repeat:no-repeat; list-style-type:none; background-image:url(images/afleche.png); background-position:left center; padding-left:20px; display:block; background-color:#F7F7F7; border-bottom-color:#EE9803; padding-bottom:0; color:#444444; }
.couve2{text-decoration:none;border:5px solid #CCC;float:left;margin:2px 15px 0 2px;padding:0;}
.chapeau{font-size:15px;color:#2f8bc7;text-decoration:none;line-height:3ex;list-style-type:none;}
Une idée?
En ligne ça donne ça presentation.html
Modifié par FranZz (03 Nov 2008 - 11:47)
