28216 sujets

CSS et mise en forme, CSS3

Alors voilà j'ai une div positionnée en relative qui contient deux div, une non positionnée, et une positionnée en absolute pour avoir les deux côte à côte.

La non positionnée (dons le contenu doit être le plus long) permet aussi de « pousser » dynamiquement le contenu en dessous pour éviter de superposer.

Mon problème : Si je veux que la div non positionnée se trouve à droite (sans perdre son pouvoir « poussant ») et la div positionnée à gauche, je met une margin-left sur la div non positionnée égale à la largeur de celle positionnée pour laquelle j'indique aussi left:0.
Hors sous IE, et seulement sous IE, cela ne fonctionne pas car étrangement la positionnée ne se positionne pas par rapport à la div conteneur mais par rapport à la div non positionnée à l'intérieur, du coup la div absolute se place juste au dessus de l'autre !!

Si je change le margin-left en un position:relative + left alors cela fonctionne. Pourquoi donc IE prend il la div avec marge comme base de l'absolute??

Un exemple ici:
http://matgorb.free.fr/depot/noindex.html

Sous Safari, Firefox et Opera « Chine Hebdo » et « Agenda » son côte à côte et sous IE « Agenda » se pose sur « Chine Hebdo ».

« Voyage » et « Review » utilise le position:relative + left et se comporte normallement.

(cette page est un pre pre design, avec tout les styles en ligne pour debuggage)
J'ai un peu peur de répondre à coté, mais pourquoi ne mets tu pas tes blocs des cotés en float:left ou float:right ?

IE les reconnais et les interprete correctement, j'ai eu un problème de positionnement relatif et absolu, et je me suis retrouvé un peu bête quand j'ai tenté le float:left et que ça a marché Smiley biggrin
Parce que je préfère pas me frotter au float et rester avec position autant que possible.(c'est beaucoup plus simple pour ordonner les sources, et moins bugger, du moins je le croyais Smiley cligne )
Mais j'y pense, il faut peser le pour et le contre, je fais d'abord avec position, et après avec float, on verra.(avec float faut clear, et des fois ca devient un cauchemar)

Comme je l'ai dit, j'ai une solution, mais je voudrais savoir si c'est un bug, et s'il est connu, ou si c'est moi qui écrit n'importe quoi.
Modifié par matgorb (19 Jan 2006 - 15:05)
Bon comme je n'ai pas trouvé de réponse, et que personne ne semble en avoir ici, je vais passer aux float, en fait avec quelques précautions j'ai put migrer le tout sans problème.
Je vais tout de même étudier ce comportement étrange de position et faire quelques test sous différent navigateurs.
Bonjour,

Pour corriger dans IE le code utilisant le positionnement absolu : doter simplement le conteneur #rowwrapper1 de haslayout avec l'une ou l'autre des propriétés qui le permettent (width, height, float, position:absolute, zoom, etc.). Un zoom:1 dans une CSS en commentaire conditionnels conviendra parfaitement.

Voir http://test.blog-and-blues.org/haslayout/trad_temp.html et les tests correspondants dans http://test.blog-and-blues.org/haslayout/
Modifié par Laurent Denis (25 Jan 2006 - 09:09)
Laurent Denis a écrit :
Un zoom:1 dans une CSS en commentaire conditionnels conviendra parfaitement.


Ah c'était pour ça dans la feuille de style du nouveau blog & blues
A peu près, oui. Il s'agit de rectifier des bugs de layout d'IE liés surtout aux flottants, et IE5.0 (qui ignore le zoom) est laissé de côté, mais le principe est le même.

(Cela dit, la feuille en question est brute sortie du développement, et ne constitue pas pour l'instant un bon exemple à suivre Smiley cligne )
Modifié par Laurent Denis (25 Jan 2006 - 09:51)
Ce qui n'est pas très grave en terme d'objet d'étude (si j'ose l'expression).

Pour résoudre certains problème lié au flottants avec IE la propriété position:relative; fonctionne aussi.
Hum je me doutais de ce sacré haslayout.

Mais comme j'avais besoin de div poussant verticalement, et ça devenait assez fouillis (div dans div dans div)