[Résolu] Couleur de fond et cadre pour élément de liste

Hello, it's a long time I did not meet you ...

Bon, j'ai un chouïa de problème... mazet... j'ai voulu créer des fiches, dont j'ai fondé l'architecture sur des list, pour des raisons sémantiques(balise UL et LI). J'ai put créer ce que je voulais en terme de design, mais j'ai un sérieux problème d'affichage.

Voyez vous-mêmes, en deuxième moitié de pages, ... faites défiler la page de haut bas (là ou il y a les fiches), et vous devriez vite voir le problème (sous IE6 en tous cas) http://www.les-ziboux.perso.cegetel.net/guide-translitteration-prenoms-en-arabe.html

Ce sont les entêtes de fiche, ils sont constitués d'un élément de list, doté d'une classe spécial (.key) tandis que les autres élément list n'on pas de classe. Cet élément particulier (toujours le premier) contient un div. Et c'est avec l'affichage de ce div que ça coince.

Y at-il un bug d'IE qui l'empêche d'afficher correctement un div dans un LI ? (sauf erreur, les DIV sont pourtant autorisé dans les LI).

Si persone n'a d'idée, c'est pas grave, je me débrouillerai bien tout-seul, comme d'hab... mais si vous avez des idées, elles seront les trés bienvenues.
Modifié par hibou57 (01 Oct 2006 - 21:04)

Cela ressemble furieusement à un bug de HasLayout dans Internet Explorer Windows.
http://www.test.blog-and-blues.org/haslayout/

Il semblerait qu'appliquer le layout (cf l'article traduit en bas de la page dont j'ai donné le lien ci-dessus) au div règle le problème.

Par contre, je ne vois pas trop pourquoi on aurait besoin de rajouter une div à l'intérieur du premier li. Donner un style (avec bordure et tout) à ce li me semble largement suffisant. Sauf bien sûr si on considère que ce premier li, avec sa mise en page destinée à le mettre en avant, est un titre de section. Auquel cas on utilisera un titre de section hN, soit à l'intérieur du premier li, soit en le plaçant juste avant la liste.

Je confirme

Et moi qui était tout content de répondre et d'avoir "trouvé", le problème "est fixé" en appliquant à .key un zoom, une position: relative ou une hauteur.

Tout est minutieusement listé et définit par le lien de mpop.

mpop a écrit :
Cela ressemble furieusement à un bug de HasLayout

Pour être furieux, c'est furieux (un coup ça s'affiche, un coup pas, un coup à moitié, etc ...)

mpop a écrit :
Par contre, je ne vois pas trop pourquoi on aurait besoin de rajouter une div à l'intérieur du premier li.

Beh non, justement, si j'ai mis un div, c'est parce que ce n'était pas suffisement. C'est juste un problème de présentation et d'espacament. La couleur de fond brun n'occupe pas toute la surface du LI, et le cadre est petit que le LI, donc je devais avoir un élément plus petit dans le LI, pour obtenir cette présentation. J'utilise souvent cette technique de deux div imbriqué ou d'une div imbriqué dans un autre élément, pour créer des effet visuel... compatibles autant que possile. Ces imbrications de div me permette soit des effets imossible à obtenir autrement, soit à créer une solution qui fonctionne sur plusieurs navigateur. Mais je n'en suis pas pour autant un fana du tape à l'oeil... (bien au contraire)

mpop a écrit :
Auquel cas on utilisera un titre de section hN, soit à l'intérieur du premier li, soit en le plaçant juste avant la liste.

pffff... les animaux nocture de mon genre ne dorme pas toujours assez c'est sure que j'aurais du y penser... dans mon cas, ce serait un h4.. et il serait à l'intérieur du LI... comment j'ai put ne pas le faire .. j'suis impardonnable

