Overflow:hidden, float:left et IE:6

Bonjour,

Je me résous finalement à vous exposer mon problème (en fait il y en a 2, mais j'ai pas envie de vous faire peur...).
Je suis en train de travailler sur un site dont le contenu est à afficher en largeur. (un peu à la www.gucci.com ).
[ Voici une URL de test : http://www.motoblouz.com/CCV2/template.html
(vous pourrez telecharger un .zip avec les fichiers ici : http://www.motoblouz.com/CCV2/testIE6.zip ]
Je sais que ce site à été parfois décrié sur ce forum, en effet, le javascript pose des problèmes d'accessibilité.
A terme, une version du site sans javascript est prévue, le problème ne se pose donc pas pour mon projet.

L'idée est que le menu de gauche reste affichable en toutes circonstances et que le contenu de droite s'adapte à la largeur de l'écran de l'utilisateur.

En gros mon problème est que bien que tout ce passe comme prévu sous FF et IE7, IE6 se borne à vouloir renvoyer à la ligne mon contenu.

J'ai beau chercher, je n'arrive pas à forcer IE à garder tout sur la même ligne...

Je précise juste que cette page de demo est uniquement destinée à vous montrer le problème, Je vous demande de faire abstraction du javascript, une version js-disbled etant prévue.

Autre problème:
Pour le contenu justement, dans l'exemple, un tableau est utilisé. Hors, comme tout le monde le sait, les tableaux ont été créés par le diable lui même afin de pervertir l'âme des innocents webdesigner et codeurs en leur offrant une simplicitée apparente mais gangrénée jusqu'à l'os. Le problème est que si je veux utiliser des boîtes en utilisant au choix un float:left ou en les mettant 'inline', le contenu passe à la ligne ou n'est pas exploitable.
Si quelqu'un a une idée de la manière de procéder avec des divs, je lui serait éternellement reconnaissant d'avoir sauver mon âme tentée par la perversion satanique.

merci pour votre aide !
Modifié par karlvador (14 Aug 2007 - 10:39)

Bonjour,

À propos des tableaux:
http://blog.alsacreations.com/2007/03/06/335-coup-de-gueule-3-malefiques-tableaux
Je crois que ça permettra de remettre un peu les choses à leur place.

Et puis bon, je crois que l'utilisation d'un tableau de mise en page, si c'est un problème (ce qui n'est pas nécessairement le cas), n'est rien en comparaison des atteintes à l'accessibilité et à l'utilisabilité d'un site que peuvent provoquer des choses comme, au hasard, les sites à défilement horizontal et l'obsession des éléments fixes sur la page.
Mais ça n'est que mon avis.

Au fait, aucune barre de défilement «normale» n'apparait si je désactive JS? Quand tu disais que tu comptais faire une version sans JS, tu pensais à une version séparée? Pas terrible ça...
(En passant, il va aussi falloir faire une version séparée pour les utilisateurs en 800x600, vu qu'avec cette résolution le dispositif de défilement est caché.)

Pour le bug d'IE: à priori, IE6 étend la largeur des éléments dont un des blocs de contenu est trop large (ici le tableau, plus large que la largeur normale de div#content). On peut empêcher ce comportement avec un overflow: hidden ou overflow: auto, mais pour que ça marche il me semble qu'il faut que le bloc ait une largeur déterminée, en pixels ou en pourcentages.

Ici, le bloc prend normalement la largeur restante, vu qu'il est repoussé par le menu flottant (via le contexte de formatage du overflow:hidden, et via le HasLayout pour IE6). Mais apparemment IE6 ne s'y retrouve pas. Il faudra donc une largeur en pourcentages par exemple.

Pour mémoire, j'ai fait un test avec le code suivant (le reste est inchangé):

div#catalogue { background-color: rgb(63, 63, 63); width: 15%; height: 425px; margin-top: 2px; position: absolute; left: 0;}
div#content {overflow: hidden; height: 425px; margin-top: 2px; width: 85%; margin-left: 15%; background: red; }

C'est du brut de décoffrage, par contre.

Pour éviter de faire une version séparée sans Javascript: faire une version fonctionnelle sans Javascript dès le départ (si on veut le même type de mise en page, utiliser overflow: auto plutôt que overflow: hidden pour div#content), et rajouter une surcouche Javascript optionnelle (passage du overflow: auto en overflow: hidden, génération de la barre de défilement personnalisée, etc.

Pour les tableaux, le vrai problème est que je voudrais pouvoir rajouter du contenu sans me soucier du nombre de colonnes de ce tableau... un div en float:left par exemple serait parfait...

Concernant la solution que tu proposes, (donner une taille fixe), ca permet en effet de forcer le modèle de IE6 mais le problème est que le menu de gauche peut avoir une largeur variable, dépendant du contexte. En fixant sa taille en CSS, je me prive de l'effet de disparition du menu dans cet exemple, et de bien d'autres dans la version finale.

N'y a-t-il aucune solution pour garder une taille indéterminée ?
Ma dernière solution consisterait à régler en live la taille de ces div avec javascript à chaque changement, mais c'est loin d'être élégant (qui a dit que je suis plus à ca prêt ? )
Modifié par karlvador (14 Aug 2007 - 15:30)

karlvador a écrit :
N'y a-t-il aucune solution pour garder une taille indéterminée ?

Pas à ma connaissance... mais je n'ai pas connaissance de tout.

Ah ben si, finalement, j'ai peut-être une piste: imbriquer deux blocs, le premier jouant le rôle de conteneur à largeur adaptable (contexte de formatage, HasLayout...), et le deuxième étant en width: 100%.

Un test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	body {
		margin: 0;
		padding: 50px 0;
	}
	div#colonne-gauche {
		float: left;
		width: 200px;
		height: 400px;
		background: red;
		opacity: .5;
	}
	div#conteneur {
		overflow: hidden; /* contexte de formatage pour que le bloc s'adapte au flottant */
		height: 400px;
		background: gray;
		opacity: .8;
	}
	div#conteneur-bis {
		width: 100%;
		height: 300px;
		overflow: auto;
	}
	div#machin-large {
		width: 2000px;
		margin: 50px;
		border: solid 4px green;
		color: green;
	}
	</style>
