28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Le but est de faire un site adapté à toutes les résolutions d'écran.
J'ai donc écrit le css suivant:


body{
  background-color:white;
  color:black;
}

#main{
  width:100%;
  height:100%;
}

/*
Partie supérieure de la page
*/
#head{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background-color:#6c0000;
  color:black;
}


#left_menu{
  position:relative;
  left:0;
  top: 0;
  width:70px;
 background-color:#d60000;
   height: 80%;
  border: 1px solid orange;
}


Et le code html ci-dessous:

<body>

<div id="main">
  <!-- Header -->
  <div id="head">
			&nbsp;
		<div id="logo"><img src="img/logo.jpg" alt="data and doc online" /></div>
		<div id="motcles"><img src="img/mots_cles.jpg" alt="Archivage - Gestion - Base de données - Propriete" /></div>
  </div>

  <!-- Barre de gauche contenant le menu principal -->
  <div id="left_menu">
....
  </div>
</div>


Le souci est que sous Firefox le bloc div left_menu n'apparait. A mon avais FF n'arrive pas à interpréter la hauteur.
Merci de m'éclairer.

Luciole.
Bonjour,
Déja pour que le height: 100% de ton #main ait un effet, tu dois ajouter à ton code html, body {height:100%} Voir explication sur http://forum.alsacreations.com/faq/#item57
Ensuite les width:100% de tes div nne servent à rien puisqu'un div fait par default (width: auto) toute la largeur de son conteneur mais pour les hauteurs ça fonctionne différemment.