Gabarits alsacreations.

Bonjour,

J'ai trouvé des gabarits intéressant sur votre site. Malheureusement je n'y trouve pas mon compte à 100%. En effet prenons par exemple le gabarits où il y a un menu à gauche, un à droite, un headeur, un pied de page, et le contenu au centre. Un design plutôt classique.

Le problème est le suivant : les menus sont en position:absolute; ce qui fait que si on rajoute du contenu dans le menu et qu'il devient plus important que le contenu du centre, alors le menu dépasse du design. Ce qui est un peu incompréhensible étant donné qu'on ne devrait pas pouvoir sortir d'un conteneur, il devrait s'adapter à son contenu.

Personnellement j'utilise des floats pour les menus, et je fais un clear:both; pour le pied. C'est une méthode assez bancales, elles marchent s'affichent correctement à peu prêt partout, mais je la trouve bancale. Je pensais trouver une solutions avec les positions absolutes, mais je vois que c'est un problème.

Quels sont les solutions ? J'aimerais vraiment trouver un gabarit de ce type, qui marche, quel que soit le contenu qu'on applique au menu ou au centre.

Merci de votre aide.

Bonjour,

Druidefou a écrit :
Ce qui est un peu incompréhensible étant donné qu'on ne devrait pas pouvoir sortir d'un conteneur, il devrait s'adapter à son contenu.

Cela fait partie du mode de formatage normal dans CSS. Le calcul de la hauteur d'un conteneur en CSS ne tient pas compte des éléments enfants qui, pour s'en tenir aux cas les plus courants :
- sont flottants (sauf si la propriété overflow du conteneur est autre que le visible par défaut), voir FAQ du forum)
- ou sont positionnés (c'est à dire position:absolute ou fixed).

Sans entrer dans les détails, c'est une des conditions-clés pour ce que permettent de faire ces deux schémas de positionnement.

Druidefou a écrit :

Personnellement j'utilise des floats pour les menus, et je fais un clear:both; pour le pied. C'est une méthode assez bancale

Elle n'a rien de bancal en soi : tout dépend du contenu précis qui est concerné (il est rare qu'il soit problématique, en fait).

En cas de réticences ou de problèmes réels, voir la FAQ du forum pour l'utilisation de la propriété overflow du conteneur afin de lui permettre de s'étendre en hauteur à ses enfants flottants sans recourir à la propriété clear.

Enfin, il faut être conscient qu'une partie seulement de CSS2.1 est utilisable compte-tenu des implémentations des navigateurs Geckos (pas de display:inline-block ni run-in, outre des flottants bugués dans certains cas tels les fieldset) et Microsoft (pas de display:table ni run-in ni inline-block utilisable) : les designers se retrouvent actuellement contraints de sur-utiliser les positionnements et les flottants, très au-delà de leur usage rationnel. Dans des navigateurs plus complets dans leurs implémentations de display (Opera, safari, Konqueror), ce type de problème ne se pose qu'exceptionnellement. Mais il n'est certes pas possible de développer en ignorant les Geckos et IE, même temporairement (car ils progressent)...
Modifié par Laurent Denis (14 Jan 2006 - 12:01)

Merci pour cette réponse claire et précise. J'irais voir les détails car j'aimerais avoir plus d'informations.

Je m'occupe d'un site de design et de programmation et je suis donc confronté au problème de devoir créer des designs valides. J'essaye donc de créer des gabarits que je pourrais utiliser suivant les cas. Mais j'aurais déjà la structure de faite. Si le clear:both; ne pose pas plus de problèmes que ca, alors c'est la solution que j'utiliserais dans l'immédiat.

Mais je vais me pencher sur l'overflow, à vrai dire je ne connais pas du tout.

Merci.