Hauteur variable

Bonjour a tous, je suis debutant en CSS.

Après avoir fait le tour de tous les tuto du net, je n'est pas reussi a mettre en application ce qui etait ecrit pour mon site ( donc pas la peine de m'envoyé un lien avec un tuto je les est deja lu 100 fois )

voila ce que je souhaite faire:
http://mrtoy.free.fr/vid/prob.jpg

pour ce qui est du centrage de la page pas de probleme,mon principale probleme ce situe sur le fait que les colonnes de droite et de gauche doivent s'adapté suivant la taille du bloc centrale, donc suivant les methodes soit elle ne s'affichai pas, soit elle etait beacoup plus grande que ce qu'elle devrai etre ect ...

J'ai tester 50 methode ( je n'y comprenai plus rien a la fin en melangean toutes les facon de faire lol certain utilisant des bidouilles dautres des tableau, mais rien n'a marché)



en gros j'ai donc :
#CONTENEUR en position absolute pour le centrage
#TETE
#GAUCHEFIXE
#GAUCHEVARIABLE (l'image de fond ce repete)
#CENTRE (l'image de fond ce repete suivant le contenue )
#DROITEFIXE
#DROITEVARIABLE (l'image de fond ce repete)
#PIED

je ne sait pas quoi metre en position absolue relative, je doit faire un tableau en css en utilisant display:table? ou une autre methode ?
je metrai un exemple de code si besoin, mais comme je l'est changé 50 fois je ne sait pas si ca servira a grand chose.
je ne demande pas que quelqu'un m'ecrive tous le code mais si l'on peut me guidé en me disant quelle methode employé ce serat deja beacoup

voila merci a tous
Modifié par mrtoy (14 Jun 2006 - 15:34)

Salut, tu peux essayer cela si ça te conviens :

CSS

div {position: relative;}

#CONTENEUR {
    left: 50%;
    width: 760px;
    margin-left: -380px; /* La moitié de la largeur de ton Conteneur */
}

#TETE {
    width: 760px;
    height: 70px;
    background-color: #333333;
}

#CENTRE {
    width: 760px;
    background-color:#33FF00;
}

#GAUCHEFIXE {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 250px;
    background-color: #666666;
}

#CONTENU {
    left:80px;
    top:0px;
    width: 600px;
    height: auto;
    background-color: #999999;
}

#DROITEFIXE {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 80px;
    height: 250px;
    background-color: #666666;
}

#PIED {
    left:0px;
    top:0px;
    width: 760px;
    height: 40px;
    background-color: #333333;
}

BODY

<div id="CONTENEUR">
    <div id="TETE"></div>
    <div id="CENTRE">
        <div id="GAUCHEFIXE"></div>
        <div id="CONTENU">
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br />
        </div>
        <div id="DROITEFIXE"></div>
    </div>
    <div id="PIED"></div>
</div>

Évidemment, tu es mieux de ne pas mettre des majuscule, utilise des minuscules pour tes nom de div etc... Si t uas un problème, n'hésite pas
Modifié par Zial (14 Jun 2006 - 17:52)

merci pour ta réponse ,

je m'inspiré de ce que tu a fait et bidouille un peut pour que ca marche (je vais faire une grande image de font relian l'image gauchevariable et droitevariable qui ce repete ), je vous enverai le code une foi fini