Hiei-

  • Waffou
  • Messages: 3 592
XHTML+CSS, 2 hits combo!
« le 9 Septembre 2008 à 07:44 »Modifié le 9 Septembre 2008 à 07:53 par Hiei-
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]
<!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 :

Code: [Sélectionner]
<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 :

Code: [Sélectionner]
<?

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 :

Code: [Sélectionner]
<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 :

Code: [Sélectionner]
<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:

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Re: XHTML+CSS, 2 hits combo!
« Réponse #1, le 9 Septembre 2008 à 08:34 »
salut ! Alors pour ma part je dirai plusieurs choses :

remplace notepad par notepad++ qui a quelques chtites fonctions super pratiques et qui est gratuit...

ensuite pour tes blocs, tu peux essayer le positionnement avec du float, ça marche bien sur ff et ie (et safari)

de ce genre :

[bloc float:left] bloc largeur adaptable à la résolution de la page [bloc float:right]

pour ce qui est de dire un style par paragraphe, si l'unique chose que tu changes est la police ou couleur de fonte, niveau place dans le code c'est kif kif de faire en brut dans la page ou de faire un style dans la css, à toi de voir ensuite si ces styles ne seront pas réutilisés par d'autres pages, ce qui peut vite rentabiliser la création d'un style dédié à chaque fois...


après je suis pas encore un dieu dans le domaine, je le serai ptètre jamais^^ mais faut voir si oni men naoki peut pas te tuyoter plus efficacement que moi...
Glazourected !

Hiei-

  • Waffou
  • Messages: 3 592
Re: XHTML+CSS, 2 hits combo!
« Réponse #2, le 9 Septembre 2008 à 08:55 »Modifié le 9 Septembre 2008 à 09:50 par Hiei-
Pour la résolution, ce n'est pas trop un problème.

Pour le moment, le site est uniquement (comme l'ancienne version) pour une résolution de 1024x768 (taille fixe).

Je verrais une fois la conversion terminé pour l'adapter en taille variable (pour ceux qui ont une résolution supérieure), ceux qui ont une résolution inférieure, je ne m'en occupait pas jusqu'à maintenant, mais je pourrais toujours menu des menus qui apparaissent quand on passe la souris dessus au milieu de la page (ou tout en haut) pour gagner de la place.

Pour le code brut, visiblement, W3C n'aime pas trop ça (ou alors je n'utilise pas la bonne syntaxe compte tenu du xhtml) car les trucs du style, "<font face="verdana" color="#XXXXXX" size="2"></font>, il n'en veut pas (ça ne me dérange pas plus que ça car je n'ai pas trois mille mots/lignes à changer dans ce style, mais bon, c'est juste pour être sûr et comme je veux absolument que chaque page soit validé par le W3C).

Pour les blocs, en fait le positionnement est ok, j'ai d'ailleurs déjà utilisé un "float:left" pour le menu (il m'a fallu ça + la marge de 200 pixels à gauche pour le cadre du milieu pour qu'il en déborde pas en dessous du menu si le texte de la page est trop long).

C'est le positionnement à l'intérieur du premier bloc donc je veux être sûr qu'il n'y a que cette solution (et donc être aussi sûr que c'est la meilleure).

J'en profite pour rajouter le code du css, histoire d'être bien complet :

Code: [Sélectionner]
body
{
   width: 1018px;
   margin: 0px;
   background-color: #F4E8D0;
}

#header
{
   background-color: #F4E8D0;
   height: 122px;
   margin-bottom: 0px;
   margin-left: 0px;
}

.stats
{
   color: #000000;
   text-align: center;
   font-family: Tahoma;
   font-size: 10pt;
   font-weight: bold;
   position: absolute;
   right: 52%;
   bottom: 86%;
}

.banniere_click-fr
{
   display: block;
   position: absolute;
   left: 120%;
   bottom: 00%;
}

#menu
{
   float: left;
   width: 200px;
}

.element_menu
{
   background-image: url("pierres-pharaon.jpg");
   background-repeat: repeat-y;
   border-left: #000000 1px solid;
   border-right: #000000 1px solid;
}


.element_menu h3
{   
   color: #000000;
   border-top: #708FBE 1px solid;
   text-align: left;
   font-family: Tahoma;
   font-size: 12pt;
   font-weight: bold;
   
}

.element_menu ul
{
   list-style-image: url("puce.gif");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
   margin-left: 0px;
   font-family: Tahoma;
   font-size: 10pt;
   font-weight: bold;
}

.element_menu a
{
   color: #000000;
}

.element_menu a:hover
{
   color: #FF0000;
   text-decoration: underline;
}

.liens_menu
{
   color: #000000;
   text-decoration: none;
}

.bloc_sections
{
   background-color: #000000;
   color: #FFFFFF;
   text-align: center;
   font-family: Tahoma;
   font-size: 12pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.clic_banniere1
{
   border-top: 1px solid black;
   color: #FF0000;
   text-align: center;
   font-family: Tahoma;
   font-size: 10pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
   text-decoration: underline;
}

.clic_banniere2
{
   border-bottom: 1px solid black;
   color: #000000;
   text-align: center;
   font-family: Tahoma;
   font-size: 9pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
}


#body_pages
{
   margin-left: 200px;
   margin-bottom: 0px;
   padding: 5px;
   background-color: #FFFFFF;
   border: 1px solid black;
}

#footer
{
   width: 816px;
   padding: 0px;
   margin-top: 0px;
   margin-left: 200px;
   text-align: center;
   color: #000000;
   background-color: #FF0000;
   border: 1px solid black;
}

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re: XHTML+CSS, 2 hits combo!
« Réponse #3, le 9 Septembre 2008 à 11:17 »Modifié le 9 Septembre 2008 à 11:21 par Amir
Citation de Hiei- le 9 Septembre 2008 à 07:44
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)
C'est déjà un très bon point pour toi, rien ne vaut de mettre la main dans le camboui et comprendre réellement les mécanismes. Comme Matt, je te conseille d'installer notepad++, c'est quand même plus sympa la coloration syntaxique.
De même que je te convie à installer les plugins "Web Developper", "Html validator" et "Firebug" sous Firefox, c'est quand même super pratique de pouvoir vérifier des trucs directement à partir du navigateur (en cliquant sur un élément, tu peux connaître le(s) style(s) qu'il emploie et autres trucs pratiques).

