[Résolu] Page hybride: Besoin de conseils et de votre avis

Bonjour,

J'ai placé sur:
http://www.graphicwebpro.com/morgan/Situ_02/[/url]
une page que j'ai réalisé pour tenter entre autres de mieux me former aux CSS.
Dans un 1er temps, pour éviter les soucis de colonnes, j'ai créé une structure simple avec un tableau, dans lequel je place le contenu, géré par une CSS. Mais je compte ensuite, virer le tableau pour passer en full css, une fois que j'aurais résolu les divers problèmes en amont. Chaque chose en son temps !

Il y a sans doute, quelques erreurs (de débutant) dans la gestion des CSS, et c'est pourquoi j'aurais besoin de votre avis et validation, voire des correctifs que je devrais faire, pour que cette gestion de CSS soit la plus propre et la plus logique possible, histoire que je ne les reproduise plus.

Restent des points obscurs, que je n'arrive pas à élucider, et notamment:
- dans l'entête, je n'arrive pas à centrer les 3 éléments les uns par rapport aux autres, ou si j'y arrive, je n'obtiens pas le même résultat en IE6 et Firefox.
C'est correct sous IE6 et Opéra 8.5, décalé à gauche sous Firefox 1.0.7 et catastrophique sous Netscape 7, car les images des extémités sont tronquées, mais verticalement. N'ayant pas de Mac à ma disposition, je n'ai pas pu tester sous IE MAc ou Safari (si d'ailleurs, quelqu'un pouvait me dire le résultat, et me joindre un snap d'écran, ce serait super)

PAr aileurs,
- dans la colonne de droite, avec la gestion de la liste: j'obtiens le résultat sous IE6, à savoir, pas de puce par défaut, une puce A qui apparait quand on passe sur un lien et une puce B quand le lien a été visité.
PAr contre sous Firedfox 1.0.7, je n'obtiens pas de puces B après visite d'un lien ou alors uniquement sur "aujourdh'ui" ! Idem sous Netscape 7.0 et Opéra 8.5.

Si donc, vous aviez 5' à m'accorder pour critiquer ce travail, je vous en serais reconnaissant.

Cordialement
Furet

Alors déjà, ca peut etre très utile, surtout quand on débute, de verifier la validité de son code html et de sa feuille de style

T'as quelques erreurs dans ton html, à mon avis c'est de là que viens ton probleme de puces. (En tout cas moi ca passe bien sous opera, et mal sous ie...)

Et pour ton en tête tu peut t'inspirer des nombreux menus horizontaux qu'on peu trouver sur ce site ou ailleurs

Merci Resh des conseils,

En effet, avant de poster sur le forum, j'aurais dû déjà le passer aux divers validateurs.
CEla est fait, et conforme désormais en Html et CSS (seul pb, le site étant hébergé sur CI, celui-ci rajoute du code dans les pages, pour ouvrir ses pages de pub, qui ne franchit pas les validateurs.) Par contre, sur un hébergeur pro, aucun pb.

Il me reste donc à résoudre trois pbs:
- le 1 er, concernant les images en miniatures qui séparent les châpitres.
J'avais au départ placé cela dans une DIV.
C'était parfait, avec les images qui se centraient par rapport à la page.
Seul déaut et de taille, cela ne passe pas au validateur, considérant qu'un DIV ne doit pas se retrouver plusieurs fois dans la page avec la même dénomination.
J'ai donc, passé cela en classe, mais dans ce cas, je perds le centrage des images, les unes par rapport aux autres, et de plus, je suis obligé de faire plusieurs classes, en fonction des largeurs différentes des images miniatures, sinon, cela déborde sur la ligne inférieur.
JE n'ai pas trouvé de solution pour centrer ses images.
Quelqu'un aurait il une idée ?

2eme pb: les menus à droite.
Ils sont gérés par liste UL, avec gestion des hoover et visited.
Sous IE, une fois le lien visité, une puce conformément à ce que j'attendais, se place à la gauche de l'item de menu visité, mais cela ne se produit pas sous Firefox, ou alors que très rarement !?.
Une idée ? et pourtant mon code me semble correct.

3eme pb:
Concerne l'image du titre "That's All Funk" dans l'entête.
L'image du titre n'apparaît pas sous Netcape 7.02, alors qu'elle apparaît sous tous les autres navigateurs Windows. J'ai vérifié, ce n'est pas une question de taille. Y'a la place. Et je ne vois pas ce qui proqoue ce pb sous NEtscape.

Enfin, concernant les "alt" sur les images. Je suis obligé sous Firedox, si je vois les voir apparaître de doubler la fonction par une balise "title" (alors qu'ils apparaissent sous IE). ET si je vire les "alt" devenus des doublons, le validateur W3C refuse de me calider les pages ! Est-ce un pb connu sous Firedox ? D'ailleurs, pourquoi y a t'il deux balises pour la même fonction, qui si j'ai bien compris, sert à la navigation pour les handicapés ?

Bon, j'ai bien conscience que je suis un peu bavard et que ma liste est longue, mais si vous pouviez m'apporter quelques réponses, d'avance merci.

Cordialement
Furet
Modifié par furet92 (19 Dec 2005 - 18:54)

Bonjour,

furet92 a écrit :
D'ailleurs, pourquoi y a t'il deux balises pour la même fonction, qui si j'ai bien compris, sert à la navigation pour les handicapés ?

Les attributs alt et title n'ont pas la même fonction :
- alt permet de donner un équivalent textuel de l'image, accessible non seulement aux personnes non-voyantes, mais aussi à n'importe quel script : moteur de recherche, traducteur, navigateur texte, etc. Sa présence est obligatoire. Contrairement au comportement d'IE, alt n'est pas destiné à être affiché au survol de l'image.
- title permet d'ajouter une information supplémentaire, optionnelle, que le navigateur n'est pas tenu d'exploiter, et qui ne peut en aucun cas remplacer l'attribut alt. Le plus souvent, dans les navigateurs graphiques, title est affiché en tooltip au survol de l'image.

Dans la pratique et pour simplifier :
- ne pas utiliser title mais uniquement alt
- ou bien utiliser title et alt avec le même contenu
Modifié par Laurent Denis (13 Dec 2005 - 07:00)