28173 sujets

CSS et mise en forme, CSS3

Modérateur
bonjour,
j'ai 2 question pour ce topic et puis d'autre interrogation ou remarques.
la premiere.
En essayant de faire en css avec des div imbriqués un effet d'ombre sous une image, j'utilise une marge negative sur un block pour decaler le (dernier) conteneur de l'image vers le haut et a gauche . connaissant le comportement d'IE dans ce cas , j'applique dans le css un position:relative et un z-index, mais surprise la partie gauche debordant reste invisible.Pourquoi ?, est ce curable, ou faut-il changer la logique css que j'utilise, a savoir partir sur un conteneur flottant pour qu'il s'adapte a la taille de l'image sans avoir recours a des width:xxpx;.

2 eme question.
qui a tort ou raison?
j'ai 3 elements flottants dans le flux html, .J'applique un clear au 2 eme pour qu'il passe sous le premier, et je m'attend betement a voir le 3 eme se postionner a coter du 2 eme. Cette configuration visuelle est celle a laquelle je m'attendais dans firefoxe. Mais dans IE (et opera), le 3eme remonte a coter du premier, même avec un position relative (d'ou mon interrogation encore plus forte, si seul IE avait eu se comportement j'aurai consideé ceci comme une autre de ses erreur d'interpretation) .
Je n'arrive pas bien a saisir comment devrait se positionner les elements flottant les uns par rapport aux autres.
Ils ne sont pas tout a fait en dehors du flux (comme un element en positionnement absolue) par rapport aux autres element en position static (texte et images se decallent de la zone qu'ils occupent...), ils se repoussent les uns les autres , mais doivent t-ils se positionner par rapport au dernier elements flottants (si rien d'autres entre deux) ou par rapport a leurs conteneur ?

autre questions/remarques
...dans un element en relative contenant une boite en absolue, opera ignore les coordonné de positionnement en pourcentage...
...La balise
 <comment></comment>
..existe t-elle, a t-elle existé ?
Non valide , elle n'affiche pas son contenue dans IE, je n'ai trouver aucune info via google...

bonsoir/bonjour a tous et surtout bonnes fêtes !

<edit>la page avec les images en flottant: http://gcyrillus.free.fr/essai/cadre-ombre.html </edit>
Modifié par gcyrillus (25 Dec 2005 - 02:36)
Bonjour,

Sans avoir le temps de regarder plus avant : pour le 2, le comportement de FF est correct: un flottant left se place le plus en haut possible dans son conteneur réel ou fictif, mais selon le flux. Le 3e flottant, dans le flux, doit donc calculer sa valeur de top en fonction du clear appliqué au 2e flottant. IE bugue sur la propriété clear et placera effectivement ce 3e flottant à côté du 1er dans tous les cas. Opera reproduit accidentellement le comportement d'IE : je n'ai pas cherché quel propriété ou combinaison de propriétés étaient responsable, mais ce n'est pas dû au schéma général {float} + {float clear} + {float}, pour lequel il implémente CSS2.1 de la même manière que FF et Safari.

Très jolie page test. Mais il vaut mieux isoler et traiter séparément chaque question, dans des pages où la css est limitée au strict minimum, pour éviter justement les propriétés parasites. Les bonnes pages tests sont intrinsèquement très laides Smiley cligne

Sinon: <comment> est effectivement un élément propriétaire microsoft, assez intéressant d'ailleurs. Voir http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/comment.asp

<edit>Tiens, ma liste (exhaustive ?) des éléments propriétaires HTML :
a écrit :
audioscope, bgsound, blackface, blink, bq, comment, embed, fn, ilayer, keygen, layer, limittext, listing, marquee, multicol, nobr,
noembed, nolayer, nosmartquotes, plaintext, server, shadow, sidebar, spacer, wbr, xmp


( http://blog-and-blues.org/weblog/2004/12/24/364 )

S'il en manque, signalez-les : c'est l'occasion de faire un petit pointage Smiley cligne
Modifié par Laurent Denis (24 Dec 2005 - 08:25)
Modérateur
bonjour,
Merci de cette reponse.
(le bug des 3 flottant se reproduit avec opera avec une page contenant 3 elements flottant et le second en clear, pas de parasitage manifestement).

Pour la partie gauche uniquement restant deseperement invisible sous IE, ....en englobant l'ensemble dans une balise supplementaire (et hop une de plus Smiley smile ) et avec un padding empechant l'element en marge negative de sortir de l'ensemble, la partie gauche redevient alors visible. (finalement l'ombrage en css tant a perdre de son interet quand il y un grand nombre d'image a habillée ainsi sur une même page ....)le z-index me semble rester inefficace sur les debordement "gauche" dans le cas de div imbriqué !?.

Quand au bug "top:20%" ou autre coordonnées (en pourcentage) d'opera il ne se produit a priori que lorsque le conteneur direct en "position:relative" est "body", en deplacant l'objet dans un div en relatif, les pourcentages sont alors pris en consideration.Les pourcentages sont aussi pris en consideration si le conteneur n'est pas en relatif et l'objet se place par rapport a body (avec ou sans position relative pour body).

merci de m'avoir eclaire sur cette balise "comment".... je n'ai pas d'autre balise "made in IE" sous la main a ajouter a la liste pour le moment.

Je tacherais de mettre le minimum sur mes prochain test.
bonnes Fêtes encore !