Un codage CSS correcte ?

Bonjour,

En cours de création de mon site personnel, je m'aperçois d'erreur de codage (?). Problème récurent sur le web, mais le site n'est pas le même que l'on navigue avec Firefox ou Internet Exploreur, pire, ce n'est pas la même chose entre Firefox "sous linux" et Firefox "sous windows" !

Alors voilà, j'aimerais savoir si le code source vous semble correcte (propre). Sachant que chez moi (Firefox linuxien) j'obtiens ce que je cherchais à obtenir. (Voir pièce jointe (le bug de l'image de fond est uniquement du à la prise en image du site) )

Vous pouvez tester ici (le code source est simple à voir... ) http://pesnel.xavier.free.fr

Cordialement,

Pièce jointe :

Bonjour,

Un ptit UP

Merci de votre aide

Pour commencer, corriger les erreur du code HTML (les tag non fermés en particulier).

Ensuite j'avoue avoir beaucoup de mal à comprendre la structure de ta page, pourquoi include des tableaux d'uns seule ligne dans des DIVs ? L'utilisation de padding (pour tes titres par exemple) plutôt que de cellules vides pour laisser des espaces serait plus intelligente.

Utiliser des niveaux de titrage ainsi que des listes (et non des paragraphes dans certains cas) ne seraient pas un luxe (pérennité, maintenabilité, et cetera).

Bonjour,

Au delà d'éventuelles erreurs de validité du code (HTML et CSS), il y a surtout une conception de page assez mauvaise, qui indique une méconnaissance complète du design web, des contraintes du web, etc.

Notamment, l'auteur de la page a travaillé sur son écran avec sa résolution, sans se poser la question de conditions d'affichage différentes. C'est une erreur de débutant classique, mais qui a des conséquences assez catastrophiques (nommées «résultat imbuvable»), qui imposent d'apprendre de ses erreurs (se renseigner sur les résolutions, tester différentes configurations...) et... de recommencer complètement son design.

Conseil: utiliser un template existant, ou bien faire simplement du texte en noir sur fond blanc. Dans le deuxième cas, ça ne sera pas glamour mais avec quelques propriétés CSS ça peut ressembler à quelque chose (un simple body {padding: 50px; width: 600px; margin: 0 auto;}, par exemple), et ça sera bien plus lisible et accessible que l'existant.

Une piste intéressante: http://www.alsacreations.com/gabarits/

(Et, bien entendu: code HTML et CSS valide, utilisation des principaux éléments HTML tels que les titres, les listes lorsque pertinent, etc.)
Modifié par Florent V. (09 Jan 2009 - 16:31)