Pour ton menu, tu peux essayer un truc du genre:

Code: [Sélectionner]
<h2 class="bloc_sections">Sections</h2>
<ul>
<li>
<span>Le site</span>
<ul>
<li><a href="index.php?page=accueil">Accueil</a></li>
<li><a href="index.php?page=news">News</a></li>
<li><a href="url-externe">Forum</a></li>
</ul>
</li>
<li>
<span>Général</span>
<ul>
<li><a href="index.php?page=auteur">Auteur</a></li>
<li><a href="index.php?page=liste_episodes">Liste des épisodes</a></li>
<li><a href="index.php?page=staff_episodes">Staff des épisodes</a></li>
<li><a href="index.php?page=articles">Articles Divers</a></li>
<li><a href="index.php?page=cartes_dieux_egyptiens">Cartes de Dieux</a></li>
<li><a href="index.php?page=lyrics">Lyrics</a></li>
<li><a href="url-externe">Cartes de YGO Online</a></li>
</ul>
</li>
<li>
<span>Divers</span>
<ul>
<li><a href="index.php?page=episodes_fansubs">Episodes fansubs</a></li>
<li><a href="index.php?page=op-end_karaoke">OP/END (Karaoké)</a></li>
<li><a href="index.php?page=scripts_episodes">Script d'épisodes</a></li>
</ul>
</li>
<ul>

Toujours concernant le menu, pourquoi créer une classe "element_menu"? Tu n'appliqueras pas les styles liés à cette classe à d'autres éléments de ta page, non? Pour moi, une classe de style se créer si on pense la réutiliser pour d'autres éléments, sinon autant passer par un id pour l'élément.
Et là, en plus tu peux gagner de la "lisibilité" en supprimant ta classe "liens_menu", en déclarant dans la css que tous les liens contenus dans la div "element_menu" seront formatés de la façon suivante :
Code: [Sélectionner]
#element_menu a {
    color: #000000;
    text-decoration: none;
}

#element_menu a:hover {
    color: #FF0000;
    text-decoration: underline;
}
Citation
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)
Oui tu seras obligé de créer autant de classes qu'il y a d'éléments graphiques différents. C'est lourdingue au départ, c'est sûr, mais ça se fait assez bien au final. Faut juste être attentif à ne pas faire de doublons et autres boulettes. ^^
Après tu as aussi des balises déjà toutes faites pour certaines mises en formes. Je te conseille cette page pour voir comment traiter le cas du gras et de l'italique http://css.alsacreations.com/Tutoriels-et-articles-divers/strong-b-em-i-quelle-balise-utiliser-et-pourquoi
Citation
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 :
Hummm, c'est un peu de la bidouille ça!  ;)
Ton souci est dû au fait que tu utilises un float:left pour ton menu. Utiliser un float sort l'élément du flux normal d'affichage, c'est pourquoi ton contenu entourait le menu. La solution pour remedier à ça, c'est que le contenu utilise aussi un float:left, comme ça il est accolé à la gauche du menu sans déborder.
Par contre, tu auras le souci avec le pied de page, qui ne sera plus placé au dessous de tout ça. La solution alors est d'utiliser un clear:both, ce qui fera passer le pied de page en dessous.
Citation
Par contre, le gros truc qui me pose problème pour l'instant, c'est l'en-tête (header).
J'essaierai un truc du genre pour ma part:
Code: [Sélectionner]
#header img {
float:left;
}

#stats
{
   float:left;
   color: #000000;
   text-align: center;
   font-family: Tahoma;
   font-size: 10pt;
   font-weight: bold;
}
Et supprimer le positionnement absolute des images dans le header.  Je t'avoue ne pas être fan du absolute, je l'utilise vraiment quand je peux pas faire autrement (soit un cas, dans un site).


