[Résolu] [Problème] contenu facultativement scrollable

Bonjour,

Je souhaite mettre en page un site dont la partie "contenus" est scrollable via la propriété overflow:auto. D'après ce que j'ai pu voir, certains navigateurs ne gèrent pas cette propriété. J'essaye donc de créer une feuille de styles compatible.

Le problème vient des images en fond. Le fond est découpé en 3 :
- Le haut
- Le milieu (1px de hauteur : c'est cette partie qui doit pouvoir s'étirer)
- Le bas.

La difficulté vient du fait que les contenus s'étalent sur ces 3 zones.

Actuellement, j'ai 2 versions :
1 version sans le scroll
1 version avecle scroll

Je ne suis pas convaincu d'être parti sur les meilleurs bases.

Bref, je cale un peu

Pourriez-vous y jeter un oeil.

Un grand merci d'avance !
Modifié par nicolas.charlot (07 Jun 2006 - 20:38)

Bonjour,

Je souhaite mettre en page un site dont la partie "contenus" est scrollable via la propriété overflow:auto. D'après ce que j'ai pu voir, certains navigateurs ne gèrent pas cette propriété. J'essaye donc de créer une feuille de styles compatible.

Le problème vient des images en fond. Le fond est découpé en 3 :
- Le haut
- Le milieu (1px de hauteur : c'est cette partie qui doit pouvoir s'étirer)
- Le bas.

La difficulté vient du fait que les contenus s'étalent sur ces 3 zones.

Actuellement, j'ai 2 versions :
1 version sans le scroll
1 version avec le scroll

Je ne suis pas convaincu d'être parti sur les meilleurs bases.

Bref, je cale un peu

Pourriez-vous y jeter un oeil ?

Un grand merci d'avance !
Modifié par nicolas.charlot (05 Jun 2006 - 15:09)

Ben l'un dans l'autre ça a l'air d'être plutôt bon. La structure est assez nette, à une petite nuance près : si à la fois la largeur et la hauteur de la page vont être figées, pourquoi s'embarasser de deux blocs pour dessiner le fond ? Un seul peut suffire.

mpop a écrit :
pourquoi s'embarasser de deux blocs pour dessiner le fond ? Un seul peut suffire.

Je me disais (peut-être à tord) que si le navigateur ne gèrait pas le scroll, dans ce cas, le site s'étendrait "proprement" sur une hauteur variable. D'où la zone du milieu...

Toujours pas trouvé la solution, mais je me suis aperçu en plus que Firefox/Netscape créaient un effet de scintillement avec les div scrollables...
Modifié par nicolas.charlot (05 Jun 2006 - 17:27)

Oublions ce problème de scintillement qui reste léger...

En revanche pour mon histoire de scroll

nicolas.charlot a écrit :
Oublions ce problème de scintillement qui reste léger...

Pas vu de scintillement pour ma part avec Firefox, et deux systèmes/écrans différents.

nicolas.charlot a écrit :
En revanche pour mon histoire de scroll

Qu'est-ce qui ne va pas dans la configuration actuelle. Ça m'a l'air bien, non ?

- Sous Firefox : le scroll fonctionne bien, mais si je désactive l'overflow, c'est la cata... Le bas ne descend pas malgré le "clear: both".

- Sous IE, c'est linverse : le scroll ne s'affiche pas correctement à cause justement du "clear" mais en revanche, ça marche mieux quand je le désactive.

Je rappelle que l'objetif est d'avoir un site compatible avec les navigateurs qui gèrent le scroll et ceux qui ne le gèrent pas. Dans ce dernier cas, c'est la zone du milieu qui doit s'étendre. Mais est-ce bien nécessaire car j'ai testé sous plusieurs navigateurs (Firefox 1.5, IE6, Opera 8, Netscape 7). Certes pas sous IE5.x mais d'après laltruiste, ça fonctionne sur ces navigateurs...

nicolas.charlot a écrit :
- Sous Firefox : le scroll fonctionne bien, mais si je désactive l'overflow, c'est la cata... Le bas ne descend pas malgré le "clear: both".

Il m'avait pourtant semblé que si. Par contre, comme ton image de fond pour le conteneur du bas est alignée (par défaut) en haut, le fait que le bloc s'étire ne se voit pas. Essaie avec une bordure pour ce bloc du bas, pour vérifier.

nicolas.charlot a écrit :
- Sous IE, c'est linverse : le scroll ne s'affiche pas correctement à cause justement du "clear" mais en revanche, ça marche mieux quand je le désactive.

Ah, c'est possible, ça ? Je n'aurais pas pensé avoir de bug particulier avec IE6 dans ce cas de figure.

Tu peux recharger la version 1, j'ai rajouter un border... On voit clairement (en tous les cas sur mon firefox 1.5.0.4) que le "clear" ne fonctionne pas...

Il doit y avoir une énormité, mais je ne voie rien...

nicolas.charlot a écrit :
Il doit y avoir une énormité, mais je ne voie rien...

Raah tu m'as fait suer sur ce truc ! Si tu donnes un style "visible" au hr (genre height: 20px; background: green;), on voit bien qu'il est repoussé tout en bas, comme de juste. Mais le div#pied reste stoïque.

Et effectivement il y avait une énormité :

div#pied {
	height: 204px;
}

Forcément, si tu lui dis de se figer à 204px de hauteur, il t'obéit !!!

Un petit min-height, plutôt ?

On est sur la bonne voie !

Sous IE, min-height n'est pas reconnue...

J'ai trouvé une piste ici-même.

Mais à priori, ça fait descendre le pied après. A creuser !

Pour le height/min-height, il va te falloir utiliser :
– soit un hack pour IE Win (le underscore hack est encore un des plus pratiques…) ;
– soit des commentaires conditionnels.

Si tu ne connais pas les commentaires conditionnels (solution que je préconise), je te laisse faire une recherche.

mpop a écrit :
Pour le height/min-height, il va te falloir utiliser :
– soit un hack pour IE Win (le underscore hack est encore un des plus pratiques…) ;
– soit des commentaires conditionnels.

Si tu ne connais pas les commentaires conditionnels (solution que je préconise), je te laisse faire une recherche.

Surtout qu'il n'y a pas a chercher très loin

A+
Modifié par gege71 (06 Jun 2006 - 23:12)

Bon,

J'ai pas eu le temps de poursuivre mes recherches. Je suis parti sur la version scroll uniquement. Ca marche sur tous les navigateurs que j'ai pu tester :
- IE 5.x, 6
- Firefox 1.5
- Netscape 7
- Opera 8

Dés que j'aurai 2 secondes, je tâcherai de faire mieux.

En tous les cas, merci pour votre aide

Allez, je vais mettre un chti [résolu] !