Problèmes de normes, de compatibilité ...

Salut à tous

Alors voilà je débute dans le html depuis peut. Je suis passé par la case du zéro avec leur tuto en html/css et ensuite je me suis interressé à ce site. Donc j'ai essayé de faire une page sur la base de votre tuto xhtml/css en 5 étapes. Le final donne ça(ne tenez pas compte du bout de code php c'est juste un test pour voir).
Sous firefox pas de problème mais sous IE il y a un décalage du menu vers le bas.
Je prend mon courage à deux mains et je commence mes recherches pour essayer de résoudre ce problème ... mais en essayant de le résoudre j'en ai trouvé une floppés d'autres
Je suis pourtant partie de la base xhtml que vous proposez mais rien à faire ma page n'est pas aux normes.
Là j'avoue que je suis complètement perdu, je m'embrouille, cherche des trucs et pour finir ben je tourne en rond et je ne fait rien .

Ma page est ici
Et ma feuille de style ici

Alors voilà quelqu'un peut me donner quelques conseil afin d'être plus pragmatique (peut être ) et de m'aider à débugger cette page ?
Merci à vous
Modifié par Nekros (24 May 2007 - 19:00)

Le problème des normes CSS, c'est qu'elles ne sont pas reconnues partout pareil.(et notamment sur IE qui a la plus forte part de marché)

Salut !

Je crois que tu as dû faire quelques erreurs en suivant le tutoriel

La preuve, via le validateur du W3C.

Première chose à changer, le choix de ton doctype. Utiliser XHTML 1.1 ne t'apporte rien, et n'est pas fait pour des pages servies en text/html. Reviens donc à XHTML 1.0.

Ensuite, corriger toutes les erreurs de validation du code XHTML (http://validator.w3.org) et, le cas échéant, les erreurs de validation de la feuille de style (http://jigsaw.w3.org/css-validator/).

Après ça, on s'occupera éventuellement des divergences d'interprétation des feuilles de style, Chandy Et en passant, le plus gros problème des CSS, c'est qu'IE6 ne les interprète pas toujours correctement, et de façon partielle. Mais à tout problème, il y a une solution (ou presque )

Ok j'ai donc mit le doctype en XHTML 1.0.
Pour les erreurs du code, j'en ai corrigées la majoritées mais ils en reste 5 dont je ne sait pas quoi corriger. Je comprend vite fait l'anglais mais là j'avoue, je ne voi pas de quoi ils parlent

Sinon le css je l'ai testé, juste deux avertissements qui me disent que j'utilise la même couleur pour le background d'un div que pour la couleur de texte d'un autres div. Mais rien de gênant, il y a des image en dessous (c'est le texte du menu réroulant).

Il ne reste que ces 5 fautes et ma page devrait être bonne.

Salut,

les trois premières sont triviales, ce sont juste les majuscules qui posent problème (les balises & les attributs doivent être écrits en minuscules, en xhtml).

La 4e : tu as placé une balise <h4> à l'intérieur d'une balise <p>. La balise <p> ne peut contenir que de éléments de type en-ligne[/url], ce qui n'est pas le cas d'une balise de titre <hn> (éléments de type bloc). Vire la balise <p>, elle n'a rien à faire là de toutes façons.

La 5e : même type d'erreur, mais avec <pre>. La balise <pre> est censée contenir du "texte préformaté". Elle est utile par exemple lorsqu'on veut mettre en évidence un texte comportant des indentations ou des espaces (code, ASCII art, ...). Qu'est-ce que ton pied de page fait là-dedans ?

C'est bon je suis aux normes. Sa a reglé le problème du menu qui était un peut plus bas avec IE. La présentation globale est maintenant bonne.
Il reste deux détails, le premier c'est le logo "Bagad Bubry" qui sort du cadre et le deuxième se sont les images du menu qui sont décalées.
Pour les images je vais les refaire et tirer la ligne verticale que l'on voit (normalement elle est dessous la ligne vertical violette), sa sera plus simple ^^

Sinon pour le logo dans mon css j'ai :

a écrit :
h1#header a
{
width: 400px ;
height: 100px ;
display: block ;
background: url(images/titre.gif) no-repeat ;
position: relative ;
left: 300px ;
top: 15px ;
text-indent: -5000px ;
}

Avec firefox sa marche mais avec IE sa décale vers la droite. J'ai changé la ligne en gras en mettent 100px. Avec IE aucun problème mais là avec firefox il est trop sur la gauche :s
J'ai up les deux style pour vous montrez là et là.

Merci beaucoup de ton aide Thomas
Modifié par Nekros (24 May 2007 - 19:00)

Il faut ajouter

position: relative;

au parent de ton lien par rapport auquel tu veux le positionner. Ici, à h1#header, je suppose.

Sinon, pour mettre le logo à droite, j'utiliserait plutôt

right: 10px;

à ta place. Ça revient plus ou moins au même, mais c'est plus simple que de calculer en partant de l'autre côté

Edit: en passant, quand tu veux utiliser z-index, tu dois aussi positionner l'élément (position: relative, absolute, fixed) pour que ça fonctionne.
Modifié par Thomas D. (24 May 2007 - 19:21)

J'arrive pas à mettre ça en forme mais je vais faire plus simple, en une image d'arrière plan qui sera entièrrement cliquable (au lieu du logo seulement).

Si quelqu'un arrive à résoudre ce problème je suis quand même prenneur
Modifié par Nekros (24 May 2007 - 20:59)

Mmmh c'est pas une mauvaise idée de tout mettre sur une seule image, mais alors il faut la mettre en dur, dans le code HTML.

Ça t'évitera les bidouilles pour cacher le texte du lien, tu n'auras qu'à renseigner correctement le texte alternatif

Par contre (oui encore un truc lol) les petites bars en dessous des titres ainsi que la petite image n'aparaissent pas sous IE o_0
Pourtant c'est juste une ligne verticale et une autre horizontale en css ... je voit pas sons problème à IE.