Passage en XHTML strict

Bonjour à tous et à toutes !


Voilà, je viens demander un peu d'aide car je dois refaire le graphisme d'un site et le mettre aux normes XHTML strict. J'ai déjà codé quelques sites en xhtml, mais ce là fait un moment et j'avoue que j'ai du mal sur certains aspects.

Si quelqu'un pouvait m'aider ce serait sympa. Voici la maquette du site en question:

http://www.oteragame.net/test/

Comme vous pouvez le constater il y a quelques problèmes :

- cadre de connexion
- les cadres avec le flash et la connexion sont trop bas
- le menu : tout / pc / nintendo... ne s'active pas
- le texte dans les cadres dépassent

J'ai passé pas mal de temps dessus, mais je bute sur ces problèmes...

Merci d'avance pour votre aide

Salut,

Même si tout ne vient pas de là, déja il serait bon que tu valides ta page. Ca sera déja un bon début.
Modifié par Mikachu (28 Aug 2007 - 15:14)

Bien reçu, je viens de corriger certains problèmes. Mais comme tu le disais justement, les problèmes ne viennent pas tous de là..

Salut,

En réduisant les largeurs des balises titres et en mettant ton texte dans des paragraphes dont il faudra également adapter la largeur, tu feras disparaitre les débordements de texte observés.

Il serait bien aussi de mettre une balise <label></label> autour de la balise <input />


P.S. : la musique ne s'est pas chargée tout de suite et ça m'a fait littéralement sursauter Il serait d'ailleurs bien de pouvoir l'arrêter si tu tiens absolument à la garder. Un petit dewplayer serait idéal par exemple
Modifié par Pandore (28 Aug 2007 - 18:35)

Pandore a écrit :

P.S. : la musique ne s'est pas chargée tout de suite et ça m'a fait littéralement sursauter Il serait d'ailleurs bien de pouvoir l'arrêter si tu tiens absolument à la garder. Un petit dewplayer serait idéal par exemple

... et un petit lien vers l'article de présentation du dewplayer en prime...

Pandore, je vais essayer de modifier le code selon tes conseils. Par contre il n'y a pas du tout de musique sur la page, je me demande ce qu'il s'est apssé lol

Voilà, j'ai fixé les titres et les textes à 360 pixels de largeur:

div#news p {
  width: 360px; 
}

div#news h3 {
  width: 360px;  
}

Ca n'a pas l'air de marcher... J'ai dû faire une erreur qq part
Modifié par artmaniac (28 Aug 2007 - 22:07)

artmaniac :

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Voilà qui est fait, je n'avais pas pensé à mettre ce minuscule bout de code dans les balises.

Quelqu'un aurait des idées pour corriger le site?

Faire du code HTML qui tient la route serait déjà un bon premier pas... Parce que du CSS sur du HTML bancal, ben ça marche pas des masses.

Par exemples, tu as le style suivant:

div#news p {width: 360px;}

Or, si je regarde dans div#news, j'ai le code HTML suivant:

<div id="news">
	    	<h2><span>Dernières news</span></h2>
	    	 <p>
	    	  <h3><a href="#">Halo Combat Evolved</a></h3>
	  	    	  La toute nouvelle version du jeu débarque enfin sur la console Microsoft next generation !
	  	    	   <br /><br />
	  	    	  <h3><a href="#">The great pom boy</a></h3>

	  	    	  Aidez pom boy à chasser les méchants twinywinny du monde des bulles
	  	    	   <br /><br />
	  	    	  <h3><a href="#">P’tite bouille</a></h3>	
	            Ptite bouille a la musique dans la peau et ça se voit ! 
	            <br /><br />
	    	    (...)
	    	 <p>

Des h3 et des bouts de texte dans un seul et même paragraphe?
Attention à l'abus de fumage de moquette, hein.

Plus sérieusement, tu ne peux pas mettre des h3 dans des p. Parce que:
- l'élément p n'est pas fait pour ça;
- les DTD HTML précisent que l'élément p ne peut contenir que des éléments de type en-ligne (donc pas d'autres paragraphes, pas de titres, etc.)... ce que le validateur HTML t'aurait bien entendu signalé;
- de toute façon, les navigateurs vont probablement ignorer cet élément p illicite, en estimant que c'est une erreur.

Pour le reste... pareil, tu as un problème de maitrise de ton code HTML, et du coup tes styles CSS entrent en conflit. Par exemple, tu utilises un paragraphe pour dessiner l'image du bas de div#tests. Sauf que tu as quelque part un style qui dit que tous les paragraphes dans div#tests doivent avoir une largeur de 360px, alors que tu veux que se paragraphe soit plus large. De plus, div#tests à un padding à gauche de 10px, ce qui empêche que l'image soit collée au bord gauche de la div. De plus, ton paragraphe a un margin-bottom de 16px, ce qui bien sûr empêche qu'il soit collé en bas.

Bref... reprends ton code HTML pour corriger ses défauts (par exemple, il serait préférable, ou en tout cas plus abordable, d'utiliser un div ou un span vide pour dessiner l'ombre du bas des divs, et de placer cet élément en bas des divs en question, pas à l'intérieur). Puis essaye de rationaliser ton code CSS. Par exemple, donner une largeur de 360px à tes h3 et p contenus dans tes blocs est un pis-aller. Normalement, c'est la largeur de ton bloc (et les éventuels padding) qui doit réduire automatiquement leur largeur.

Par exemple, div#tests pourrait avoir une largeur définie ainsi:

div#tests {
width:360px;
padding:0pt 16px 0pt 10px;
}

Dans la foulée, tu pourras si tu le souhaites t'intéresser à l'utilisation des tailles de texte relatives (em, %... voir tutoriel sur Alsacréations), ou encore à la création de formulaires accessibles (à ce sujet, Pandore suggérait d'encadrer les input par des <label></label>... ici, ça me semble plutôt inutile, tant que l'on n'a pas plutôt décidé d'afficher des labels explicites et de les coder comme tels). Mais ça peut faire beaucoup à la fois.

artmaniac a écrit :
Par contre il n'y a pas du tout de musique sur la page, je me demande ce qu'il s'est apssé lol

Oui, tu as raison. En fait, ce qu'il s'est passé, c'est que j'étais sur un site de mangas mais ce jour là, le site avait apparemment un problème car les pages mettaient près de 2 minutes à se charger Pour ne pas perdre de temps à attendre, j'ai donc été sur le site d'Alsa en parallèle. Et au moment où je regardais ton site, une page avec un mini-clip dessus été en train de se charger. La musique collant au style de ton site, j'ai cru que ça venait de chez toi

Autant pour moi alors ...