Aller au contenu

Site en xhtml 1.1


Cleden

Sujets conseillés

C'est avec fierté et émotion que je vous présente mon premier site validé en xhtml 1.1.

Vous pouvez remarquer à quel point je sais exploiter les possibilités des CSS :P . Plus sérieusement, je me suis contenté du minimum pour l'instant, mais j'ai quand même viré quantité de <TABLE> et autre target. Le poid de mes pages a du diminué de 25%.

J'avoue que c'est très agréable de "nettoyer" ses pages, ce qui hésitent encore devraient s'y mettre. Par contre, ça m'a pris une journée pour quelques petites pages alors je n'imagine même pas ce ça donnerai avec des milliers.

Prochaine étape, le design, en attendant allez-y de vos petits commentaires.

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

C'est avec fierté et émotion que je vous présente mon premier site validé en xhtml 1.1.

Le validateur du W3C me dit le contraire ;)

De plus, le XHTML 1.1 ne doit pas être envoyé avec le type de média text/html mais application/xhtml+xml (type que certains navigateurs ne supportent pas encore)

Lien vers le commentaire
Partager sur d’autres sites

Il s'est passé un truc bizarre avec mon post, intervention d'un modérateur ?

Le validateur du W3C me dit le contraire

Ce doit être parce que je suis en train de traficoter mes puces dans la colonne de droite.

Loïc

Lien vers le commentaire
Partager sur d’autres sites

Oui, ton post a été déplacé par Monique pour couvrir les aspects HTML et CSS à partir d'ici. On pourra disucter ainsi plus en lien avec la thématique :)

Pour ce qui est de servir le bon type Mime, je t'invite à consulter cet autre sujet ou j'y ai laissé une pettie astuce PHP assez efficace :

http://www.webmaster-hub.com/index.php?sho...t=0entry23883

Lien vers le commentaire
Partager sur d’autres sites

Au fait, tes erreurs sont faciles à réparer :

1 - Virer ton type+disc et le gérer par CSS (list-style-type: disc;)

2 - Virer les <br /> entre les <li> et les remplacer par un padding en CSS

C'est tout. Tu vois le pattern ? ;)

En XHTML 1.1, tu dois réellement exercer une séparation entre ta structure de contenu et l'aspect de présentation. Je t'invite à prendre l'habitude de reléguer à la CSS tout ce qui à trait au visuel et de ne garder que la structure dans ton fichier HTML. Dans le cas des <br />, il y a un double mauvais usage. Premièrement, ils figurent à un endroit interdit (il faudraient minimalement qu'ils soient à l'intérieur des <li>). Ça c'est l'erreur HTML à proporement parler. Ensuite, en terme de sémantique, ils ne servent à rien. D'ou l'intérêt de les traiter par CSS à la place.

Lien vers le commentaire
Partager sur d’autres sites

Ok, apparememnt c'est bon désormais. Je n'ai pas tout compris aux puces mais ça a l'air de fonctionner.

J'ai utilisé ton petit script php.

Loïc

Lien vers le commentaire
Partager sur d’autres sites

Ok, apparememnt c'est bon désormais. Je n'ai pas tout compris aux puces mais ça a l'air de fonctionner.

Bravo, c'est effectivement valide. Qu'est-ce que tu ne comprends aux puces au juste ?

Lien vers le commentaire
Partager sur d’autres sites

Bravo, c'est effectivement valide. Qu'est-ce que tu ne comprends aux puces au juste ?

En fait, je pense qu'il doit y avoir une méthode plus simple pour utiliser des puces de différents niveaux, mais je ne l'ai pas trouvé.

Je cherchais également un moyen de règler le décalage de la deuxième ligne etc. Peut-être as tu un lien sympa ou tout ça serait expliqué ?

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

Il s'est passé un truc bizarre avec mon post, intervention d'un modérateur ?

Désolée, Loïc... je pensais que tu verrais mon message dans le forum Webdesign :wacko:

Lien vers le commentaire
Partager sur d’autres sites

Je cherchais également un moyen de règler le décalage de la deuxième ligne etc. Peut-être as tu un lien sympa ou tout ça serait expliqué ?

Un lien ? Il doit y avoir un truc là-dessus sur OpenWeb dans la section CSS (je suis à la course pas le temps de fouiller)... Si tu souhaites simplement ramener vers la gauche, sufit de réduire l'espace du margin-left ou du padding-left de la liste contenue dans la liste mère. Je sais que comme explication, c'est un peu mou, mais ça te donnera peut-être une piste en attendant d'avoir le temps de t'offrir mieux. :blush:

