Bonjour,

J'ai fais une feuille de style pour ma page internet mais j'ai des problemes au niveau de ma mise en page.

En effet le footer ne restait pas en bas de la page.
En recherchant bien , j'ai trouvé pas mal d'article qui parlais de sa sur internet, alors j'ai tester chacune de leur propostion , pour finalement arrivé a quelque chose.

Pour mon footer je l'ais mis en position absolute et il reste bien mais voici le probleme (je met un lien vers une image sa sera plus simple).

http://castellibobo.free.fr/chem.jpg

le footer reste en bas mais prend plus que la moitié de la page. lorsque je lui donne l'attribut width=100% il depasse de la page.

De plus j'aimerai que le bloc au dessus (main-copy) continu jusqu'en bas et que j'ai pas du gris en dessous le bloc

voila comment le site est architecturé:

<div id=global>
<div id="header">
<div class="superHeader"></div>
<div class="midHeader"></div>
<div class="subHeader"></div>
</div>
<div id="main-copy"></div>
<div id=footer></div>
</div>

et voici ma feuille de style:

body {
  color: black;
  background-color: rgb(240,240,240);
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 71%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
height: 100%;
}

html > body {
  font-size: 8.5pt;
}


/* ##### Header ##### */

.superHeader {
  color: white;
  background-color: rgb(100,135,220);
  height: 2em;
}


.superHeader .left {
  position: absolute;
  left: 1.5mm;
  top: 0.75ex;
}

.superHeader .right {
  position: absolute;
  right: 1.5mm;
  top: 0.75ex;
}

.midHeader {
  color: rgb(39,78,144);
  background-color: rgb(140,170,230);
}


.subHeader {
  color: white;
  background-color: rgb(0,51,153);
  margin: 0;
  padding: 1ex 1ex 1ex 1.5mm;
}


.superHeader .highlight, .subHeader .highlight {
  color: rgb(253,160,91);
  background-color: transparent;
}

#main-copy {
  color: black;
  background-color: white;
  text-align: justify;
  line-height: 1.4em;
  margin: 0 0 0 5em;
  padding: 0.5mm 5mm 5mm 5mm;
  border-left: 1px solid rgb(153,153,153);
}

#global{
  position: relative;
min-height: 100%
height: 100%;

}
/* ##### Footer ##### */

#footer {
  color: white;
  background-color: rgb(100,135,220);
  font-size: 91%;
  margin: 0 ;
  padding: 1em 2.5mm 2.5ex 2.5mm;
  clear: both;  
position: absolute;  
   bottom: 0; 


}

#footer .left {
  line-height: 1.45em;
  float: left;
  clear: left;
}

#footer .right {
  text-align: right;
  line-height: 1.45em;
}

Si quelqun a une idée que comment m'y prendre ou d'ou peut provenir le probleme , sa serait gentil
merci encore

Bonjour,

Ce que tu cherches à faire n'est pas simple, surtout pour rester compatible avec les différents navigateurs.
Sur ce sujet, http://www.alsacreations.com/ (une bonne référence en matière de compatibilité et d'accessibilité) propose une solution. Ce n'est pas simple mais ça marche.
Faudra chercher sur leur site, car je n'arrive pas à retrouver l'article, mais c'est bien leur script que j'avais testé avec succès.

EDIT je viens de retrouver le lien http://forum.alsacreations.com/faq/faq- ... tenu-.html

Aparemment ils ont abandonné leur propre script et ils ne donnent plus que des liens, en déconseillant la méthode.
Pour ma part, j'avais testé mais pas appliqué sur mes sites. Trop de bin's ...et plus urgent à faire.

d'accord merci encore