MFred
Habitué
 Hors-Ligne
Sexe: 
Messages: 340
Gnih ?
 
 
|
Salut,
Quelques remarques en vrac :
- Pourquoi as-tu mis un id au body ? En principe il n'y en a qu'une balise <body> dans tout le document non ?
- Tes titres dans le cadre noir (comme "POUR ETRE VU") sont des titres de paragraphe, il y a des balises réservées à cet usage : les balises <hX>, ou X prend une valeur de 1 à 6 en fonction de son importance. Ainsi, si on compare une page HTML à un cours :
- le <h1> serait le titre du cours
- les <h2> seraient les I, II ...
- les <h3> seraient les A, B ...
- les <h4> seraient les 1, 2 ...
Et caetera 
Certes, ta page est valide xHtml selon le validateur, mais il faut comprendre que ce n'est qu'un stupide bot qui ne fera pas la distinction entre ta page actuelle et la page ou tu appliqueras, j'en suis sur  , les conseils que je t'ai donné précédemment.
L'objectif du couple xHtml+css, c'est de séparer la mise en page et le contenu : si tu supprimes ta feuille de style, le visiteur doit être capable de comprendre comment est organisée la page. C'est pour cela qu'il faut utilisée les balises comme <hX> pour les titres, les <ul> pour les listes non-ordonnées, les <code> pour des exemples de code, les <p> pour les paragraphes. Cela s'appelle la sémantique.
Ainsi, aucune notion de mise en page ne devrait apparaitre dans la page. La mise en page, c'est le rôle des CSS. Voilà donc quelques autres conseils :
- Toute image qui n'a pas d'autre but que de décorer ne doit pas apparaitre dans la source de la page HTML. Pour l'image à coté des listes, il suffit d'utiliser la propriété list-style-image (http://www.htmlhelp.com/reference/css/classification/list-style-image.html), qui va placer l'image voulu avant chaque élément de la liste. Le rendu sera le même sous un navigateur graphique certes, mais sera beaucoup plus clair sous un navigateur texte.
- Pareil pour l'image avant tes (futurs) titres de paragraphe, il suffit de les mettre en background-image du titre, et de mettre un padding à gauche suffisamment élevé pour ne pas que le texte apparaisse sur l'image.
- Par contre, l'image du logo a bien sa place dans le code HTML puisque elle annonce le titre de la page. A ce titre, tu peux même la placer dans un balise <h1>. Par contre, il faut penser aux navigateurs non-graphiques : ils vont eux afficher le contenu de l'attribut alt de l'image. Ainsi, ils affichent à l'heure actuelle "logo", ce qui n'a aucun intéret. Mieux vaudrait mettre dans l'attribut alt le texte du logo, à savoir "dev.tribords.com".
- Il faut aussi éviter la répétition des <br /> ... Une fois que tu auras remplacé tes titres par des <hX>, le texte sera automatiquement placé à la ligne du dessous. Ca peut-etre également une bonne idée de regrouper le texte en paragraphe, avec la balise <p>.
Une dernière chose : pour désigner un élément dans une feuille de style, on peut utiliser id et class. En principe, il faut utiliser id pour des éléments uniques dans la page (#menugauche, #header, #footer), et class pour des éléments qui vont se répéter dans la page [.paragraphe par exemple).
Voilà, désolé pour la tartine
Je sais que ca a l'air énorme, mais une fois que tout ca est compris, il n'en ressort que du bon : design beaucoup plus modulable, pages allégées, meilleur référencement (le bot de Google agit comme un navigateur texte), site beaucoup plus accessible aux personnes handicapées.
Bonne chance !
|
Auteur 