Merci pour le lien sur cette magniique page de Laurent Denis... (en plus j'adore la présentation de cette page... très bien)

Voilà-voilà, j'implore bien bassement votre pardon pour mes bourdes excrécable

Merci pour tout et bonne soirée

je viens de lire... et en fait non, ça n'est pas un problème de HasLayout (que je ne conaissais pas, et merci pour cette merveille qui est maintenant dans mes marques pages).

Ca ressemble plutôt à un problème de raffraîchissement de l'affichage. D'ailleurs je ne sais pas comment ça se présente chez vous. Une petite copie d'écran fera l'affaire.

Au cas où ce serait significatif, je précise que je suis sous Win98 (with IE6, of course and sorry)

Etape 1 : je viens d'ouvrire la page, et je suis déscendu en bas avec des pages-down, pour arriver à la première fiche :

http://img144.imageshack.us/img144/381/scr1ya4.png

-> On voit que le fond et le cadre de l'entête de la première fiche ne s'affichent pas, et qu'IE s'en fiche pas mal ( )

Etape 2 : je descend encore vers le bas avec un autre page-down

http://img502.imageshack.us/img502/7356/scr2po7.png

-> On voit que maintenant, l'entête de la fiche est partiellement affiché (il manque tout de même la bordure top). Ce qui vient est encore assez amusant aussi ...

Etape 3 : je remonte vers le haut, en défilant vers le bas, de manière à cacher partiellement l'entête en question.

http://img502.imageshack.us/img502/5859/scr3xu2.png

-> De là, nous pouvons arriver à l'un des deux cas qui suit.

Etape 4.1 : Partant de l'étape 3, aprés défilement avec une granularité page, l'entête apparaît entièrement.

http://img167.imageshack.us/img167/1197/scr4gg7.png

Etape 4.2 : Partant de l'étape 3, aprés défilement avec une granularité line, l'entête n'est pas correctement affiché.

http://img167.imageshack.us/img167/5505/scr5ug9.png


.... alors, est-ce que c'est un problème de HasLayout ? D'aprés ce que j'ai lu sur le page de MS, ça n'y ressemble pas... les layout ont d'autres effets... là c'est un bug du raffraîchissement apparement... vous pensez ?

Question très importante : est-ce qie l'affichage est le même chez vous ?
Modifié par hibou57 (30 Sep 2006 - 22:20)

Salut,

je te montre ce que je vois sur IE6 (c'est assez bizarre !) :



@+

hibou57 a écrit :
je viens de lire... et en fait non, ça n'est pas un problème de HasLayout (que je ne conaissais pas, et merci pour cette merveille qui est maintenant dans mes marques pages).

Ca ressemble plutôt à un problème de raffraîchissement de l'affichage. D'ailleurs je ne sais pas comment ça se présente chez vous. Une petite copie d'écran fera l'affaire.

Bon, pour être plus précis il me semble que ce n'est pas un problème de HasLayout, mais qu'il s'agit d'un problème qui peut se régler via l'utilisation du HasLayout.

En l'occurence, il me semble qu'IE Windows a pas mal de difficultés pour rendre les listes, et dessiner les différents éléments d'une liste (surtout si on combine avec des flottants, le positionnement relatif, ou le HasLayout sur certains éléments).

Attribuer le layout au bloc de titre oblige le moteur de rendu d'IE à calculer le position et la dimmension de ce bloc. Ce qui semble l'aider pour dessiner les bordures et le background du bloc.

As-tu essayé un simple zoom: 1; ou un height: 1%; sur tes blocs (div ou h4) de titre ?
C'est ce que j'ai fait de mon côté, et ça résolvait le problème...
Le test n'a pas été concluant pour toi ?

mpop a écrit :

Attribuer le layout au bloc de titre oblige le moteur de rendu d'IE à calculer le position et la dimmension de ce bloc. Ce qui semble l'aider pour dessiner les bordures et le background du bloc.

Même sans connaître les Layout à la Microsoft, j'avais déjà remarqué ce phénomène, qu'avec IE on résoud parfois certains problème en lui répétant les choses plutôt deux fois qu'une (par exemple width:100% avec un display:block, ou border-style:none avec une boite pour laquelle aucune bordure n'est indiquée, etc, etc).

mpop a écrit :

As-tu essayé un simple zoom: 1; ou un height: 1%; sur tes blocs (div ou h4) de titre ?
C'est ce que j'ai fait de mon côté, et ça résolvait le problème...
Le test n'a pas été concluant pour toi ?

Zoom est exclus, parce que ça n'existe qu'avec IE (je sais que les autres navigateur son minoritaires, et bien sûre moi même que cible d'abord IE, mais il y a des limites quand même, et je ne veux pas exclure tous les autres navigateurs si sévèrement). Height:100% fonctionne parfaitement! Waw! (mon maître, tu avais juste oublier deux zéro au passage).


Bon, pour résumer ces deux paragraphes : IE, il faut tout lui répeter... deux fois, sinon il s'en fout comme ça l'arrange

Je n'y avais pas pensé tout seul... parce que j'avais perdu les reflexes (et puis la fatigue) : ça fait un bout de temps que je n'étais plus à fond dans le CSS.... mais ça m'est tombé dessus en ajoutant un nouvelle élément dans mes XML... et il fallait bien leur attribué des styles CSS.

Au passage XML+XSL = le pied (même avec une transformation en local)

Bon, bon, je me permet du hors-sujet, maintenant que le problème est résolu...

Merci à toi Ô grand chef
شكرا جزلا لك يا مبوب الكبير : shoukran djazilan lika yâ mboub alkabyr - merci beaucoup à toi Ô mpop le grand

Merci aussi à Heyoan pour son amicale contribution...

Bon, c'est quoi ce forum qui m'a foiré mon hors-sujet ... pfff... de la purée de code unicode (tiens, ça rime, c'est rigolo)

Allez ....

là, je met ce forum au défit de me convertire ça en entités html ...

http://img404.imageshack.us/img404/576/mpopmc0.png

voilà, pour je te signifier toute ma gratitude ...

... sérieux, parce que c'est cette élément que je vais utiliser pour mes dictionnaires de racines... c'est dire l'importance de ces fiches...
Modifié par hibou57 (01 Oct 2006 - 21:04)

hibou57 a écrit :
Bon, c'est quoi ce forum qui m'a foiré mon hors-sujet ... pfff... de la purée de code unicode (tiens, ça rime, c'est rigolo)

Sans doute parce que poster des caractères arables sur un forum en iso-8859-1 (caractères pour les langues de l'europe occidentale) pose un certain nombre de problèmes ?

Sur un forum en UTF-8, cela aurait été possible.

hibou57 a écrit :
http://img152.imageshack.us/img152/3632/mpopze6.png

Merci bien.
Je me le garde sous le coude, tiens.

hibou57 a écrit :
Zoom est exclus, parce que ça n'existe qu'avec IE (je sais que les autres navigateur son minoritaires, et bien sûre moi même que cible d'abord IE, mais il y a des limites quand même, et je ne veux pas exclure tous les autres navigateurs si sévèrement).

La propriété non standard zoom est intéressante justement parce qu'elle n'existe que pour IE Win... qui est le seul navigateur à présenter des bugs de HasLayout. De plus, un zoom: 1 n'a aucune incidence sur la mise en page en dehors du fait de conférer le layout à l'élément concerné.

Par contre, il vaut mieux effectivement ne pas encombrer inutilement sa feuille de style, et placer les correctifs pour Internet Explorer Windows dans une feuille de style séparée, appelée via un commentaire conditionnel.
Cf. Les syntaxes de commentaires conditionnels pour IE Windows.

hibou57 a écrit :
Height:100% fonctionne parfaitement! Waw! (mon maître, tu avais juste oublier deux zéro au passage).

Non non, je n'avais rien oublié du tout.
Spécifier une hauteur en pourcentage pour un élément ne fonctionne que dans la mesure où son élément parent a lui-même une hauteur fixe (par exemple en pixels). C'est très rarement le cas (ou du moins ça devrait être très rare). Spécifier height: 1% ou height: 28% ou height: 100% n'aura donc aucun effet en l'absence d'élément parent dont la hauteur serait fixe. Le seul effet sera, dans IE Win, de doter l'élément de layout.

À titre indicatif, ce height: 1% pour attribuer le layout à un élément est appelé le « Holly Hack » (du nom de Holly Bergevin).

hibou57 a écrit :
Bon, pour résumer ces deux paragraphes : IE, il faut tout lui répeter... deux fois, sinon il s'en fout comme ça l'arrange

Non, ça serait plutôt : IE Win présente un certain nombre de bugs de rendu, que l'on peut « résoudre » via l'utilisation du HasLayout. Mais on utilisera le HasLayout avec parcimonie, car dans certaines conditions des éléments peuvent avoir un rendu erroné s'ils ont le layout. C'est une arme à double tranchant.

Je comprend que l'on puisse analyser les choses comme « IE il faut souvent lui dire les choses de deux manières différentes pour qu'il comprenne », mais ça ne repose pas vraiment sur quelque chose de concret.

hibou57 a écrit :
Au passage XML+XSL = le pied (même avec une transformation en local)

Il faudra que je m'y intéresse, alors.

mpop a écrit :

« Au passage XML+XSL = le pied (même avec une transformation en local) »
Il faudra que je m'y intéresse, alors.

Beh, sans faire un cours, je résume. Quand tu cré des pages, et que tu le fais dans la l'idée de créer, des pages, et encore des pages à l'avenir (c'est à dire, le contraire du cas ou quelqu'un bricole des pages au cas par cas, ... cas typiques des sites qui n'évoluent pas, et qui vous innonde de popup), dans ce cas, tu pense en terme d'élément de contenu, élément de discours, etc, etc...

Ces élément que tu imagine n'ont pas toujours une correspondance exact en HTML, parce que les éléments prévus par HTML sont basiques (et c'est une bonne chose).

Etant basique, les élément de HTMl sont idéaux pour servire de brique de base à des élément plus complexe (ex. les fiches - sur la page qui concernait ce topic).

Bien sûre, comme avec tout ce qui peut être formellement défini, et qui se répète souvent, on a spontanément envie d'automatiser.

C'est ce que permet le couple XML+XSL.

En plus, il évite les risque d'erreur, et il facilite les modification architecturale : comme tu défini une transformation de tes élément XML vers tes implémentation HTML, il te suffit de modifier le fichier qui défini les transformation, de reconstruire tout le site (par une simple commande) sur la base des nouvelles règles de transformations, et tu as un site tous neuf, construit selon la nouvelle architecture (supposée être bien mille fois mieux que l'ancienne, of course ), et tout cela, sans avoir eu besoin de modifier tes pages HTML une par une.

Bon, comme j'ai en projet de faire un long article sur la question sur mon site, je reppasserai poster le lien quand la page sera publiée (si c'est permis, je ne sais pas, et si ça interesse qu'elqu'un-e)
Modifié par hibou57 (01 Oct 2006 - 21:21)

Merci pour l'introduction. Ça correspond bien à l'idée que j'en avais (deux trois lectures en passant).

Si tu rédiges un article sur la question, tu peux toujours le signaler dans le salon ad hoc :
http://forum.alsacreations.com/list-3-XML--XSL--RSS--FOAF.html

(et mettre un lien à la fin de ce sujet, histoire de compléter cette introduction).