[CSS] Alternative à min-height

Marsh Posté le 19-09-2004 à 13:44:50

Salut à tous,

j'aimerais terminer un site web ( du moins le design ) pour demain.

Donc j'ai un menu vertical ( absolute ) et un calque contenu ( relative ), le tout dans un calque conteneur. La taille vertical de ce dernier n'est pas fixé, j'aimerais qu'elle soit fonction de la taille du "contenu", mais qu'elle reste d'une taille supérieur à 300px pour ne pas se superposer avec le menu.

Si je définie min-height pour le conteneur ou le contenu, sa fonctionne parfaitement sous Mozilla, mais IE ne supportant pas cette propriété ( :sarcastic: ) c'est comme s'il n'y avait rien.

J'ai mis le menu en relative, ce qui fait que j'ai du changer certaines propriétés du contenu ( top: -290px ) mais le calque conteneur ne tient pas compte du calque menu qui est fixe, et varie toujours en fonction du calque contenu

J'espère avoir été assez clair, bien que je n'en suis pas sure ...
Pour mieux comprendre, voici le site http://aimless-network.com/seventeam/ .

Merci par avance

---------------
Last.fm || Shift Happens || CAN HAS STDIO?

Reply

Marsh Posté le 19-09-2004 à 13:44:50

Reply

Marsh Posté le 19-09-2004 à 13:55:25

Essaye peut être de donner à ton menu les propriétés suivantes :

display: table-cell;
height: 300px;

Il devrait alors se comporter comme une cellule de tableau : c'est à dire que la heuteur fera 300px de haut mais elle s'agrandira si nécessaire.

Message édité par gm_superstar le 19-09-2004 à 13:55:30

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 19-09-2004 à 14:09:18

merci mais soit je n'y arrive pas, soit sa ne fonctionne pas

vu que je pensse que c'est moi, je poste les éléments inportants du codes ici

index.php

Code :

<div id="conteneur">
<div class="menu">
</div>
<div class="contenu">
</div>
</div>

Voilà donc l'architecture au niveau des calques, et voici leurs propriétés :

Code :

#conteneur {
background-color: #FCFCFC;
position: absolute;
top: 190px;
left: 90px;
display: table-cell;
height: 400px;
width: 700px;
border: 1px solid black;
border-top: none;
}

Code :

.menu {
background-repeat: repeat-x;
background-color: #FFDE81;
position: absolute;
top: 0px;
display: table-cell;
height: 300px;
left: 20px;
width: 120px;
border: 1px solid #ff9900;
border-top: 1px solid black;
}

Code :

.contenu {
background-repeat: no-repeat;
position: relative;
top: 10px;
height: 300px;
width: 520px;
left: 160px;
margin-bottom: 60px;
}

Message édité par quickman le 19-09-2004 à 14:10:20

---------------
Last.fm || Shift Happens || CAN HAS STDIO?

Reply

Marsh Posté le 19-09-2004 à 15:20:26

merci sa fonctionne

---------------
Last.fm || Shift Happens || CAN HAS STDIO?

Reply

Marsh Posté le 19-09-2004 à 15:53:09

quickman a écrit :

Si je définie min-height pour le conteneur ou le contenu, sa fonctionne parfaitement sous Mozilla, mais IE ne supportant pas cette propriété ( :sarcastic: ) c'est comme s'il n'y avait rien.

voici la parade que j'utilise pour contourner ce bug ie

Code :

.maclasse {
height: auto !important;
height: 300px; /* because ie suxxe */
min-height: 300px;
}

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Reply

Marsh Posté le 19-09-2004 à 18:00:24

simogeo a écrit :

voici la parade que j'utilise pour contourner ce bug ie

Ca irait bien où-tu-sais ce petit truc [:cupra]

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 19-09-2004 à 18:40:29

simogeo a écrit :

voici la parade que j'utilise pour contourner ce bug ie

Code :

.maclasse {
height: auto !important;
height: 300px; /* because ie suxxe */
min-height: 300px;
}

Merci pour cette combine :bounce:

---------------
planuldep | Association pêche à la Sempé

Reply

Marsh Posté le 19-09-2004 à 18:52:46

gm_superstar a écrit :

Ca irait bien où-tu-sais ce petit truc [:cupra]

ué je me suis dis la même chose en y répondant. Et plus généralement, pondre un petit article sur !important et ses cas d'utilisations. Disons que c'est en chantier [:cupra]

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Reply

[CSS] Alternative à min-height

Sujets relatifs:

Leave a Replay