Définir la hauteur d'un conteneur

Bonjour à tous,

Je n'arrive pas à gérer la hauteur d'un conteneur :

#conteneur {
margin: auto;
width: 760px;
height: auto;
padding: 0px;
border: 1px solid #C0BAA9;
}

dans IE ok
dans Firefox Opera et Netscape ca marche pas

Merci de votre aide

Le height: auto; ne sert à priori à rien (sauf pour contredire une instruction préalable), vu que c'est la valeur par défaut. Elle signifie que le bloc prendra toute la hauteur nécessaire pour contenir les éléments enfants.

Bien sûr, ça ne concerne pas les éléments positionnés en absolu, ou les éléments flottants.

Bon ca marche mais maintenant mon bloc de texte ne s'affiche plus correctement à droite du menu ? merci

http://www.vousloire-test.com/test/index.php

J'en profite pour quelques remarques générales :

Centrer la page horizontalement

body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }
#conteneur {
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

La valeur auto permet d'utiliser des marges calculées automatiquement. Concrètement, si on l'applique à gauche et à droite d'un bloc, cela permet de le centrer horizontalement. Ensuite, pour que cela soit pris en compte par IE, il faut également que le bloc parent ait un alignement du texte au centre.
Dans le code que vous utilisez, le margin: auto; appliqué à body est superflu.
C'est celui de la div#conteneur qui permet de centrer la page.

Méthodologie (recette perso sans garantie)

</div>
	</div>
</div>

Pour ma part, je "marque" toujours mes balises fermantes quand elles ne sont pas parlantes. En particulier pour les div qui ont une classe ou un identifiant bien particulier et qui peuvent accueillir un contenu un peu long.

...</div><!-- fin de div#page -->

Par exemple.
Je trouve que la relecture du code et le "debugging" (aussi bien par soi que par les autres) en est grandement facilitée. De plus, ça évite (un peu) de mal imbriquer ses éléments en perdant des balises en route...

Simplification du code

Premier exemple :

<div id="lineref"><span class="Txtlineref">"Le Chateau de Verrières vous propose ses chambres au château"</span></div>

peut être simplifié en :

<p id="lineref">« Le Château de Verrières vous propose ses chambres au château »</p>

Ça permet d'avoir quelque chose de plus "significatif" qu'une div, qui n'est qu'un conteneur de type bloc générique. Par contre, on pensera à fixer à la hauteur voulue les marges du paragraphe (les marges latérales sont à zéro, mais les marges verticales ont une hauteur par défaut, qui est relative à la taille du texte me semble-t-il).
Le span m'a l'air inutile, toutes les propriétés pouvant être passées au paragraphe.

Deuxième exemple :

<div id="page">bla bla plein de trucs</div>

Il me semble que la présence d'un bloc ayant pour identifiant "conteneur" suffit déjà aux principaux besoins de structure comme de mise en page. Englober le menu et la zone de texte dans un conteneur spécifique, c'est peut-être superflu. Mais bon, ça ne fait pas de mal...

Troisième exemple :

<div id="menu"><ul class="menu">...</ul></div>

peut être simplifié en :

<ul id="menu">...</ul>

Je ne sais pas comment les lecteurs d'écran se débrouillent avec les div imbriquées, mais en règle générale, moins on imbrique, mieux on se porte. Bon, là c'est juste sur un petit truc sans conséquences. Mais j'ai parfois vu 9 div imbriquées pour réaliser un effet visuel de mise en page (seule la div du "centre" avait un réel contenu !)...

Quatrième exemple :

<div id="bloctexte"><div class="texte">...</div></div>

peut être simplifié en :

<div id="bloctexte">...</div>

ou encore :

<div id="bloctexte" class="texte">...</div>

(si on a vraiment besoin d'un identifiant ET d'une classe. Mais dans 95% des cas, il es probable que ça ne serait qu'une redite.


Pour finir, je rappelle qu'il s'agit un peu de coupage de cheveux en quatre. En même temps, on peut estimer que plus un code est "épuré", plus le debugging est facile, car on a réduit au minimum les interférences possibles et non prévues.


EDIT: le script de ce forum a des problèmes avec les successions de BBcode pour les italiques (lorsqu'on en enchaîne plusieurs). Ce n'est pas la première fois que ça me le fait, d'ailleurs...
Modifié par mpop (15 Mar 2006 - 23:45)