Bon je t'avoue que pour moi c'est la partie la plus compliquée du xhtlm, les float, les clear, les display. Il va falloir que tu lises quelques tutoriaux là dessus, et que tu manipules pour arriver à ce que tu veux. En tout cas, maintenant j'y arrive donc y a pas de raisons que tu n'y arrives pas (puis tu peux me poser tes questions).
Citation de Hiei- le 9 Septembre 2008 à 07:44
Pour le code brut, visiblement, W3C n'aime pas trop ça (ou alors je n'utilise pas la bonne syntaxe compte tenu du xhtml) car les trucs du style, "<font face="verdana" color="#XXXXXX" size="2"></font>, il n'en veut pas (ça ne me dérange pas plus que ça car je n'ai pas trois mille mots/lignes à changer dans ce style, mais bon, c'est juste pour être sûr et comme je veux absolument que chaque page soit validé par le W3C).
A oublier direct! Si tu as une mise en forme, c'est par la css que ça doit se passer, nul part ailleurs.
En plus ne pas être conforme avec les recommandation du w3c, ça peut devenir très chiant, si tu dois modifier un "style" et que tu as 15 000 pages à te palucher.

Autre optimisation, mettre un max de truc dans la class body (comme la font), comme ça tu ne le répète plus (à part si tu veux changer de font pour élément spécifique).

Bon après concernant l'architecture, c'est la première fois que je vois faire un include de la partie "data", d'habitude, j'ai plus l'habitude voir des pages articles, accueil et autres faire des includes du header, du menu et footer. Ca fait bizarre, mais pour l'instant je ne vois pas trop d'argument qui va à l'encontre de ta solution (il me semble que c'est la technique utilisée pour les forums donc ça devait aller).

En tout cas, bon courage à toi, et continue d'indenter! C'est très important!  ;)

MCL80

  • Modos
  • Messages: 4 625
