28173 sujets

CSS et mise en forme, CSS3

Suite à une discussion avec gcyrillus et à mes lacunes féroces en ce qui concerne les positionnements absolus et relatifs, j'ai réalisé cette petite page de test :
Positionnement absolu d'un bloc selon le positionnement du conteneur

J'ai essayé de faire didactique et je pense que ça donne une idée assez claire. Par contre il manque quelques explications du pourquoi du comment…

----
EDIT : Ah ah, j'ai voulu faire le malin, et je me suis pris quatre ou cinq bugs d'IE dans la tête. Ma page de test passe bien dans FF, Opera et Konqueror, mais bien entendu IE ne l'a pas trop appréciée. J'ai donc commencé par virer les largeurs et hauteurs fixes génératrices de layout (problème avec les éléments flottants et la bordure du conteneur).

Il me reste un (ou deux) gros bug dans le positionnement des blocs. Lorsque le conteneur global est en positionnement relatif ou absolu, tout fout le camp Smiley biggol
---

Pour mémoire, j'ai par ici un index de mes quelques tests CSS :
http://www.covertprestige.info/ressources
Ou directement en navigant dans le répertoire : http://web.covertprestige.info/test/
Modifié par mpop (27 Apr 2006 - 18:03)
Modérateur
bonjour,
Un dessin vaut parfois mieux qu'une explication longue, en tout cas ça a l'avantage d'etre explicite et clair.
:)
++

En repassant sur le topics, je trouve ton test vraiment interessant en ce qui concerne IE, j'avoue ne pas les avoir remaqué au prime abord, je n'avais pas regarder "dans IE" , n'imaginant pas une seconde qu'autant de problemes pouvait survenir ... decidement ce IE Smiley smile grrr
Modifié par gcyrillus (14 May 2006 - 02:22)
Bonjour,

Mes neurones se délectent de ces éclairages (presque) ultimes à propos des positionnements.

Merci ++
J'ai pu identifier les deux bugs avec IE. Version corrigée :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html

– bug avec un élément en positionnement absolu à l'intérieur d'un élément en positionnement relatif : si le conteneur en relatif n'a pas le layout, il y a un décalage horizontal. Bug corrigé et expliqué sur la page de test.

– bug avec le conteneur en positionnement absolu : la présence d'un élément ayant le layout fait que cet élément prend toute la largeur disponible, avec pour référent la page elle-même. Soit 100% de la largeur de page. Le conteneur en absolu s'étire pour contenir cet élément, et le tout dépasse allègrement la largeur normale de page.
Dans l'ancienne version de la page de test, un problème similaire se posait avec un hr (invisible) en clear: both;, dont la largeur était là aussi indexée sur la largeur totale de la page.

Bug "corrigé" en attribuant une largeur fixe au bloc conteneur.