all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le mercredi 27 août 2008 à 02 h 18 par RNDM.

Salut all

Voilà je dois faire une site composé de 3 cellules: 1 header, 1 zone de contenu et 1 footer disposées de manière a avoir 1 colonne et 3 lignes.
le header et le footer doivent avoir des tailles fixes en hauteur et êtres a 100% en largeur, jusque la ça va mais je voudrais que la zone de contenu placée entre le header et le footer occupe tout l'espace restant (en hauteur) même en cas de redimentionnement de la page par l'utilisateur.

j'ai tenté d'utiliser des tableaux des div combinés avec du CSS mais sans résultat :(
je pense qu'il faudrait utiliser du javascript mais je ne sais pas comment m'y prendre.
Avez vous d'autres solutions?
Merci

• participer

Message publié le mercredi 27 août 2008 à 02 h 37 par junglist. www.p1nk-00.com

Soit j'ai mal compris ta question, ou alors soit c'est extrêmement simple à faire en CSS.


FICHIER.CSS

.header
{
height: ??px;
width: 100%;
}

.zone de contenu
{
height: auto;
width: 100%;
}

footer
{
height: ??px;
width: 100%;
}


FICHIER.HTML ou FICHIER.PHP

<div class="header">

**contenu du header**

</div>

<div class="zone de contenu">

**contenu de la zone de contenu**

<div class="footer">

**contenu du footer**

</div>

</div>


(remplacer ?? par la valeur de ton choix)

• participer

Message publié le mercredi 27 août 2008 à 20 h 25 par RNDM.

argh j'ai du mal formuler ma question dsl
dans la structure ça marche mais ce que j'aurais voulu c'est que la div "footer" se trouve tout en bas de la page, et que la div "contenu" s'étende du bord inferieur de la div header jusqu'au bord superieur de la div footer et ce, même si la page est redimentionnée.
avec "height: auto;" ça n'as pas l'air de marcher

• participer

Message publié le jeudi 28 août 2008 à 00 h 28 par junglist. www.p1nk-00.com

As-tu essayé de définir la hauteur de ta div "contenu" en % ?

En principe ça devrait t'amener au résultat souhaité ...

• participer

Message publié le jeudi 28 août 2008 à 15 h 20 par mdr.

dans ce cas un tableau pourrait plus s'imposer
dans une version light :
<table> <tr><td width="100%" height="15%">...</td></tr> <tr><td width="100%" height="70%">...</td></tr> <tr><td width="100%" height="15%">...</td></tr> </table>

• participer

Message publié le jeudi 28 août 2008 à 19 h 36 par RNDM.

Salut
Ouai c'est bon ça marche avec un tableau.
J'ai changé les valeurs "height" pour "header" et "footer" en pixels pour avoir des tailles fixes.

<table height="100%" width="100%">
<tr><td style="background-color:'red';" width="100%" height="100">...</td></tr>
<tr><td style="background-color:'yellow';" width="100%" height="100%">...</td></tr>
<tr><td style="background-color:'blue';" width="100%" height="100">...</td></tr>
</table>

En fait c'était vraiment tout con -_-'
Merci à vous!

P.S.: peut on avoir le même résultat avec des div? ( vous cassez pas la tête la dessus la version talbeau me convien parfaitement mais c'est juste pour pousser la question jusqu'au bout ;) )

• participer

Message publié le vendredi 29 août 2008 à 14 h 06 par TheoDaOuf.

Tu peux clairement avoir le même résultat avec des DIV. Il faut juste que le taille de la div contenu s'adapte à ce qu'elle contient, j'ai bien compris ? Si je zappe pas je te posterai un exemple ce soir en rentrant ;)

Bonne journée

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.