Clear agit hors de son conteneur ? cherchez l'erreur

Bonjour à tous,

Je cherche à intégrer punBB à l'intérieur de mon site. La page de punBB se compose d'un certain nombre de div, dont certaines contiennent des éléments float (left et right) suivis d'une div en clear: both (clearer) afin qui la div englobante fasse la bonne taille.

Le problème survient lorsqu'on intègre cette page dans un site qui a un menu à gauche, lui même consitué d'une div en float: left. Dans ce cas, le clearer s'aligne non pas sur les deux blocs au dessus de lui mais sur le menu à gauche qui est beaucoup plus haut.

J'ai reproduit le problème sur la page suivante : http://www.batosai.net/test.php (je ne peux pas vous montrer le site d'origine, il se trouve sur un intranet, mais la structure de la page est la même...), où l'on peut voir le clearer en rouge...

Mes recherches sur ce site et quelques autres n'ont rien donné mais c'est vrai qu'il est difficile de trouver des mots-clés pour décrire ce problème

Si vous avez des idées, suggestions...
Modifié par Felipe (08 May 2006 - 18:12)

Salut,

Tu pourrais faire un "clearer" en mettant un élément qui occupe toute la largeur disponible. Ainsi, plus besoin de la propriété clear

Oui sauf que là je n'ai pas vraiment le choix.
A moins de modifier le code source du forum et de devoir le refaire à chaque changement de version...

J'ai essayé de remplacer le clear:both par width:100% dans la feuille de style et cela fait que le clearer remonte tout en haut du div et le bloc suivant chevauche dessus.

D'autres idées ?

Salut

essai

div.bloc1 {
	margin: 5px;
	float: left;
}

A+

Ca fonctionne effectivement si c'est le bloc de gauche qui est le plus grand...

J'ai essayé de spécifier des position absolues pour le menu et la page (du coup, plus de float:left) mais dans ce cas, le footer remonte jusqu'en dessous du header
Modifié par batosai (08 May 2006 - 22:12)

en tehorie si tu mets ton menu en absolute le clearer devrait se placer sous les 2 blocs flottants

Le spacer oui, je parle du FOOTER qui remonte tout en haut, comme vous pouvez le voir ici : http://www.batosai.net/test2.php

Tu as la possibilité d'utiliser une autre méthode que le spacer en clear:both ?
Il y en a quelques unes d'indiquées ici :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Non, justement. A moins de modifier le code source du forum et de devoir le refaire à chaque mise à jour
En fait, je cherche une solution qui ne m'oblige qu'à modifier mon code à moi. Ainsi, je peux faire mes mises à jour les yeux fermés (bon d'accord, j'ai déja modifié le template mais ça c'est pas trop grave )

A ma grande honte, j'avoue avoir capitulé et utilisé un tableau de deux cellules.
Oui, je sais c'est mal.

batosai a écrit :
A ma grande honte, j'avoue avoir capitulé et utilisé un tableau de deux cellules.

Euh… ben ça ne fait pas partie du code que tu ne voulais pas modifier, justement ?

Quel code voudrais-tu conserver ? Le HTML ou le CSS ?
D'ailleurs, l'un et l'autre ne sont-ils pas modifiables via un système de templates ?
Et le CSS pour le spacer, il est placé dans la feuille de style ou dans l'attribut style de la balise ?

Salut

va voir ca http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

Ceci marche avec FF (edit: pas testé avec IE)

div.bloc1 {
     margin: 5px;
     overflow: auto
}

A+
Modifié par gege71 (10 May 2006 - 01:23)

gege71 : Merci, c'est exactement de ça que j'avais besoin ! Pour info, ta solution ne fonctionne pas avec IE mais il sufffit d'y ajouter "height: 1%;" pour que l'affichage soit identique dans IE et dans les vrais navigateurs...

mpop : Comme je l'explique plus haut, j'intègre le forum au sein de mon site web à l'aide d'inclusion de footer.php/header.php au sein de son template. Je peux modifier tout ce que je veux dans mon site (PHP, HTML ou CSS) mais concernant le forum, je ne veux toucher à rien d'autre qu'au template afin de pouvoir faire les mises à jour sans souci.

Merci à tous

batosai a écrit :
gege71 : Merci, c'est exactement de ça que j'avais besoin ! Pour info, ta solution ne fonctionne pas avec IE mais il sufffit d'y ajouter "height: 1%;" pour que l'affichage soit identique dans IE et dans les vrais navigateurs...

La propriété CSS non standard zoom (fixée à 1) a la même propriété (elle confère le layout à l'élément visé), avec moins de risques il me semble. Je ne veux pas trop m'avancer, mais il me semble avoir vu des mises en pages (de ma pomme) faites avec un height: 1% qui partaient en cacahuète dans IE 5.

Coucou, je reviens avec le même problème...

Enfin pas exactement le même mais un effet de bord du premier : zoom:1 résout mon problème avec IE, overflow:auto le résout pour Firefox MAIS il bloque le scrolling de la souris sur toute la div !

La solution qui a marché pour moi a été de remplacer overflow:auto par overflow: hidden; et il ne semble pas y avoir d'effets de bord.

Voila, si ça peut servir à quelqu'un...
Modifié par batosai (26 May 2006 - 23:45)