[CSS] zone principale de taille minimale mais modulable ?

Logiciel & apps Programmation
1

salut,

dans ma page, j’ai un menu et une zone principale, ma zone principale va etre de taille plus ou moins variable mais j’aimerais mais j’aimerais que qu’elle ne soit pas plus petite que la taille du menu

en gros je toujours veux ça:

| |
||
| | |
| | |
| | |
|||
|_____________|

mais je peux aussi avoir ça:

| |
||
| | |
| | |
| | |
|| |
| | |
| | |
||_|

désolé pour les schémas :stuck_out_tongue:

actuellement mon menu est est fixe, mais quand ma zone principale est plus petite que le menu, une partie du footer disparait sous le menu :confused:

voilà un bout de mon css:

[cpp]#conteneur { /zone globale de la page/
position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #ffffff;
}

#centre { /zone principale/
background-color:#ffffff;
margin-left: 150px;
border-style: solid ;
border-color: #c0c0c0;
border-bottom: none;
border-width: 1px;
padding:10px ;
}

#gauche { /menu gauche/
position: absolute;
width: 139px;
background-color: #FFFFdd;
border-style: solid ;
border-color: #c0c0c0;
border-top: none;
border-right: none;
border-width: 1px;
padding-left: 10px;
padding-top: 20px;
}

#pied { /footer/
height: 30px;
background-color: #c0c0c0;
}
[/cpp]

merci d’avance :jap:

2

Ce que tu peux tenter, c’est de mettre le menu en float: left, puis de faire clear: block sur le footer.

3

le float:left; marche nickel, mais pour le footer c’est un clear:both; qu’il faut rajouter.

merci SN, c nickel :slight_smile:

mon nouveau CSS:

[cpp]
#conteneur { /zone globale de la page/
position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #ffffff;
}

#centre { /zone principale/
background-color:#ffffff;
margin-left: 150px;
border-style: solid ;
border-color: #c0c0c0;
border-bottom: none;
border-width: 1px;
padding:10px ;

}

#gauche { /menu gauche/
vertical-align:middle;
width: 139px;
background-color: #FFFFdd;
border-style: solid ;
border-color: #c0c0c0;
border-top: none;
border-width: 1px;
padding-left: 10px;
padding-top: 20px;
float: left;
}

#pied { /footer/
height: 30px;
width: 800px;
background-color: #c0c0c0;
clear: both;
}
[/cpp]

4

Ooops, me suis planté, c’est en effet both.

Par contre, faut savoir que ça casse le fait que le menu devrait se trouver en fin de page (dans le code) pour ceux qui ont un navigateur texte.

Je dirais que tu peux aussi utiliser min-height. (pas forcément compatible IE)

5

c’est un site intranet que je développe et dans le cahier des charges il doit fonctionner sous ie5.5 mini et firefox (les 2 uniques navigateurs ds le batiment).

il y a donc aucun soucis de compatibilité avec cette méthode

6

non rassures toi :slight_smile: float/clear c’est bien. Ce que je veux dire c’est qu’il faut éviter au possible de mettre le menu en premier dans le code, car les aveugles se le taperont en premier par exemple.

7

ok, merci pour l’info :jap: