28173 sujets

CSS et mise en forme, CSS3

Adaptation de la div en fonction du contenant ...

Bonjour à tous ...

Je travaille sur les css et un problème simple mais sans réponse se pose à moi. En effet, je cherche à adapter la hauteur d'une div en fonction de son contenant.
J'ai un menu a gauche et un contenu a droite et le contenant s'adapte au contenu du site. Par contre, le menu ne bouge pas en hauteur.

Pour info, voici les code css:


/* CSS Document */

body, html {
	padding: 0px;
	margin: 0px;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	}
	
#centrage {
	position: relative;
	width: 96%;
	left: 50%;
	margin-left: -48%;
	margin-top: 1em;
	border: 1px solid #000000;
	}
	
#bandeau {
	height: 12.5em;
	background-color: #FF0000;
	}
	
#menu {
	float: left;
	width: 21em;
	height: 200%;
	margin-bottom: 0px;
	background-color: #009933;
	}
	
#contenu {
	margin-left: 22em;
	background-color: #00FFFF;
	margin-top: 0px;
	margin-right: 1em;
	}


et le code html


<body>
    <div id="centrage">
      <div id="bandeau">
        header <a
        href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les mod&egrave;les)</a>      </div>
      <div id="menu">
        <p>
          menu gauche        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>          </li>
          <li>
            <a href="#">Menu 2</a>          </li>
          <li>
            <a href="#">Menu 3</a>          </li>
          <li>
            <a href="#">Menu 4</a>          </li>
        </ul>
      </div>
      
      <div id="contenu">
        <p>fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd </p>
        <p>fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd fsgfj ghj gfhj&nbsp; dfghdfgj sy sd </p>
      </div>
    </div>
</body>


j'espère que quelqu'un pourra m'eclairer ...

Merci par avance
Faire un tableau de présentation à deux cellules. ça ne mange pas de pain, et c'est rapide.

(Il y a des solutions CSS, mais beaucoup de gens s'y embrouillent).
je viens de le faire sur un site, et ca marche impeccable.

Par contre, j'ai voulu répéter la meme opération sur un site contenant 3 colonnes et j'ai un problème de hauteur.

C'est à dire que les 3 colonnes, bien que faisant partie de la meme ligne, ne se rejoignent pas en hauteur et se limitent à la hauteur de leur contenu.

Voilà, si quelqu'un a la solution ? ...

Merci par avance
Il y a plusieurs solutions. Par exemple :
– prévention : estimer la hauteur maximale des parties latérales et, en fonction, appliquer une hauteur minimale au contenu (avec min-height – et height pour IE 5/6) ;
– tricherie : ajouter simplement une (ou plusieurs) image(s) de fond au(x) conteneur(s), mais cela risque d'être problématique par exemple en cas de largeur relative.
– gratification : un petit plus pour les navigateurs qui supportent display:table-cell (et donc pas Internet Explorer)
– nivellement par le bas : retour au tableau de présentation. Mais à quelques cellules seulement, ce n'est pas méchant et c'est rapide et efficace pour tous.
– bidouillages : là ce ne sont pas les exemples qui manquent. Mais comme
ils sont tous plus ou moins limités ou problématiques, il faudra chercher celui qui correspond le mieux à ce que tu veux.
Modifié par Alan (09 Aug 2006 - 13:43)
en fait, pour la structure, j'utilise mon tableau de 3 colonnes et dans mes colonnes se trouvent des div, mais en relative, avec une hauteur definie en auto, alors la colonne ne tient pas compte tu contenu et deviens minuscule en hauteur, comme si elle etait vide.

je pensais qu'en utilisant un tableau, j'allais pouvoir obliger le tableau a s'agrandir en fonction du contenu, mais ce n'est pas le cas.

Si y'a un moyen de grandir le tableau ...
Sujet clos
Aller à