Re: XHTML+CSS, 2 hits combo!
« Réponse #4, le 9 Septembre 2008 à 19:30 »
Citation de Hiei- le 9 Septembre 2008 à 07:44
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)
La balise <span>, elle  sert si tu veux un réglage bien particulier (moi, je l'utilise pour les petites capitales) sinon, , <strong>, , , <sup>, <sub> marchent très bien pour la mise en forme mot par mot ou caractère par caractère.

À part ça, Amir est bien plus pro que moi. ^
^
Attention à la marche en descendant du tram^^
La gare demeure et ne se rend pas…

Hiei-

  • Waffou
  • Messages: 3 592
Re: XHTML+CSS, 2 hits combo!
« Réponse #5, le 10 Septembre 2008 à 00:17 »Modifié le 10 Septembre 2008 à 00:31 par Hiei-
J'ai réussi à tout placer avec les absolutes sauf un truc du header mais je vais retenter avec la méthode que tu m'as dit, car ça m'a l'air bien plus propre (même si là, la page est toujours valide W3C, mais je n'aime pas trop non plus les positions absolus par défaut).

Pour le include des datas, j'avais un site qui expliquait comme ça à l'époque mais c'est vrai que je n'avais jamais pensé à ta solution (en gros, garder la page et rajouter l'header, le menu, et le footer a part avec le php, l'inverse quoi si j'ai bien compris).

Sinon, il existe un équivalent de la fonction <marquee> valide en W3C, ou faut oublier ? (ça fait défiler une phrase en scrolling, je crois que ça vient d'IE à la base)

J'ai aussi changé avant de lire ton post des trucs dont tu parles après avoir relu le site dont j'ai parlé, j'ai converti les "div id" du menu en" div class" et j'ai refais trois minis sous menu comme prévu au début (que je n'avais pas fait ça car ne passait pas comme je voulais avec les "div id").

Je vais voir ça dans la semaine de toute façon, et je posterai mon code source xhtml+css et un lien vers la page une fois terminé.

Par contre, je sens que pour la bannière de pub, ça va être galère. En copier-collant le code histoire de voir, bam, je passe de 0 à 53 erreurs  :sweatdrop:

Code: [Sélectionner]
 <script LANGUAGE="JavaScript" SRC="http://adserver.click-fr.com/print.js?l=3279&s=3379&w=468&h=60&r=20&t=0"></script>
    <noscript><a href="http://adserver.click-fr.com/click.htm?l=3279&s=3379&b=auto&nbre=123" target="_blank"><img border=0 width=468 height=60 SRC="http://adserver.click-fr.com/print.js?l=3279&s=3379&w=468&h=60&nbre=123&t=4" alt="*** Visitez notre Sponsor ! ***"></a></noscript>

Je suppose que je vais devoir en faire un <div class> et mettre directement les précisions de l'image dans le css, et aussi trouver un moyen d'intégrer le javascript proprement.
Posted on: Tuesday 09 September 2008, 22:58:33
Citation de "ubaj"
De même que je te convie à installer les plugins "Web Developper", "Html validator" et "Firebug" sous Firefox, c'est quand même super pratique de pouvoir vérifier des trucs directement à partir du navigateur (en cliquant sur un élément, tu peux connaître le(s) style(s) qu'il emploie et autres trucs pratiques).
Je suis sous Opéra  :sweatdrop: Mais je pensais télécharger Firefox 3 pour tester le site avec donc je vais le faire sous peu et je prendrais les plugins correspondants avec
Posted on: Wednesday 10 September 2008, 00:10:30
Citation
#stats
{
   float:left;
   color: #000000;
   text-align: center;
   font-family: Tahoma;
   font-size: 10pt;
   font-weight: bold;
}
C'est pas plutôt ".stats" au début ? Comme c'est un "div class" et non un "div id"

J'ai essayé de faire les changements que tu as dit dans l'header sinon, virer les marges et mettre des "float: left mais ça foire"

Par exemple, le stats vient se surperposer à l'image tout à gauche (au début) de l'header, alors qu'il doit être à côté.

J'ai aussi essayé sur le corps de la page et pareil, ça foire (mais ça, c'est peut être du à l'header foiré justement).

Donc je sais pas trop, ou c'est moi qui est une buse, c'est bien possible :mdr:

Pour le reste du css, et un peu pour le code, il y a des optimisations à faire oui (des classes qui ne servent pas à grand chose et font doublons, mais je verrais ça dès que j'aurai terminé la version fonctionnelle du squelette du site, sûrement ce week-end ).

Pour être précis, mon code source actuel est maintenant ainsi :

Code: [Sélectionner]
<!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" />
       <meta http-equiv="imagetoolbar" content="no" />
       <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 class="scrolling">
         <p>Bienvenue sur Yu-Gi-Oh! - Duel Monsters :) Je vous souhaite une agréable visite et espère vous revoir très bientôt ^_^</p>
      </div>
      <div class="stats">
         <p>
         Nombre Visiteurs : <span class="stats_compteur"> $compteur</span><br />
         Aujourd'hui :<span class="stats_compteur"> $compteur_j</span><br />
         Connectés :<span class="stats_compteur"> $compteur_c</span><br />
         </p>
     </div>
        <img src="banniere_click-fr.jpg" class="banniere_click-fr" alt="Bannière Click-FR" />
        <p class="banniere-description">[ Bannière de publicité aidant à l'hébergement du site ]</p>
</div>

<div id="menu">
   <div class="element_menu">
      <h2 class="bloc_sections">Sections</h2>
      <h4><img src="puce_ronde.gif" alt="Icone de Yûgi"/>Le site</h4>
      <ul>
         <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="http://www.hiei-tf.fr/forum_ygo-dm/">Forum</a></li>
      </ul>
   </div>
   <div class="element_menu">
      <h4><img src="puce_ronde.gif" alt="Icone de Yûgi"/>Général</h4>
      <ul>
         <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="http://www.cpt-tsubasa.net/forum_ygo-dm/viewforum.php?f=11">Cartes de YGO Online</a></li>
      </ul>
   </div>
   <div class="element_menu">
      <h4><img src="puce_ronde.gif" alt="Icone de Yûgi"/>Divers</h4>
      <ul>
         <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">Scripts d'épisodes</a></li>
      </ul>
   </div>
   <div class="element_menu">
      <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>

Et le css :

Code: [Sélectionner]
body
{
   width: 1018px;
   margin: 0px;
   background-color: #F4E8D0;
}

#header
{
   background-color: #F4E8D0;
   height: 122px;
   margin-bottom: 0px;
   margin-left: 0px;
}

.scrolling
{
   background-color: #ADD4E4;
   height: 28px;
   width: 757px;
   margin-bottom: 0px;
   margin-left: 261px;
   color: #000000;
   text-align: center;
   font-family: Verdana;
   font-size: 10pt;
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   border-bottom: 1px solid black;
}

.marquee_scrolling
{
   margin-top: 5px;
}

.stats
{
   color: #000000;
   text-align: left;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;
   position: absolute;
   left: 280px;
   top: 17px;
}

.stats_compteur
{
   color: #FFFF00;
   text-align: left;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;

}

.banniere_click-fr
{
   position: absolute;
   left: 525px;
   top: 40px;
}

.banniere-description
{
   color: #000000;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;
   margin-left: 560px;
   margin-top: 0px;
}

#menu
{
   float: left;
   width: 200px;
}

.element_menu
{
   background-image: url("pierres-pharaon.jpg");
   background-repeat: repeat-y;
   border-left: #000000 1px solid;
   border-right: #000000 1px solid;
   border-top: #708FBE 1px solid;
   border-bottom: #708FBE 1px solid;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;
}

.element_menu h4
{
   padding: 0px;
   margin: 0px;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;
}

.element_menu ul
{
   list-style-image: url("puce.gif");
   padding: 0px;
   padding-left: 35px;
   margin: 0px;
   margin-bottom: 5px;
   margin-left: 0px;
   font-family: Verdana;
   font-size: 10pt;
   font-weight: bold;
}

.element_menu a
{
   color: #000000;
}

.element_menu a:hover
{
   color: #FF0000;
   text-decoration: underline;
}

.liens_menu
{
   color: #000000;
   text-decoration: none;
}

.bloc_sections
{
   background-color: #000000;
   color: #FFFFFF;
   text-align: center;
   font-family: Verdana;
   font-size: 12pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
}

.clic_banniere1
{
   color: #FF0000;
   text-align: center;
   font-family: Verdana;
   font-size: 9pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
   text-decoration: underline;
}

.clic_banniere2
{
   border-bottom: 1px solid black;
   color: #000000;
   text-align: center;
   font-family: Verdana;
   font-size: 9pt;
   font-weight: bold;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
   padding-right: 2px;
   margin-top: 8px;
   margin-bottom: 0px;
}


#body_pages
{
   margin-left: 200px;
   margin-bottom: 0px;
   padding: 5px;
   background-color: #FFFFFF;
   border: 1px solid black;
}

#footer
{
   width: 816px;
   padding: 0px;
   margin-top: 0px;
   margin-left: 200px;
   text-align: center;
   color: #000000;
   background-color: #FF0000;
   border: 1px solid black;
}

Et pour le moment, quasiment tout est ok niveau placement (il n'y a que la ligne
Code: [Sélectionner]
        <p class="banniere-description">[ Bannière de publicité aidant à l'hébergement du site ]</p>[/quote]qui est trop basse et se retrouve dans le "corps" de la page peu importe les marges choisies, et le scrolling [code]      <div class="scrolling">
         <p>Bienvenue sur Yu-Gi-Oh! - Duel Monsters :) Je vous souhaite une agréable visite et espère vous revoir très bientôt ^_^</p>
      </div>
dont la fin de la phrase dépasse en dessous du fond bleu car j'ai retiré la balise <marquee> sinon ça fontionnait correctement.[/code]

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re: XHTML+CSS, 2 hits combo!
« Réponse #6, le 10 Septembre 2008 à 09:20 »
Citation de Hiei- le 10 Septembre 2008 à 00:17
J'ai réussi à tout placer avec les absolutes sauf un truc du header mais je vais retenter avec la méthode que tu m'as dit, car ça m'a l'air bien plus propre (même si là, la page est toujours valide W3C, mais je n'aime pas trop non plus les positions absolus par défaut).
Pour les positions ablsoutes, tout va bien tant que le contenu est bien calé et ne change pas de taille (verticalement surtout). Mais si ce n'est pas le cas, ça peut donner des trucs bizarres.
Citation de Hiei- le 10 Septembre 2008 à 00:17
Pour le include des datas, j'avais un site qui expliquait comme ça à l'époque mais c'est vrai que je n'avais jamais pensé à ta solution (en gros, garder la page et rajouter l'header, le menu, et le footer a part avec le php, l'inverse quoi si j'ai bien compris).
En fait, j'ai toujours vu cette solution, mais celle que tu as utilisée peut être bonne, tu verras avec quelques pages développées. Y a pas de solution unique on va dire. ^^
Citation de Hiei- le 10 Septembre 2008 à 00:17
Sinon, il existe un équivalent de la fonction <marquee> valide en W3C, ou faut oublier ? (ça fait défiler une phrase en scrolling, je crois que ça vient d'IE à la base)
Ca m'a l'air propriétaire comme balise, à oublier je pense.
Citation de Hiei- le 10 Septembre 2008 à 00:17
J'ai aussi changé avant de lire ton post des trucs dont tu parles après avoir relu le site dont j'ai parlé, j'ai converti les "div id" du menu en" div class" et j'ai refais trois minis sous menu comme prévu au début (que je n'avais pas fait ça car ne passait pas comme je voulais avec les "div id").
Pour les classes, comme je te le disais dans mon dernier post, c'est pour des éléments que tu vas réutiliser, sinon je passe par des id (surtout si le div en question a une réelle consistance, qeu ça veut dire quelque chose).

Pour les erreurs, je vais regarder ton code source, et je te fais un retour dans la journée.
: Mercredi 10 Septembre 2008, 08:06:05
Je sais pas si tu as regardé sous IE, mais la bannière part un peu en vrille... Et oui les joies de la compatibilité navigateurs.  :mdr:
Re: XHTML+CSS, 2 hits combo!
« Réponse #7, le 10 Septembre 2008 à 12:37 »
Bon, j'ai repris ton code que j'ai adapté à ma façon (je dis pas que c'est la meilleure hein  ^^)

xhtml
Code: [Sélectionner]
<!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" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="refonte.css" />
</head>

<body>
<div id="header">
<img id="logo_header" src="http://www.hiei-tf.fr/ygo-dm/rubon-gods.gif" alt="Image des trois cartes de dieux égyptiens" />
<div id="scrolling">
<p>Bienvenue sur Yu-Gi-Oh! - Duel Monsters :) Je vous souhaite une agréable visite et espère vous revoir très bientôt ^_^</p>
</div>
<div id="stats">
<p>
Nombre Visiteurs :<span class="stats_compteur">$compteur</span><br />
Aujourd'hui :<span class="stats_compteur">$compteur_j</span><br />
Connectés :<span class="stats_compteur">$compteur_c</span><br />
</p>
</div>
<img id="banniere_click-fr" src="http://servedby.advertising.com/site=748912/mnum=609191/bins=1"alt="Bannière Click-FR" />
<p id="banniere-description">[ Bannière de publicité aidant à l'hébergement du site ]</p>
</div>

<div id="menu">
<h2 class="bloc_sections">Sections</h2>
<div id="elements_menu">
<div class="element_menu">
<h4>Le site</h4>
<ul>
<li><a href="index.php?page=accueil">Accueil</a></li>
<li><a href="index.php?page=news">News</a></li>
<li><a href="http://www.hiei-tf.fr/forum_ygo-dm/">Forum</a></li>
</ul>
</div>
<div class="element_menu">
<h4>Général</h4>
<ul>
<li><a href="index.php?page=auteur">Auteur</a></li>
<li><a href="index.php?page=liste_episodes">Liste des épisodes</a></li>
<li><a href="index.php?page=staff_episodes">Staff des épisodes</a></li>
<li><a href="index.php?page=articles">Articles Divers</a></li>
<li><a href="index.php?page=cartes_dieux_egyptiens">Cartes de Dieux</a></li>
<li><a href="index.php?page=lyrics">Lyrics</a></li>
<li><a href="http://www.cpt-tsubasa.net/forum_ygo-dm/viewforum.php?f=11">Cartes de YGO Online</a></li>
</ul>
</div>
<div class="element_menu">
<h4>Divers</h4>
<ul>
<li><a href="index.php?page=episodes_fansubs">Episodes fansubs</a></li>
<li><a href="index.php?page=op-end_karaoke">OP/END (Karaoké)</a></li>
<li><a href="index.php?page=scripts_episodes">Scripts d'épisodes</a></li>
</ul>
</div>
<div class="element_menu">
<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>

<div id="body_pages">
Le site à Hiei-
</div>

<div id="footer">
<p>© 2003-2008 Hiei-</p>
</div>
</body>
</html>

css
Code: [Sélectionner]
body {
   width: 1018px;
   
   font-family: Verdana;
   font-size: 10pt;
   
   margin: 0px;
   padding: 0px;
   
   background-color: #F4E8D0;
}

#header {
width: 100%;
height: 122px;

background-color: #F4E8D0;

border-bottom: 1px solid black;
}

#logo_header {
float: left;

width: 261px;
height: 122px;
}

#scrolling {
float: left;

width: 757px;
height: 28px;

text-align: center;
color: #000000;

background-color: #ADD4E4;

padding: 0px;
margin: 0px;

border-bottom: 1px solid black;
}

#stats {
float: left;

width: 280px;
height: 94px;

font-weight: bold;
}

#stats p {
width: 220px;

margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

.stats_compteur
{
   color: #FFFF00;
}

#banniere_click-fr {
float: left;

margin: 4px;

width: 468px;
height: 60px;
}

#banniere-description {
float: left;

width: 468px;

margin: 0px;
padding: 0px;

font-weight: bold;
text-align: center;
}







#menu
{
   float: left;
   width: 200px;
   
   font-weight: bold;
}

#menu h2
{
   font-size: 12pt;
   text-align: center;
   color: #FFFFFF;
   
   background-color: #000000;
   
   padding: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
}

#elements_menu
{
   background: url("http://www.hiei-tf.fr/ygo-dm/pierres-pharaon.jpg") repeat-y top left;
}

.element_menu
{
   border-left: #000000 1px solid;
   border-right: #000000 1px solid;
   border-top: #708FBE 1px solid;
   border-bottom: #708FBE 1px solid;
}

.element_menu h4
{
   font-size: 10pt;
   
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   
   background: url("http://www.hiei-tf.fr/ygo-dm/puce_ronde.gif") no-repeat top left;
}

.element_menu ul
{
   list-style-image: url("http://www.hiei-tf.fr/ygo-dm/puce.gif");
   
   padding: 0px;
   padding-left: 35px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #000000;
   text-decoration: none;
}

.element_menu a:hover
{
   color: #FF0000;
   text-decoration: underline;
}

.element_menu p
{
   font-size: 9pt;
   font-weight: bold;
   text-align: center;
   
   padding: 2px;
   margin-top: 0px;
   margin-bottom: 0px;
}


.clic_banniere1
{
   color: #FF0000;
   text-decoration: underline;
}

.clic_banniere2
{
   color: #000000;
   
   margin-top: 8px;
   
   border-bottom: 1px solid #708FBE;
}

#body_pages
{   
   float: left;
   width: 806px;
   
   padding: 5px;
   
   background-color: #FFFFFF;
   border: 1px solid #000000;
}

#footer
{
   clear: both;

   width: 100%;
   height: 20px;
   
   color: #000000;
   text-align: center;

   background-color: #FF0000;
   border: 1px solid #000000;
}

Bon j'ai essayé de factoriser les styles dans la feuille css, on en passe plus par aucun positionnement de type absolute, j'ai modifié les affichages de certaines images du menu (en background plutôt que dans le xhtml, comme ça si tu veux en changer, hop c'est dans la css), et autres trucs divers...
A toi de voir si tu veux t'en inspirer.

Pour le footer, je me suis dit que c'est mieux quand il prend toute la largeur de la page (peut être faudrait-il ne pas mettre de couleur de fond, ni de bordure?)

Voili voilà, si tu as des questions, n'hésite pas. ^^

MCL80

  • Modos
  • Messages: 4 625
Re: XHTML+CSS, 2 hits combo!
« Réponse #8, le 10 Septembre 2008 à 19:06 »
Citation de Amir le 10 Septembre 2008 à 09:20
Citation de Hiei- le 10 Septembre 2008 à 00:17
Sinon, il existe un équivalent de la fonction <marquee> valide en W3C, ou faut oublier ? (ça fait défiler une phrase en scrolling, je crois que ça vient d'IE à la base)
Ca m'a l'air propriétaire comme balise, à oublier je pense.
À remplacer par du Javascript (voir le forum Alascréations)... Sachant qu'il faut essayer de chiader le code pour que les navigateurs sans javascript affichent le texte (même sans défiler)

Ou alors il faut attendre les CSS3 :sweatdrop:
Attention à la marche en descendant du tram^^
La gare demeure et ne se rend pas…

Hiei-

  • Waffou
  • Messages: 3 592
Re: XHTML+CSS, 2 hits combo!
« Réponse #9, le 11 Septembre 2008 à 06:14 »Modifié le 11 Septembre 2008 à 06:37 par Hiei-
Ok merci, je vais voir ça tout à l'heure.
Posted on: Thursday 11 September 2008, 02:18:56
Ok, alors j'ai regardé et ça m'a l'air très bon.

Il ne passait pas le test W3C par contre, t'as fait une faute de frappe à un moment, il manque un espace avant un "alt", mais bon, pas très grave, je l'ai corrigé.

Par contre, le texte du footer ne tombe pas dans la barre du footer, mais à moitié en dessous.

Pour la couleur et la bordure, oui, ils vont virer (d'ailleurs un fond rouge vif, ce serait lol  :sweatdrop: Le truc qui nique bien les yeux), je les avais mis pour bien repérer mes blocs (et leur délimitation) lors de la conception du code.

Il y a aussi que le site dépasse un peu les 1024x768 (il y a une barre de scrolling horizontale), et si je réduis le "1018px" dans le css, ça casse tout (même si je mets 1017, donc si je retire un seul pixel). J'ai tenté de réduire "scrolling" et "body_pages" à part avant, mais ça ne change rien.

Posted on: Thursday 11 September 2008, 03:37:50
Un autre truc que je ne comprends pas trop, pourquoi le compteur de visites foire maintenant alors que le script est tout
bête, c'est un simple "include/print" $value", cf ci-dessous :

Code: [Sélectionner]
<div id="stats">
<p>
<?
include("./visite/visite.php");
print" Nombre Visiteurs : <span class="stats_compteur">$compteur</span><br />
;
print" Aujourd'hui : <span class="stats_compteur">$compteur_j</span><br />
;
print" Connectés : <span class="stats_compteur">$compteur_c</span><br />
;
?>
Nombre News :<span class="stats_compteur">172</span><br />
</p>
</div>

Message d'erreur : "Parse error: syntax error, unexpected T_STRING in /homez.22/hieitf/www/test/index-ubaj.php on line 20"

La ligne 20 étant celle-ci :

Code: [Sélectionner]
print" Nombre Visiteurs : <span class="stats_compteur">$compteur</span><br />

Ou alors le script est pas clean niveau codage et faudra que je passe par un autre, car avec ça, W3C s'affole aussi, 5 erreurs, 5 avertissements  :sweatdrop:

J'ai joint le code source du compteur de visite au post, car si je mets le code source en clair, ça va encore allonger un max le topic  :sweatdrop:

Et voici le "connect_visite.php" à part (car il est petit) :

Code: [Sélectionner]
<?
$mysql_host=""; // le serveur
$mysql_login=""; // le login
$mysql_pass=""; // mot de passe
$mysql_dbnom=""; // nom de la base de donnee
$db=mysql_connect($mysql_host,$mysql_login,$mysql_pass);
mysql_select_db($mysql_dbnom,$db);
?>

(Evidemment, le mien est rempli, je préfère préciser ^^)

Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re: XHTML+CSS, 2 hits combo!
« Réponse #10, le 11 Septembre 2008 à 09:08 »
Citation de Hiei- le 11 Septembre 2008 à 06:14
Il ne passait pas le test W3C par contre, t'as fait une faute de frappe à un moment, il manque un espace avant un "alt", mais bon, pas très grave, je l'ai corrigé.
Arfff, pourtant je n'avais aucune erreur avec le plugin de Mozilla... Enfin bon rien de bien grave ^^
Citation de Hiei- le 11 Septembre 2008 à 06:14
Par contre, le texte du footer ne tombe pas dans la barre du footer, mais à moitié en dessous.
Sous Opéra? Bon je vais le télécharger aussi.
J'avais essayé sous Chrome, IE 7.0/6.0, FF 2.0/3.0 et ça passait bien sur chacun. Ah j'te jure ces navigateurs....
Citation de Hiei- le 11 Septembre 2008 à 06:14
Pour la couleur et la bordure, oui, ils vont virer (d'ailleurs un fond rouge vif, ce serait lol  :sweatdrop: Le truc qui nique bien les yeux), je les avais mis pour bien repérer mes blocs (et leur délimitation) lors de la conception du code.
:sweatdrop:
Ouf!
Citation de Hiei- le 11 Septembre 2008 à 06:14
Il y a aussi que le site dépasse un peu les 1024x768 (il y a une barre de scrolling horizontale), et si je réduis le "1018px" dans le css, ça casse tout (même si je mets 1017, donc si je retire un seul pixel). J'ai tenté de réduire "scrolling" et "body_pages" à part avant, mais ça ne change rien.
Oui il faut calculer les tailles (width) de chaque élément si tu modifies la largeur pour que cela tienne dans ta nouvelle largeur. Au pire on pourra regarder cela.
Citation de Hiei- le 11 Septembre 2008 à 06:14
Message d'erreur : "Parse error: syntax error, unexpected T_STRING in /homez.22/hieitf/www/test/index-ubaj.php on line 20"

La ligne 20 étant celle-ci :

Code: [Sélectionner]
print" Nombre Visiteurs : <span class="stats_compteur">$compteur</span><br />
Il ne manque pas une double quote dans ton print?
Au pire, pour éviter que des éléments html soit inclus dans ton print je ferrais plutôt :
Code: [Sélectionner]
    <? include("./visite/visite.php"); ?>


     Nombre Visiteurs : <span class="stats_compteur"><? print "$compteur" ?></span><br />
 ou

     Nombre Visiteurs : <span class="stats_compteur"><? echo $compteur ?></span><br />
     Nombre Visiteurs : <span class="stats_compteur"><?= $compteur ?></span><br />
Ca devrait passer là, je pense.

Hiei-

  • Waffou
  • Messages: 3 592
Re: XHTML+CSS, 2 hits combo!
« Réponse #11, le 11 Septembre 2008 à 09:54 »
Citation de "Amir"
Sous Opéra? Bon je vais le télécharger aussi.
J'avais essayé sous Chrome, IE 7.0/6.0, FF 2.0/3.0 et ça passait bien sur chacun. Ah j'te jure ces navigateurs....
Oui. Enfin, ce n'est pas très grave. Le cadre va disparaître au final, donc une fois retiré, ça ne débordera plus de toute façon  :sweatdrop: Ca vient peut être aussi de ma version d'Opéra (je suis resté en 9.10 car les dernières versions ne me plaisent pas trop niveau interface, qui est un peu modifiée).
Citation de "Amir"
Oui il faut calculer les tailles (width) de chaque élément si tu modifies la largeur pour que cela tienne dans ta nouvelle largeur. Au pire on pourra regarder cela.
Ok. J'essairais de voir ça (je suppose que ceux en pourcentage n'ont pas à être modifiés vu qu'ils sont déjà à 100% ? Donc juste ceux définis en pixels je suppose).
Citation de "Amir"
Il ne manque pas une double quote dans ton print?
Au pire, pour éviter que des éléments html soit inclus dans ton print je ferrais plutôt :
J'ai repris le code tel quel du script et ça a toujours fonctionné ainsi, mais il manque peut être un truc oui, vu que ce n'est pas car le code fonctionnait que ça veut dire qu'il était "niquel".
Citation de "Amir"
Code: [Sélectionner]
    <? include("./visite/visite.php"); ?>


     Nombre Visiteurs : <span class="stats_compteur"><? print "$compteur" ?></span><br />
 ou

     Nombre Visiteurs : <span class="stats_compteur"><? echo $compteur ?></span><br />
     Nombre Visiteurs : <span class="stats_compteur"><?= $compteur ?></span><br />
Ca devrait passer là, je pense.
J'ai pris la première méthode et ça fonctionne parfaitement (que ce soit pour l'affichage ou pour la validation W3C), donc un grand merci :)

Plus qu'à déplacer pour retomber sur du 1024x768 et le design devrait être terminé (ensuite, il ne restera plus qu'à convertir les pages, mais ça ce sera plus long que difficile, une fois la première convertie et les styles définis, il suffira juste de reproduire la même chose pour les suivantes).

Matt

  • Nebula Bondage Chain®
  • Getbackers ! L'anime encore mieux que le Meikai !
  • Messages: 1 168
Re: XHTML+CSS, 2 hits combo!
« Réponse #12, le 11 Septembre 2008 à 10:41 »
eventuellement y'a aussi safari à tester pour être complet et bien soulé de tester :D
Glazourected !

Hiei-

  • Waffou
  • Messages: 3 592
Re: XHTML+CSS, 2 hits combo!
« Réponse #13, le 11 Septembre 2008 à 10:53 »
J'en testerai quelques uns par curiosité, mais à la limite, si je m'embête avec le W3C, c'est pour être sur que le code soit aux normes (sur l'ancienne version, j'ai testé la plupart des navigateurs à la main car mon code était fait à l'arrache), donc là, "j'oserai" dire, "si ça foire, changez pour un navigateur correct  :mdr:".


Amir

  • Master of the game
  • Modos
  • Joey est-ce que tu aimes les films de gladiateurs?
  • Messages: 3 741
Re: XHTML+CSS, 2 hits combo!
« Réponse #14, le 11 Septembre 2008 à 11:19 »
Tu sais Hiei-, même si ton site respect les normes, tu n'es jamais à l'abris d'un navigateur qui respecte le truc d'une façon assez olé olé. Donc malheureusement, il faut vraiment passer son site en revu avec chaque navigateur (mais en règle général, à part IE 6.0, on a un rendu plus ou moins équivalent entre tous les navigateurs).
Citation de Matt le 11 Septembre 2008 à 10:41
eventuellement y'a aussi safari à tester pour être complet et bien soulé de tester :D
En fait, Chrome utilise le même moteur que Safari, à savoir Webkit. Mais tu as raison, on est jamais trop prudent ^^