css et hauteur bloquée

periouz · 16 Décembre 2004

Bonjour,

J'ai un petit soucis de mise en page via css, j'ai cherché sur le web la soluce mais sans succes

j'ai un menu gauche que j'ai mis en float:left, et un contenu principal qui pourra etre + ou moins volumeux

Qd il n'y a beaucoup de de contenu, comme vous pouvez le voir sur le screenshot, il vient se mettre sur la gauche au bout d'un moment et ne reste pas aligné

(grosso modo la hauteur de ma resolution d'ecran, c'est a dire si je me met en 800x600 , le menu gauche se reduit en hauteur)

Pourtant je definit ma hauteur de #menu à 100%!!

C'est chelou cette histoire de hauteur=resolution d'ecran non?

Super merci d'avance!

mon code css:

BODY{
background-color: #f7f8fc; 
margin:0;
padding: 0;
}


#container {
	height: 100%;
	width: 800px;
	border: 1px solid #cccccc;
	position: relative;


	/*contenu centré*/
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	visibility: visible;
}


#header {
height: 100px;
width: 800px;
border: 1px solid #4262a6;
z-index: 0;
background-image :  url(../images/header.jpg);

}


#content {
 height:100%;

width: 630px;
voice-family: "\"}\""; 
voice-family:inherit;
width:100%;

}

#footer{

text-align: center;
clear:both; 
FONT-SIZE: 10px;
COLOR: #666666;
FONT-FAMILY: Arial, Helvetica, sans-serif;
padding: 20 20 20 10; 
}

/* menugauche*/


#menu {

float:left;
width: 170px;
min-height:100%;
height: 100%;
background-color: #cccccc;
vertical-align: top;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: Arial, Helvetica, sans-serif;
padding: 20 0 20 3;
}


#menu ul {
/*/*/padding-left:  0;
margin-left: 0;
list-style-type: none; /* */
font-family: Arial, "Times New Roman", Times, serif;
}
#menu li {
/*/*/margin: -2px 20px 0px 0px; /* */
font-family: arial, "Times New Roman", Times, serif;
}

#menu a {
/*/*/padding: 4px;
display: block;
border-top: 1px solid #666666;
text-decoration: none;
line-height: 100%;
}
#menu a:link, #menu a:visited {
color: #132e72
}
#menu a:hover, #menu a:active {
color: #132e72;
background-color: #666666;
COLOR: #ffffff;  TEXT-DECORATION: none}

mon code html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->
<body>


     <div id="menu">
  <span class="titremenugauche">GENRES</span> <br>
    <ul>
      <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">John</a> </li>
      <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">DOCUMENTARY</a> </li>
      <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FEATURE FILMS</a> </li>
      <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FICTION</a>  </li>
      <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FICTION > DRAMA</a> </li>
</ul>
  </div>
  


  <div id="content"> 
     
 .... le contenu
  
  </div>


</body>
</html>

**Perrine** · 16 Décembre 2004

Bonsoir periouz

Le problème a déjà été soulevé par Ernestine ici et nous sommes toujours à la recherche d'une solution.

Ton premier doctype n'est pas complet, le 2ème en commentaire oui Il faut que tu rajoutes l'adresse du .dtd à utiliser.

**Ernestine** · 16 Décembre 2004

En effet, ce problème est très déroutant En fait, je crois qu'il faut bien comprendre (et moi y a pas longtemps que je l'ai compris), qu'une boîte que l'on pose comme flottante, eh bien comme son nom l'indique, elle "flotte" sur la page, hors du flux html. Les boîtes que l'on posera comme non flottantes seront donc derrière, en fond. Mais la subtilité, c'est que le contenu de ces mêmes boîtes, lui, sera aligné le long de la boîte flottante. Ce charabia est beaucoup mieux expliqué ici.

Pour que le contenu s'aligne bien le long du flottant, mais aussi plus bas, au delà de la hauteur de celui-ci, tu devras ajouter cette propriété au div Content :

margin-left: 170px;

170 étant la largeur du flottant menu.

Cela dit, ça ne résoud pas cette histoire de height: 100%, la seule solution étant sans doute celle de Alistapart : une image de fond qui simule les deux colonnes (voir le topic linké par Azon).

Au plaisir,

Ernestine

Modifié 16 Décembre 2004 par Ernestine

periouz · 17 Décembre 2004

Merci beaucoup,

ca me donne des bonnes pistes,

j'ai trouvé un autre truc pas mal pour que ca s'aligne par contre j'ai cru comprendre que c'etait pas super compatible ie:

display:table-cell;

merci encore et bonnes fetes de noel à tous

Connexion

css et hauteur bloquée

Sujets conseillés

periouz

Perrine

Ernestine

periouz

Veuillez vous connecter pour commenter

Parcourir

Activité