28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de désespérer avec IE6 sur un problème de position relative. J'ai déjà pas mal cherché mais en vain.

Pour éviter de vous faire des explications tordues et complexes, j'ai fais un exemple de mon problème : http://webcarzu.info/pub/demo.html

Je veux pouvoir placer comme je veux la boite rouge, mais soit elle sort du flux, soit mon scroll est cassé....

Des idées sont le bienvenue Smiley smile
Modifié par BozoCarzu (21 Feb 2007 - 14:14)
Bonjour,

Il me semble que les notions d'éléments positionnés et de flux te sont encore bien approximatives. Je te conseille vivement la lecture des articles suivant:
- Initiation au positionnement CSS : 1.flux et position relative
- Initiation au positionnement CSS : 2.position float
- Initiation au positionnement CSS : 3. position absolue et fixe

N'hésite pas à revenir pour poser tes questions aussi souvent que nécessaire, mais je crois que le travail commence par (re)partir sur de bonnes bases solides et claires.

Cordialement,
Benjamin
Merci pour cette réponse, mes bases de positionnement sont je pense solide, c'est vrai que mon exemple peu parraître un peu trash mais c'est parceque je l'ai sorti d'un contexte plus complexe.

As-tu une solution pour mon problème ?
Modifié par BozoCarzu (20 Feb 2007 - 15:42)
Waouh, ça c'est un exemple minimal.

Par contre, je ne vois pas trop où est le problème. Dans le premier cas, l'élément positionné en absolu se place par rapport à son plus proche parent positionné... qui correspond ici à la zone d'affichage (ou à html, je ne sais plus trop...).

Dans le deuxième cas, l'élément positionné en absolu se place également par rapport à son plus proche parent positionné, c'est à dire par rapport à son bloc parent positionné en relatif.

Bien sûr, le scroll ne marchera pas avec Konqueror, Safari, Opera... c'est le problème lorsque l'on utilise une propriété non-standard telle que overflow-y (propriétaire IE, implémentée également par Firefox... et que l'on retrouvera peut-être dans CSS3 mais c'est pas pour demain).
overflow: auto;

Ça marche pas trop mal non plus. Smiley cligne
Même si, bien sûr, c'est loin d'être une bonne idée de figer la hauteur d'un élément et d'utiliser des barres de défilement internes. C'est pas bon pour l'ergonomie, pour l'accessibilité, etc.

Ah oui, bug IE6 : le bloc positionné en relatif s'affiche entièrement et ne tient plus compte du défilement. Tiens, il est sympathique celui-là. Seule solution trouvée : ne pas mettre le positionnement relatif à un bloc à l'intérieur du conteneur en overflow: auto, mais à ce conteneur lui-même. Ce qui demandera peut-être quelques corrections pour le positionnement exact du bloc positionné en absolu.
Je crois surtout que si tu avais montré un exemple un peu plus concret de ce que tu veux faire (quelle présentation pour quel type de contenu), ça aurait été plus simple de te proposer des solutions. Smiley cligne