Discussion :

[pc.bertineau]

Bonjour à tous,

Je développe un intranet avec une trame à base de div/css. J'ai une bannière et un menu horizontal en haut, une barre de menu à gauche avec le contenu à sa droite, et enfin un pied de page en bas.
Mon contenu est bien souvent plus important en hauteur que l'ensemble de ma barre de menu à gauche. J'aimerais que cette barre s'aligne toujours par le bas avec mon contenu, en comblant le manque avec de l'espace vide... J'ai vu une solution sur internet, mais je n'arrive pas à la faire marcher, elle utilisait la propriété (?) after..

Voici la structure de mes divs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="bandeau"><img src="res/bandeau.gif" alt="bandeau" /></div>
<div id="hnav"><?php include "hnav.php"; ?></div>
<div id="barregauche">
    <div id="user"><?php include "user.php"; ?></div>
    <div id="menu"><?php include "menu.php"; ?></div>
    <div id="liens"><?php include "liens.php"; ?></div>
</div>
<div id="contenu"><?php include "contenu.php"; ?></div>
<div id="piedpage">
    <span><u>Signaler un probl&egrave;me</u></span>
</div>

edit: Mon code doit être compatible IE6

Merci d'avance

[pc.bertineau]

vous m'avez pas compris, c'est trop facile, ou personne ne voit ??
une alternative peut-être ?

[WagaSeb]

Salut,

Alors soyons très clair, je suis franchement pas le mieux placé pour te répondre !

Mais comme j'ai eu le pbs, je te mets sur la voie ...
en CSS, ds ton conteneur je crois , tu place la propriété : "clear:both;"
Il me semble qu'il faut chercher ds cette voie ...
Bon courage !

[Jihnn]

Salut,

J'ai le même problème que ziggotos (d'ailleurs, voici un screenshot qui pourrait aider certains à visualiser la chose : http://img338.imageshack.us/img338/1223/sitemp2.png , dans mon cas, ce sont les deux balises div à gauche et à droite qui devraient remplir l'espace entre l'en-tête et le pied de ma page).

@WagaSeb : La propriété "clear" n'est, d'aussi loin que je peux me souvenir, utile que dans les cas où on veut supprimer la propriété "float" de notre objet, et donc dans ce cas, inutile. Toutefois, comme tu as dit avoir déjà eu le même problème - et par conséquent, la solution aussi, ce serait bien si tu pouvais développer pour que je comprenne que faire

Merci d'avance,

Jihnn

[WagaSeb]

Pour etre franc, j'ai tout repris mon site à zero et n'ai plus les fichiers. Donc j'aurais du mal à te repondre, d'autant que j'ai vraiment tatonné... C'est dur de débuter !!
Sinon, je supose que tu as déjà installé web-developer. En editant le CSS, tu peux voir ta page se modifier en temps réel.
Super pratique !!!


A+

[Candygirl]

En général on règle le problème avec une image de fond sur le div conteneur, qui contiendra la couleur/image qui doit s'afficher jsuqu'au bas. Cela fonctionne bien pour un design de taille fixe, c'est un peu plus problématique pour un design extensible selon le graphisme.

[Jihnn]

En effet, j'aurais préféré un design extensible. Tant qu'à travailler sur un projet, j'aimerais le faire le mieux possible

Donc, y a-t-il un moyen quelconque ?

[Candygirl]

y a-t-il un moyen quelconque ?

Quel est le comportement de ton design; tout est extensible ou est-ce que tes 2 côtés sont de tailles fixes et seul le centre augmente ? auquel cas il ne devrait pas y avoir de problème en attribuant une image de fond à gauche et une à droite (avec une imbrication de div).

Si non, cela va dépendre de ton graphisme (ton image c'est le design final?); si c'est juste un trait, cela ne va pas poser problème non plus pour mettre en %.

Ou encore s'il s'agit que d'une bordure et que ton centre est forcément plus haut que les 2 côtés, tu peux lui attribuer un border.

[Jihnn]

La longueur devrait changer par rapport à la résolution de l'utilisateur, toutefois, comme le texte du contenu diffère de page en page, la hauteur ne sera pas fixe non plus.
C'est pour cette raison que j'aurais aimé que la hauteur soit maximale pour toutes les balises div, c'est à dire qu'elles remplissent la hauteur entre l'en-tête et le pied de la page.

Edit: Par exemple, y a-t-il un moyen que la valeur soit égale à la hauteur de la balise div "content" ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#menu
{
 min-height: div#content.height;
}

J'imagine que ça doit pas être aussi simple, mais si quelque chose du genre existait, ça serait bien

Edit²: J'ai pour l'instant réglé la chose en utilisant une autre balise div qui place la bordure autour de mes autres divs, et donc ça ne paraît pas vraiment. Enfin, je suis preneur s'il y a un autre moyen efficace