</head>
<body>
<div id="colonne-gauche">
	<div id="colonne-gauche-bis">
	</div><!-- #colonne-gauche-bis -->
</div><!-- #colonne-gauche -->

<div id="conteneur">
	<div id="conteneur-bis">
		<div id="machin-large">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
			<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
		</div><!-- #machin -->
	</div><!-- #conteneur-bis -->

	<p><a href="#" onclick="getElementById('colonne-gauche').style.display='none';">Effacer la colonne de gauche</a></p>
	<p><a href="#" onclick="getElementById('colonne-gauche').style.display='block';">Afficher la colonne de gauche</a></p>
</div><!-- #conteneur -->
</body>
</html>

Merci Florent !

En effet, ca fonctionne, me reste plus qu'à en faire quelque chose d'accessible

bonne journée !

Bonjour,
votre conversation m'a permis de régler un problème un peu différent, un grand merci!

Pour je ne sais quelle raison, un site que nous réalisons avait un problème de mise en page(une certaine hauteur se trouvait inexplicablement en dessous du footer)
Pour supprimer cette hauteur, ils avaient mis un overflow:hidden pour résoudre le problème.

Malheureusement, lorsque de la page d'accueil, nous pointions sur une ancre de la page news, une partie du contenu du dessus de la page news disparaissait comme s'il y avait un scroll.

Pour firefox, j'ai vu sur le net de mettre l'ancre en position:absolute; et pour explorer, j'ai placé ce fameux div avec un width:100%;

Et cela marche. Je comprends pas trop bien le problème car je n'ai jamais utilisé les overflow. Merci beaucoup pour l'astuce.