Bon, comme j'en parlais dans le topic des navigateurs internet, j'ai décidé de convertir un de mes sites web (celui qui est toujours à jour) en XHTML+CSS (il fonctionne actuellement en HTML classique avec des frames).
La raison de ce changement étant que ça a des chances de me servir à court terme au niveau professionnel, et que donc je cherche à avoir par avance l'expérience requise (dès qu'on dépasse le stade de site personnel, je pense que c'est pas mal de savoir faire des sites plus actuels, validés par W3C, c'est toujours un plus), et comme je vois qu'au moins Ubaj a l'air de s'y connaître un peu (et sûrement d'autres personnes), je préfère poster un topic directement que de faire ça en pm (avec le(s) intéressé(s), si ça peut resservir à d'autres un de ces quatres.
Sachant que je connaissais déjà le HTML classique, et que je fais mes sites à la main (bloc-notes), la plupart des bases que j'ai trouvé sur différentes sites (entre autres, celui-ci: http://www.siteduzero.com/tutoriel-3-13475-avant-de-commencer.html)
Cependant, ça n'a pas répondu à toutes mes questions, d'ou ce topic (en recours avant d'aller poster là-bas au pire).
Point 1 : Sachant que je travaille en étroite utilisation avec le validateur W3C pour tester chaque grosse modification, je viens de remarquer que visiblement, on ne peut plus embriquer des balises (au moins les <UL> en tout cas), c'est vraiment le cas ou c'est moins qui s'est foiré ? Ce n'est pas très génant en soit de toute façon, c'était juste pour décaler automatiquement les liens des menus de ce genre :
Titre
Lien 1
Lien 2
Lien 3
mais je pourrais toujours faire une classe pour les liens sous le .css pour et modifier leur marges, donc ce n'est pas très grave, c'est juste par curiosité.
Point 2 : La structure de mon site actuel ressemble à ça :
Et le code XHTML actuel ressemble à ça (pour le moment, 100% validé par W3C) :
Code: [Sélectionner]
Seulement, quelques questions :
Ici, par exemple :
Code: [Sélectionner]
On est obligé de préciser une classe pour chaque paragraphe ?
J'explique. Dans ma page, le première paragraphe est en rouge souligné, et le second en noir classique. Dans mon ancienne version,
j'ai évidemment utilisé des "<font color>" et autres, mais visiblement, il faut oublier tout ça en XHTML et les mettre dans le css si on veut que la page soit validée par W3C.
Donc, c'est moi qui me plante ou dès qu'on veut changer un paragraphe ou autre, on est obligé de faire une classe spéciale ? Donc, pour les couleurs, le gras, le souligné, l'italique (Et pareil pour les mots visiblements ? J'ai vu qu'il y avait une balise <span> exprès pour rajouter une classe sur un mot particulier si je ne dis pas de bétises)
Autre chose, chez moi, la plupart des blocs sont collés, c'est à dire que ça ressemble à ça :
Alors, pour le menu, je n'ai pas de problème particulier, il est déjà fait et prêt (que ce soit niveau XHTML ou CSS), à par le décalage des liens que je vais devoir rajouter dans le css. J'ai modifié la puce par l'icone qui était dans l'ancienne version directement dans le .css cette fois.
Pour le "corps" ("body_pages" dans mon code), j'ai eu au départ un petit problème mais qui était expliqué sur le site que j'ai linké au dessus et que j'ai réussi à résoudre. En gros, une fois le menu dépassé (niveau hauteur), la suite du corps de la page débordait sous le menu (ce qui a été réglé en mettant une marge de gauche de 200 pixels dans le css, comme mon menu fait une taille fixe de 200 piels). Pour afficher les "pages" en question dans le "corps", je n'ai pas de problèmes non plus (je savais déjà utiliser la fonction "include" de php donc il m'a suffit de faire les liens correspondants dans le menu, de rajouter le code des pages en question dans le fichier datas.php, donc voici un exemple sommaire :
Code: [Sélectionner]
Et ça fonctionne sans problème (il me suffira donc de refaire/convertir toutes les autres pages et le plus gros sera terminé. Surtout que pour l'ancienne version du site, j'utilisais déjà un .css pour les couleurs, base du design des pages et autres récupéré en demandant au webmaster du-dit site, donc le plus gros du boulot est déjà fait).
Le "pied de page" (footer), j'ai juste testé rapidement en mettant un texte, mais ça ne semble pas poser de problèmes apparants.
Par contre, le gros truc qui me pose problème pour l'instant, c'est l'en-tête (header).
J'ai mis une image en haut à gauche, et sur l'ancienne version, à la droite de l'image, il y a divers stats fait avec un script php (Nombre de visites total, nombre de visites de la journée en cours, nombres de news [ce dernier ne fait pas parti du script, c'est une simple ligne que je modifie à la main quand je crée la page d'une nouvelle news, vu que les news sont faites à la main, il n'y a pas trop de solutions pour les compter automatiquement, enfin bref, on s'en fout, c'était juste pour expliquer pourquoi la valeur était modifiée à la main]), et encore à droite de ça, une bannière.
Seulement, si je mets du texte à la suite de l'image à gauche de l'header, il apparait tout en bas de l'header en question, et donc dès qu'il y a deux lignes (en hauteur), la seconde ligne déborde sur le cadre en dessous et se retrouve dans le menu.
J'ai lu le site que j'ai linké et il parle de positionnement absolu (en pixels) pour des blocks, mais est-ce vraiment la seule solution ? (et aussi la meilleure ?) J'ai testé un peu, et j'ai réussi à placer mes lignes de stats où je voulais en jouant sur les marges (en faisant un ("div id=stats"), et pareil pour la bannière (en transformant le "inline" en "block" si je me souviens bien pour l'appelation sur le site, en rajoutant une class à l'image, puis en jouant aussi sur les marges), mais ça me semble un peu fait à l'arrache (car si ensuite je baisse le bloc des stats par exemple, la bannière descend aussi automatiquement donc ça me semble un peu buggé vu que ce sont deux blocs différents)
Pour les stats, je n'ai pas encore mis le code php, je me suis contenté de le réecrire à la main en attendant, avec de simples <p></p>,
Ca donne en gros ça pour le moment :
Code: [Sélectionner]
W3C valide toujours la page, mais je n'ai pas testé le CSS pour le moment, donc bon.
Surtout que si je mets plusieurs fois cette image à la place des stats et de la bannière :
Code: [Sélectionner]
Elle s'affiche bien 3/4 fois horizontalement et ne déborde pas sur les cadres en dessous, donc ça me laisse perplexe.
Donc j'aimerais bien avoir des avis là-dessus.
Dois-je obligatoirement déplacer mes blocs à la main (à part l'image de gauche qui tombe pile direct) si je veux rajouter des choses dans l'header ?
Et sinon, si quelqu'un a vu quelque chose qui le choque dans le code ou autre, qu'il n'hésite pas à le signaler, ça m'intéresse.
Post assez long :unsure:, mais comme il y a au moins la moitié qui est pris le code source et les images :sweatdrop:
Voilou, merci d'avance s'il y a des "experts" dans le coin :notworthy:
Posted on: Tuesday 09 September 2008, 07:30:16
Voilà, en repostant le topic en petits morceaux, j'ai trouvé la balise fermante code en trop qui faisait dérailler tout le reste, désolé pour squeeky qui lisait le topic pendant ce temps :sweatdrop: et qui a du se retrouver avec des morceaux de posts.
Edit : Lien de la seconde image modifié, je m'étais planté en mettant deux fois la même :sweatdrop:
La raison de ce changement étant que ça a des chances de me servir à court terme au niveau professionnel, et que donc je cherche à avoir par avance l'expérience requise (dès qu'on dépasse le stade de site personnel, je pense que c'est pas mal de savoir faire des sites plus actuels, validés par W3C, c'est toujours un plus), et comme je vois qu'au moins Ubaj a l'air de s'y connaître un peu (et sûrement d'autres personnes), je préfère poster un topic directement que de faire ça en pm (avec le(s) intéressé(s), si ça peut resservir à d'autres un de ces quatres.
Sachant que je connaissais déjà le HTML classique, et que je fais mes sites à la main (bloc-notes), la plupart des bases que j'ai trouvé sur différentes sites (entre autres, celui-ci: http://www.siteduzero.com/tutoriel-3-13475-avant-de-commencer.html)
Cependant, ça n'a pas répondu à toutes mes questions, d'ou ce topic (en recours avant d'aller poster là-bas au pire).
Point 1 : Sachant que je travaille en étroite utilisation avec le validateur W3C pour tester chaque grosse modification, je viens de remarquer que visiblement, on ne peut plus embriquer des balises (au moins les <UL> en tout cas), c'est vraiment le cas ou c'est moins qui s'est foiré ? Ce n'est pas très génant en soit de toute façon, c'était juste pour décaler automatiquement les liens des menus de ce genre :
Titre
Lien 1
Lien 2
Lien 3
mais je pourrais toujours faire une classe pour les liens sous le .css pour et modifier leur marges, donc ce n'est pas très grave, c'est juste par curiosité.
Point 2 : La structure de mon site actuel ressemble à ça :
Et le code XHTML actuel ressemble à ça (pour le moment, 100% validé par W3C) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>YGO-DM (Yu-Gi-Oh! Duel Monsters)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="styles.css" />
</head>
<body>
<div id="header">
<img src="rubon-gods.gif" alt="Image des trois cartes de dieux égyptiens" />
</div>
<div id="menu">
<div class="element_menu">
<h2 class="bloc_sections">Sections</h2>
<ul>
<li>Le site</li>
<li><a class="liens_menu" href="index.php?page=accueil">Accueil</a></li>
<li><a class="liens_menu" href="index.php?page=news">News</a></li>
<li><a class="liens_menu" href="url-externe">Forum</a></li>
</ul>
<ul>
<li>Général</li>
<li><a class="liens_menu" href="index.php?page=auteur">Auteur</a></li>
<li><a class="liens_menu" href="index.php?page=liste_episodes">Liste des épisodes</a></li>
<li><a class="liens_menu" href="index.php?page=staff_episodes">Staff des épisodes</a></li>
<li><a class="liens_menu" href="index.php?page=articles">Articles Divers</a></li>
<li><a class="liens_menu" href="index.php?page=cartes_dieux_egyptiens">Cartes de Dieux</a></li>
<li><a class="liens_menu" href="index.php?page=lyrics">Lyrics</a></li>
<li><a class="liens_menu" href="url-externe">Cartes de YGO Online</a></li>
</ul>
<ul>
<li>Divers</li>
<li><a class="liens_menu" href="index.php?page=episodes_fansubs">Episodes fansubs</a></li>
<li><a class="liens_menu" href="index.php?page=op-end_karaoke">OP/END (Karaoké)</a></li>
<li><a class="liens_menu" href="index.php?page=scripts_episodes">Script d'épisodes</a></li>
</ul>
<p class="clic_banniere1">Vous voulez aider le site ?</p>
<p class="clic_banniere2">Vous pouvez cliquer sur la bannière à raison d'une fois par jour et par connexion. Chaque clic rapporte 0,04 euros et est utilisé pour payer une partie de l'hébergement (le reste étant à ma charge) annuel du site.</p>
</div>
</div>
<div id="body_pages">
<? include('datas.php'); ?>
</div>
<div id="footer">
<p>© 2003-2008 Hiei-</p>
</div>
</body>
</html>
Seulement, quelques questions :
Ici, par exemple :
<p class="clic_banniere1">Vous voulez aider le site ?</p>
<p class="clic_banniere2">Vous pouvez cliquer sur la bannière à raison d'une fois par jour et par connexion. Chaque clic rapporte 0,04 euros et est utilisé pour payer une partie de l'hébergement (le reste étant à ma charge) annuel du site.</p>On est obligé de préciser une classe pour chaque paragraphe ?
J'explique. Dans ma page, le première paragraphe est en rouge souligné, et le second en noir classique. Dans mon ancienne version,
j'ai évidemment utilisé des "<font color>" et autres, mais visiblement, il faut oublier tout ça en XHTML et les mettre dans le css si on veut que la page soit validée par W3C.
Donc, c'est moi qui me plante ou dès qu'on veut changer un paragraphe ou autre, on est obligé de faire une classe spéciale ? Donc, pour les couleurs, le gras, le souligné, l'italique (Et pareil pour les mots visiblements ? J'ai vu qu'il y avait une balise <span> exprès pour rajouter une classe sur un mot particulier si je ne dis pas de bétises)
Autre chose, chez moi, la plupart des blocs sont collés, c'est à dire que ça ressemble à ça :
Alors, pour le menu, je n'ai pas de problème particulier, il est déjà fait et prêt (que ce soit niveau XHTML ou CSS), à par le décalage des liens que je vais devoir rajouter dans le css. J'ai modifié la puce par l'icone qui était dans l'ancienne version directement dans le .css cette fois.
Pour le "corps" ("body_pages" dans mon code), j'ai eu au départ un petit problème mais qui était expliqué sur le site que j'ai linké au dessus et que j'ai réussi à résoudre. En gros, une fois le menu dépassé (niveau hauteur), la suite du corps de la page débordait sous le menu (ce qui a été réglé en mettant une marge de gauche de 200 pixels dans le css, comme mon menu fait une taille fixe de 200 piels). Pour afficher les "pages" en question dans le "corps", je n'ai pas de problèmes non plus (je savais déjà utiliser la fonction "include" de php donc il m'a suffit de faire les liens correspondants dans le menu, de rajouter le code des pages en question dans le fichier datas.php, donc voici un exemple sommaire :
<?
if($page=="accueil"){include("accueil.php");}
if($page=="articles"){include("articles.php");}
else {include('error.php');}
?>
Et ça fonctionne sans problème (il me suffira donc de refaire/convertir toutes les autres pages et le plus gros sera terminé. Surtout que pour l'ancienne version du site, j'utilisais déjà un .css pour les couleurs, base du design des pages et autres récupéré en demandant au webmaster du-dit site, donc le plus gros du boulot est déjà fait).
Le "pied de page" (footer), j'ai juste testé rapidement en mettant un texte, mais ça ne semble pas poser de problèmes apparants.
Par contre, le gros truc qui me pose problème pour l'instant, c'est l'en-tête (header).
J'ai mis une image en haut à gauche, et sur l'ancienne version, à la droite de l'image, il y a divers stats fait avec un script php (Nombre de visites total, nombre de visites de la journée en cours, nombres de news [ce dernier ne fait pas parti du script, c'est une simple ligne que je modifie à la main quand je crée la page d'une nouvelle news, vu que les news sont faites à la main, il n'y a pas trop de solutions pour les compter automatiquement, enfin bref, on s'en fout, c'était juste pour expliquer pourquoi la valeur était modifiée à la main]), et encore à droite de ça, une bannière.
Seulement, si je mets du texte à la suite de l'image à gauche de l'header, il apparait tout en bas de l'header en question, et donc dès qu'il y a deux lignes (en hauteur), la seconde ligne déborde sur le cadre en dessous et se retrouve dans le menu.
J'ai lu le site que j'ai linké et il parle de positionnement absolu (en pixels) pour des blocks, mais est-ce vraiment la seule solution ? (et aussi la meilleure ?) J'ai testé un peu, et j'ai réussi à placer mes lignes de stats où je voulais en jouant sur les marges (en faisant un ("div id=stats"), et pareil pour la bannière (en transformant le "inline" en "block" si je me souviens bien pour l'appelation sur le site, en rajoutant une class à l'image, puis en jouant aussi sur les marges), mais ça me semble un peu fait à l'arrache (car si ensuite je baisse le bloc des stats par exemple, la bannière descend aussi automatiquement donc ça me semble un peu buggé vu que ce sont deux blocs différents)
Pour les stats, je n'ai pas encore mis le code php, je me suis contenté de le réecrire à la main en attendant, avec de simples <p></p>,
Ca donne en gros ça pour le moment :
<div id="header">
<img src="rubon-gods.gif" alt="Image des trois cartes de dieux égyptiens" />
<div id="stats">
<p>
Nombre Visiteurs : $compteur<br />
Aujourd'hui : $compteur_j<br />
Connectés : $compteur_c
</p>
<img src="banniere.jpg" class="banniere" alt="Bannière" />
</div>
</div>
W3C valide toujours la page, mais je n'ai pas testé le CSS pour le moment, donc bon.
Surtout que si je mets plusieurs fois cette image à la place des stats et de la bannière :
<img src="rubon-gods.gif" alt="Image des trois cartes de dieux égyptiens" />Elle s'affiche bien 3/4 fois horizontalement et ne déborde pas sur les cadres en dessous, donc ça me laisse perplexe.
Donc j'aimerais bien avoir des avis là-dessus.
Dois-je obligatoirement déplacer mes blocs à la main (à part l'image de gauche qui tombe pile direct) si je veux rajouter des choses dans l'header ?
Et sinon, si quelqu'un a vu quelque chose qui le choque dans le code ou autre, qu'il n'hésite pas à le signaler, ça m'intéresse.
Post assez long :unsure:, mais comme il y a au moins la moitié qui est pris le code source et les images :sweatdrop:
Voilou, merci d'avance s'il y a des "experts" dans le coin :notworthy:
Posted on: Tuesday 09 September 2008, 07:30:16
Voilà, en repostant le topic en petits morceaux, j'ai trouvé la balise fermante code en trop qui faisait dérailler tout le reste, désolé pour squeeky qui lisait le topic pendant ce temps :sweatdrop: et qui a du se retrouver avec des morceaux de posts.
Edit : Lien de la seconde image modifié, je m'étais planté en mettant deux fois la même :sweatdrop: