Discussion :

[veust80]

J'ai un problème très gênant niveau présentation : comment ajuster une hauteur relative à un bloc avec le css car en fait sur le site que je suis en train de construire il y a un menu et un corps de page qui varient d'une page à l'autre de mon site au niveau du contenu. Du coup, les deux blocs ne font jamais la même hauteur. Voici un exemple. Comment faire pour que mon menu et mon corps de page soient alignés à mon pied de page, car niveau présentation c'est vraiment pas top. J'ai essayé la propriété "margin-bottom" ça ne marche pas et mettre une hauteur fixe est impossible vu que mon corps de page varie suivant le contenu.

Merci d'avance

[kaiser59]

Salut,

ceci répond à ta question

Code :

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

1
2
3
4
5
6
div#contenu
{
width:  200px; /* taille fixe donc le div ne sera pas redimmensionner en largeur */
height: 250px; /* taille fixe non redimmensionné en longueur */
overflow: auto; /* étant donné que le div ne sera pas redimmensionner il est donc utile (enfin s'il on veut) d'afficher la scrollbar lorsque le contenu devient plus grand le div */
}

Pour les tailles variables, il suffit de remplacer px par %

++

PS : "contenu" est un exemple tu lui donne le nom que tu veux.

[veust80]

J'ai bien essayé de mettre un hauteur en pourcentage mais rien à faire mon menu s'arrete toujours apres la derniere ligne de contenu. J'avoue que j'ai du mal à comprendre.

[kaiser59]

re,

Pourrais tu mettre un screenshot de ton problème avec les % parce que j'ai du mal à voir ce que tu veux dire

++

[veust80]

Code :

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

#mv				 {float: left; width: 250px;height: 100 %; font-family: georgia, verdana; background-color: #00a900; border: 2px solid #000000; margin-top: 5px}

Voilà le code css de mon menu vetical mais le mettre à 100% ne fit que lui donner la hauteur en fonction de son contenu. Ce que je veux, c'est que la hauteur de mon menu se cale à la hauteur de mon corp de page qui est de hauteurs différentes selon mes pages (toutes mes randos ne font pas la même longueur au niveau description. C'est pourquoi je me disait que la meilleur solution était de l'aligner par rapport à mon pied de page mais je ne sais pas si c'est possible.

[kaiser59]

Salut,

Logiquement si ton div de menu et de contenu ont un height de 100% il me semble qu'il devrait avoir la même taille en longueur.
As tu essayé de mettre la même taille fixe au deux ?

++

[veust80]

Hello Kaiser

Effectivement, si je donne un height fixe en px sur mes deux div ça marche mais le problème viens de mon corps de page qui à une taille différente sur chaque pages en fonction du contenu. Donc je ne peux pas avoir recours aux tailles fixes ou alors faudrais que je mette des tailles différente pour chaque page mais ce serait vraiment galère. Et lorsque je met un height de 100% pour mes deux div, le problème est le même car le menu reste beaucoup moins haut que mon corps de page.

[1407.]

te manque un "position"...

Code :

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

position: ...;

pour ta partie de droite aussi, elle ne va pas a 100%, c'est qu'une illusion parce que ton contenu est plus long.

[veust80]

c'est possible de mettre un "position" sur "float" ? Je ne savais pas. Je vais essayé ça.

[veust80]

Le position ne marche pas, au contraire, le menu se colle sur mon corps de page. Et j'ai beau chercher sur des tutos, je ne trouve pas de valeur permettant d'aligner mon menu par rapport au bas de page. Pourtant ça doit bien exister !! En tout cas ça m'arrangerais bien, car le positionnement de mes blocs est nickel par rapport à ce que je veux faire, il y a juste ce menu qui ne veut pas prendre toute la hauteur de la page (le coquin ).

[1407.]

Le position ne marche pas, au contraire, le menu se colle sur mon corps de page. Et j'ai beau chercher sur des tutos, je ne trouve pas de valeur permettant d'aligner mon menu par rapport au bas de page. Pourtant ça doit bien exister !! En tout cas ça m'arrangerais bien, car le positionnement de mes blocs est nickel par rapport à ce que je veux faire, il y a juste ce menu qui ne veut pas prendre toute la hauteur de la page (le coquin ).

Normal, maintenant qu'il a un "position", faut lui donner aussi un top et un left (ou right) et un margin-left ou margin right si tu veux centrer le tout. un exemple :


CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#left {
	background: #CCCCCC;
	position: absolute;
	height: 100%;
	top: 10px;
	width: 25px;
    left: 50%;
    margin-left: -290px;
	border: 0px;
}
 
#center {
	background: #666666;
	position: absolute;
	width: 500px;
    left: 50%;
    margin-left: -250px;
	height: 100%;
	top: 10px;
	border: 0px;
}

HTML :

Code :

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

1
2
3
4
5
6
7
</HEAD>
 
<BODY>
<DIV ID="left">lft</DIV>
<DIV ID="center">cnt iuhiuh klo8</DIV>
</BODY>
</HTML>