Discussion :

[boutmos]

Bonjour,

J'ai un bug difficile a expliquer sur mon site :

j'ai plusieurs listes qui me servent de menus. Sur celles ci je mets un display: block; sur le <a href> pour pouvoir cliquer dans le block conteneur plutôt que sur le texte.

De plus sur ce site j'ai 2 feuilles de style, 1 pour le mode "graphique" et une autre pour le mode "accessible"

et la probleme: autant mon menu fonctionne bien en mode graphique sur IE FF etc

Autant le menu en mode accessible ne prends pas en compte le display: block sur le <a href> sous IE6...(ok pour safari, FF)

D'un coté je travail en Px et de l'autre en % c'est a mon avis de la que viens la différence.

Mais là ou je ne comprends vraiment plus rien c'est si je mets un width: 100%; après le display: block sur un des 2 menu a gauche, c'est celui qui n'est théoriquement pas affecté qui se comporte bien sous IE et inversement... et si je le mets sur les 2 , plus aucun d'eux ne fonctionne ... Je pige vraiment pas le comportement de IE la !

Le site ici

Pour accéder a la feuille de style qui pose probleme sous IE , il faut cliquer sur "Texte Uniquement" en haut a droite.

J'espère avoir etait clair....

[Erwan31]

Bonjour,
rapidement tu as sans doute à faire à un problème de ce type :
http://www.test.blog-and-blues.org/h...sts/list5.html
C'est ce qu'on appelle un bug de haslayout. Le width:100% confère au lien de type block un état particulier propre à IE > la layout (ou haslayout).

Puisque tu as l'air de t'intéresser à l'accessibilité, tu as un certains nombre de problèmes... notamment lors de la désactivation des images.
Le choix d'une version texte (pour accélérer accélérer l’affichage de la page par exemple) se fait du côté de l'utilisateur en désactivant les images tout simplement. Autrement dit ce genre de possibilité est du ressort du navigateur
et non de l'auteur. Et si les image ne sont pas chargées pour une raison ou une autre il y a perte d'information.

[boutmos]

Ok merci je vais me regarder ton article et je reviendrais sur ce post pour vous tenir au courant.

Je viens de remarquer chez moi que sur IE7, il faut qd mm que je mets ma souris sur le texte pour activer l'effet de a:hover...

Donc en résumé: marche a moitié sur IE6 , marche pas du tout sur IE7

Le probleme c'est qu'au boulot je n'ai aucune machine qui dispose de IE7 pour mes tests... et pour IE6 j'ai une machine XP virtuelle sous mac os X

A propos de l'accessibilité :

Je débute un peu dans ce domaine, je ne me suis pas posé la question de savoir si les images devraient être chargée ou non mais simplement de les désactiver par CSS en faisant un img { display : none; }

De toute manière elles seront chargées dans tous les cas (théoriquement) car la page HTML est la même en mode graphique et mode "Texte uniquement" , le bouton ne fais qu'un switch de la feuille de style et un reload pour rafraichir afin d'appliquer les changement CSS.

En gros ce j'avoue que c'est pas ce qui se fait de mieux de ce coté là mais çà a été jugé suffisant par mon boss...

Merci du conseil a toute

[Erwan31]

N'oublie pas que la loi de Février 2005 impose (oblige) une mise en conformité des sites d'établissements publics aux normes d'accessibilité...
Bref je e conseil vivement de travailler l'accessibilité (et l'ergonomie) de ce site
sur lequel il y a pas mal de défaillance.
Tes titres de colonnes doibvent être structurés à l'aide de Hn par exemple.

[boutmos]

Au niveau de l'ergonomie , ou as tu vu des defaillance et que me conseils tu ?

Je suis très tributaire des décisions prises par la division en charge de la communication, en gros je suis juste là pour mettre en place techniquement ce qui a était décidé et pour apporter une touche d'esthétisme.

Je ne suis pas titulaire , çà fait 1 an que je suis sur ce poste et je ne suis donc pas très au courant des "obligations" de conformité des sites d'établissements public

Ce qui est sûr c'est que je fais de mon mieux et que c'est mon "vrai" 1er site avec une mise en page CSS.

Sinon pour les titres de colonne oui j'avais mis des Hn mais j'y ai renoncé pour des histoires de "déséquilibre" entre ce que me donnait IE et les autres navigateurs.

[boutmos]

de retour !! =)

Bon voila, je n'arrive toujours pas a faire ce que je veux sur IE6. je dois mettre ma souris sur le texte pour que le hover se produit. Je sais que çà ne marche pas parce que je n'ai pas mis de width sur la balise a, et si j'en mets une j'ai un gros probleme de marges.