Lien vers le commentaire
Partager sur d’autres sites

Par contre, je ne suis pas sûr que l'affichage est tout à fait normal

ARRRGGNNN :evil: Non, en effet, cette présentation n'est pas vraiment normale. On dirait qu'il ne tient pas compte des classes crées pour les <UL> et <LI>. Il va falloir que je revois ça.

Merci en tout cas,

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

Denis ou Sibellius,

Pouvez-vous me dire si la présentation se fait toujours de la même façon sous firefox .

En fait, j'avais oublié de préciser l'unite (px) pour la largeur de mes colonnes de gauche et droite. J'espère que ça va fonctionner désormais.

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

J'ai ce message d'erreur avec FireFox

Erreur de parsing XML : tag ne correspondant pas. Attendu : </BR>. 
Emplacement : http://www.cap-sizun.com/
Numéro de ligne 140, Colonne 3 :

</div> --^

Par contre IE 6 est plus permissif :nono:

Lien vers le commentaire
Partager sur d’autres sites

C'est le code généré pour la page d'erreur 404 qui est à revoir (présence de <BR> dans le code).

D'autre part, par souci de compatibilité, les syntaxes du type

<img src="images/banniere.gif" class="border1" alt="Lézoulien, quatre locations dans le Cap-Sizun"></img>

ne sont pas recommandées, quoique valides et conformes.

Lien vers le commentaire
Partager sur d’autres sites

D'autre part, par souci de compatibilité, les syntaxes du type

CODE 

<img src="images/banniere.gif" class="border1" alt="Lézoulien, quatre locations dans le Cap-Sizun"></img>

ne sont pas recommandées, quoique valides et conformes.

Je dois utiliser <img />, c'est bien ça ?

Sinon, les colonnes de gauche et droite s'affichent-elles correctement ?

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

Je dois utiliser <img />, c'est bien ça ?

<img src="images/banniere.gif" class="border1" alt="Lézoulien, quatre locations dans le Cap-Sizun" />

;)

Lien vers le commentaire
Partager sur d’autres sites

Sinon, les colonnes de gauche et droite s'affichent-elles correctement ?

Ah ! Il faudrait l'épingler, celui-là, car c'est un vieux classique et il revient souvent ici ;)

Tes menus sont décalés vers la droite dans FireFox, Mozilla... en raison d'un problème de margin/padding.

Les marges gauches des listes <ul> ne sont pas gérées de la même manière par IE/Opera et les navigateurs basés sur gacko (Mozilla...)

- IE appliquer par défaut aux <ul> une marge gauche de 40px par défaut

- gecko leur applique un padding gauche de 40px par défaut

Ici, tu as spécifié une marge seulement :

- tout va bien dans IE qui applique ta marge et un padding-left: 0 par défaut;

- tout va mal dans Gecko qui ajoute son padding-left: 40px par défaut à ta marge.

Pour régler l'indentation, il faut donc spécifier à la fois la marge et le padding gauche.

Voir http://devedge.netscape.com/viewsource/2002/list-indent/ (en anglais. Je l'avais traduit autrefois, mais le site devedge a été arrêté avant que la traduction ne paraisse... Il faudrait que je republie ça quelque part ;) )

Lien vers le commentaire
Partager sur d’autres sites

Ah ! Il faudrait l'épingler, celui-là, car c'est un vieux classique et il revient souvent ici ;)

Tes menus sont décalés vers la droite dans FireFox, Mozilla... en raison d'un problème de margin/padding

Si je puis me permettre, j'évoque ce problème ici (partie 3) : http://www.alsacreations.com/articles/compatibilite/

Lien vers le commentaire
Partager sur d’autres sites

Hum, regarde ça : http://validator.w3.org/check?uri=http%3A%...www.xethorn.net, ensuite regarde le code source, tu comprendras rapidement que tu as pas mal d'erreurs :

Sorry, I am unable to validate this document because on lines 5-7, 15, 30, 36, 40, 48, 54, 63-64, 68, 70, 75, 79, 90, 96, 101, 103, 105, 107, 111, 113-114, 120, 132  it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

En gros, ta page ne contient pas toutes les informations nécessaires pour que le validateur puisse comprendre le format de ta page (ou l'encodage : UTF-8 ou ISO ?)

Je suppose que c'est apache qui gere ça mais oublit pas de rajouter, par exemple,

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Ou

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Pour l'UTF-8.

Bon, je te laisse regarder d'avantage,

+++

Lien vers le commentaire
Partager sur d’autres sites

Généralement, pour du contenu en français, les gens ont tendance à privilégier iso-8859-1 sur utf-8...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...