Problème de correspondance bottom de deux blocs

Bonjour,
Je suis actuellement en train de faire un site pour une entreprise en php, html et css.
je l'ai construit sous formes de div que je paramettre en css, jusque la tout va bien (en tout cas sous safari, puisque je le fais en local sur mon ordi).

le site est impécable, vu d'en haut de page, le probleme est que j'appelle mes différents contenus sur la meme page dans le meme bloc, ceci marche encore bien,
le probleme est que, mon bloc étant plus ou moins long en fonction de son contenu, je voudrais que mes blocs de menus (qui sont sur ces côtés) aillent jusqu'en bas de page et soient donc de la même longueur que mon bloc texte.

j'ai mis 2 copies en imprim écran
la premiere vue d'en haut:




et vu d'en bas





mon bloc contenu est :

body
{background:url(../imgs/fond.jpg);}

#boite1_text
{
position:absolute;
margin-top:204px;
margin-left:256px;
margin-right:768px;


padding-top:100px;
padding-left:44px;
padding-right:68px;
padding-bottom:150px;
width:400px;

color: #7D0000;
font-size:14px;
text-align:justify;
}

et mon bloc menu (j'en ai 4 dont le premier et le dernier sont visibles sur l'image, me servant de bordure pour mon calque #boite1_text) :

/*//////////////// rubriques menus /////////////////////*/

#t1,#t2,#t3,#t4
{
font-size:28px;
padding:0px 0px 0px 0px;
position:absolute;
text-align:center;
margin-top:204px;
width:256px;
height:52px;
}
#t1{margin-left:0px;background-color:#980000;}
#t2{margin-left:256px;background-color:#A69ED8;}
#t3{margin-left:512px;background-color:#115D0A;}
#t4{margin-left:768px;margin-right:1024px;background-color:#D46B02;}

/*//////////////// sous-rubriques menus /////////////////////*/
/* se sont elles qui sont sensées être à la même longueur que mon bloc contenu */
#t11
{
position:absolute;
top:256px;
height:100%;
bottom:Opx;
margin-left:0px;
width:256px;
background-color:#7D0000;
}
#t21
{
position:absolute;
margin-top:256px;
height:100%;
bottom:Opx;
margin-left:256px;
width:256px;
background-color:#837ABB;
}

#t31
{
position:absolute;
margin-top:256px;
height:100%;
bottom:Opx;
margin-left:512px;
width:256px;
background-color:#0B4306;
}

#t41
{
position:absolute;
margin-top:256px;
height:100%;
bottom:Opx;
margin-left:768px;
width:256px;
background-color:#C15B02;
}

Voila pour mon problème, pour résumer, je veux que mes blocs menus s'adaptent en bottom (ou margin-bottom) à ma longueur de balise contenu...
j'ai esseayé tout ce qui est %, position, et rien a faire...
je me demande si on peut attacher deux balises entre elles...

je vous remercie par avance pour votre aide.


Corentin

Hello et bienvenue,

Est-ce que par hasard, ce point de l'incontournable FAQ te donnerait-il des pistes ?

Non, j'ai eu beau chercher partout (depuis 9H ), rien de transcendant.

J'ai trouvé un overflow:hidden pour le html avec overflow:auto; et height:100% pour le body ou pour mon calque mais rien y fait.

Je me demande si, puisque je suis en absolute pour mes deux blocs, je ne peux pas regrouper par une formule leurs deux tailles exactes, je m'explique :

par exemple, j'ai un menu 11 dont le contenu donne une longueur height:250px a mon bloc #boite1_text, un menu 12 height:980px; ya pas une fonction qui puisse dire

"quelque soit la longueur de mon #boite1_texte, mon #t11, #t21, #t31 et #t41 font la même taille (sans pour autant définir une taille par défaut en px) "

car au final, le contenu de ma box #boite1_texte changera en fonction de ce que rentreront les administrateurs du site sur la base d'administration (le contenu étant géré dans une bdd),
ceic changeant régulierement.

je sais pas si je suis tres clair mis s'est en gros mon pb.... HéHéHé

Corentin

et je me demandais si sinon il n'est pas possible de parametrer mes blocs menus à la taille de mes pages (en bottom) et non à la taille de mon écran de navigateur
car c'est ce que fait le height:100%; ou bottom:100%;

Bonjour,

bilouts a écrit :

Je me demande si, puisque je suis en absolute pour mes deux blocs

Pour simuler des colonnes de même hauteur, il faut passer par les flottants, et non la position absolue (revoir la FAQ du forum)

Sinon, merci d'éviter de faire un "up" toutes les heures (messages de up supprimés)

merci bien pour ta réponse.

En ce qui concerne le up, il était uniquement la pour réveiller un peu, rien de plus.

Bonne journée

corentin

Bon j'ai changé de technique, j'ai mis tout mon menu en fixed, ce qui fait que le seul mon contenu texte bouge avec la scrollbar, le rendu est plutot pas mal excepté le fait que le contenu passe devant ma banniere, y aurait-il une facon de préciser le niveau (la profondeur, la hierarchie, ou appelez sa comme vous voulez) ou une fonction du style "_level" afin que je puisse mettre mettre ma banniere devant mon calque de texte.

Je sais tres bien que je pourrais le faire manuellement en mettant cette balise sous, l'autre, mais je veux que mon contenu html ne bouge pas afin que si ma css passe pas ou si le site est lu par un mobile, mes div soient dans l'ordre.

PS:j'ai déja chercher pendant une plombe sur 'l'incontournable FAQ' qui ne possède rien que me concerne ou qui ait pu répondre à ma précédente question qui est du coup toujours en attente (ames charitables venez m'aider svp).

bon pour mon second probleme c'est résolu...


pour savoir la profondeur de bloc c'est z-index :

La propriété de feuille de style z-index css peut prendre la valeur de :
- auto, valeur par défaut, le bloc aura un "z-index" plus grand que le bloc précédent déclaré dans le code HTML.
- 0 à +00, nombre positif.
- inherit, hérite de la propriété de son parent (css 2)

j'ai eu le meme pb mais c'est pas trope compliqué ça tient en quatre ligne je te mets le code que j'ai fait et tu adaptes(la marge rose a gauche s'adapte a la taille de la jaune): t'as l'image en +:

fichier css:

div {
text-align:center;
}

div#bandeau {
width:600px;
height:50px;
background-color:00CCFF;
}
div#contenu {
float:left;
width:600px;
height:400px;
background-color:FFCC00;

}
div#menu{
float:left;
width:100px;
height:100%;
background-color:FF6699;

}
div#piedpage {
width:600px;
height:50px;
background-color:33FF99;

}

fichier html:

<html>
<head>
<link rel="stylesheet" type"text/css" href="css\style_accueil.css">
</head>
<body>
<div id=bandeau>ba<div>deuig</div><div>deuig</div></div>

<div id=contenu><div id=menu>me</div>co<div>deuig</div>....</div>

<div id=piedpage>pi</div>
</body>
</html>