Par contre pour mes 2 feuilles de styles (graphique et accesibile) ; la méthode fonctionne bien pour IE7, FF, SAFARI et OPera

dans tous les cas je suis parvenu a ce constat :
- Marche sur IE6 pas sur IE7 et fonctionne sur les autres browsers
ou
- Marche sur IE7 pas sur IE6 et fonctionne sur les autres browsers aussi

Dois m'obstinner ou faire une concession ? j'aime pas trop laisser des trucs que je n'arrive a résoudre

[desert]

Bonjour,
As-tu testé avec un height:100% sur tes balises a (qui confèrent elle aussi un layout) ?
Sinon tu peux toujours utiliser les commentaires conditionnels au cas où les problèmes ne se rencontrent que sur IE6 ou IE7.

[boutmos]

j'etais justement entrain d'envisager les commentaires conditionnels pour IE6 mais en fait cela n'est pas possible dans mon code car :

j'utilise 2 feuilles de style qui tapent sur un seul squelette (HTML)
si j'utilise un hack pour la CSS1 çà a donc un impact sur la CSS2, cela demanderais un code trop lourd javascript pour detecter quelle est la feuille CSS en cours et donc quel hack utiliser en conséquence.

un height ??? euh non pas utilisé çà , je me suis focus sur les display: block et autre width: 100% etc

Je vais voir, merci

[Erwan31]

Désolé pas le temps de me pencher sur ton problème.
Espérons que quelqu'un t'y répondra.

Ergonomiquement, par exemple ta colonne centrale est trop large, les lignes de textes sont trop longues. Tu ne devrais pas dépasser 90 caractères par ligne ou environ 450px de large sachant que la la justif idéale su situe aux alentours des 55 signes (caractères+espaces) par ligne voire moins que ça.

> Il te faut plus de marges entre chaque colonnes.

> Rien n'indique que le lien eduscol pointe sur un autre site. (ajouter une icône de sorti, voir sur Wikipedia en footer)

> La rub. Services en Ligne n'est pas hyper explicite.

> Augmenter un peu l'interligne (1.35em minimum > propriété line-height) de tes textes courants.

> Choisir une unité de font-size en % ou em pour éviter de verrouiller l'agrandissement du texte sous IE (IE6 et IE7 en zoom texte)

Pour les titre ça ne devrait pas être une raison. Il te faut fixer les marges de ces titres avex des valeur de marge en em pour que celles-ci s'agrandissent proportionnellement à la taille du texte.
Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

h2 {margin: 1.6em 0 0.8em}

Sinon pour un premier site en CSS c'est quand même pas mal et assez propre, t'es sur la bonne voie

[boutmos]

Bon voila, problème RÉSOLU !!! merci pour l'astuce du height : 100% çà me "créer" le layout de manière transparente sans les problème de bordures dû au width: 100%

Sinon pour Erwan :

houlà tu as l'air d'y connaitre un bon gros rayon en accessibilité / ergonomie. Faudrait je me documente là dessus , si jamais tu as des liens, je suis preneur.

En ce qui concerne les tailles de font en em , je m'en suis aperçu un peu tard et là, je n'ai plus le courage de faire marche arriere pour tout rectifier ( J'ai peur que çà entraine aussi de revoir les images), surtout que la mise en production du site est pour bientot et que j'ai encore pas mal de choses a finir et que tout ne depends pas de moi.

Sinon pour les espacement entre les colonnes je pense pouvoir les augmenter sans trop de problèmes. Pareil pour l'interligne. C'est vrai que selon certains articles , j'ai une impression d'"étouffement". Mais je dois faire avec les rédacteurs de l'anciens site et là j'ai un gros problème :
J'utilise un CMS et certaines personnes ont rédigé des articles en y incorporant du code HTML

Sinon pour un premier site en CSS c'est quand même pas mal et assez propre, t'es sur la bonne voie

Merci bcp çà fait plaisir.

Sinon merci beaucoup a tous pour ce coup de pouce et ces avis. @ bientot

[Erwan31]

Pour l'accessibilité, tu as les 2 révérenciels français (qui sont des méthodes d'application des WCAG1.0/2.0) Accessiweb et RGAA.

Pour l'ergonomie, tu as beaucoup de sites... les principaux frnaçais
sont
l'ergonome, ergolab et ergologic.
Voir aussi
> Redaction.be
> http://blog.usabilis.com/

En anglais
> http://www.useit.com/

[boutmos]

merci bcp je me potasserais çà demain au boulot =)

Pour ce soir çà sera guitare pour me détendre =) bonne soirée