Problèmes de liens

saladin · le 8 mai 2007

Salut,

Pour les pieds de page, je viens de mettre l'attribut margin-top en auto.

D'ores et déjà, en largeur 1024, tu pourras constater que les boutons "retour haut" viennent en surimpression dans tes définitions...

C'est bien là mon problème, car quand j'essaye de les positionner avec la feuille de style, ils ne se placent pas bien (un des bouton se place en dessous de l'autre alors qu'il devrait se placer à droite) et j'ai beau regarder ce qui ne va pa,s je ne trouve pas donc, je suis obligé de les placer avec l'attribut style dans on HTML

Aurais tu une solution?

a+

Modifié le 8 mai 2007 par saladin

Dylav · le 8 mai 2007

En fait, tu as laissé flotter le bandeau pied de page sous le corps de ta page, mais tu positionnes en absolu les boutons-retour qui, bien que censés appartenir au bandeau, vont s'installer où tu le leur demandes !

Je te propose l'écriture suivante de la <div> pied de page

<div id="pied">
 <p>
   <a href="#haut_de_page">
     <img class="rethautgauche" src="/image/boutonhaut.jpg" alt="haut">
   </a>
   <a href="#haut_de_page">
     <img class="rethautdroite" src="/image/boutonhaut.jpg" alt="haut">
   </a>
   <img src="/image/Count_002.gif"><br>
   <img src="/image/Count.gif"><br>
   <img src="/image/Count_003.gif">
 </p>
</div>

avec dans la feuille de style

#pied {
background-color: #300396;
height: 100 px;
text-align: center;
}	
.rethautgauche {
       float: left;
margin-top: 20px;
margin-left: 40px;
border:0;
}
.rethautdroite {
       float: right;
margin-top: 20px;
margin-right: 40px;
border:0;
}

Explications

Tout d'abord, il semble que le validateur demande que le "texte" soit dans un paragraphe, d'où <p>...</p>
Les deux boutons sont des images réputées flottantes par leurs classes, la première à gauche, la seconde à droite. Tu noteras qu'il faut décrire tout de suite le bouton de droite, avant ce que tu mettras au centre.
Je leur ai ajouté un margin-top pour qu'elles ne touchent pas le bord haut du bandeau. J'en ai profité pour ajouter le border:0 (et on n'a plus besoin de la classe "retour").
Tu noteras qu'elles ne sont pas encapsulées dans des <div> intermédiaires, elles sont directement dans la <div> "pied" : simplification.
Tes 3 images centrales n'ont pas besoin de <div> individuelles, il suffit de forcer des retours à la ligne entre elles, et d'indiquer dans la classe "pied" que son contenu doit être centré. Au passage, j'ai sucré margin-top:auto qui ne sert à rien.

Finalement, avec une seule <div> au lieu de 6, tout ça devient plus simple et plus lisible... et fonctionne mieux ! En appliquant ce principe partout (toute la présentation reportée dans la feuille de style), tu vas obtenir des pages HTML limpides, ce qui te facilitera les modifications ultérieures...

Deux petites remarques complémentaires,

- dans ton header, les balises <meta> et <link> sont répétées deux fois, ce qui ne me semble pas utile,

- pour les scripts de bas de page, n'oublie pas que l'attribut language n'existe plus, et qu'ils doivent se situer avant </html> qui est censé borner la page.

saladin · le 9 mai 2007

Salut,

Oulala comment je me complique la vie moi...

Je viens de mettre toute la page index à jour: y a t-il encore des modifs que je peux faire pour alléger mon script HTML ? Avant que je refasse toutes les autres pages à partir du "modèle" index. Je crois avoir réduis au maximum mais je n'en suis pas du tout sur... .

- pour les scripts de bas de page, n'oublie pas que l'attribut language n'existe plus, et qu'ils doivent se situer avant </html> qui est censé borner la page.

Par contre, je ne vois pas de quoi tu parles, je n'ai pas mis d'attribut language à moins que je ne vois plus .

Merci d'avance .

a+

Modifié le 9 mai 2007 par saladin

Dylav · le 9 mai 2007

<div> "en-tete"

Tu lui affectes la même image de fond que celle du corps de l'écran, ce qui est donc totalement inutile. J'aurais plutôt tendance à lui affecter la photo de John Wayne, mais il faut d'abord que tu la réduises à une hauteur de 110 pixels.

Du coup, la <div> "jw" n'a plus lieu d'être. Bien sûr, on ne peut plus cliquer sur John Wayne pour retourner à l'accueil, mais comme ton menu horizontal est toujours présent, avec le choix "Accueil" juste en-dessous, c'était un peu superflu.

<div> "pages"

Les <div> "contenu" et "starjojotrek" sont en fait des paragraphes de cette <div>, donc tu devrais utiliser la balise <p>.

Nota : si tu n'aimes pas voir ton pied de page remonter au milieu de cet écran, il te suffit de donner une hauteur à la <div> "pages", par exemple de 300px. Pour que ça n'agisse que sur cette page-là, tu le fais non pas dans la feuille de style, mais dans le <head> de cette page, derrière l'appel à la feuille de style externe

<style type="text/css">#pages {height:300px;}</style>

Est-ce ton hébergeur qui t'impose ce pavé sans intérêt visuel ? En tout cas, ce que je voulais te faire comprendre, c'est qu'on doit écrire <script type="text/javascript"> et non pas <script language="JavaScript">

Lignes blanches

J'ai sabré la multitude de lignes vides de ton code HTML. Je n'ai jamais trouvé que ça rende une page plus compréhensible. A mon avis, le seul intérêt de lignes blanches, ce serait pour faire ressortir des commentaires.

Voici donc ton code HTML tel que je l'aurais moi-même présenté. Seule modification dans la feuille de style, l'id "en-tete", où j'ai remplacé l'image de fond, et sucré le margin-top négatif dont je ne comprends absolument pas l'utilité.

#en-tete {	
 background-image: url(image/abidbol2.jpg) no-repeat;
 height: 110px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Le Dico de l'Info</title>
<meta name="Description" content="Site définissant tous les termes d'informatiques">
<meta http-equiv="content-type" content="text/html: charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="style" href="tour.css">
<style type="text/css">#pages {height:300px;}</style>
</head>
<body>    
<a name="haut_de_page"></a>
<div id="en-tete">
 <h1>Le Dico de l'Info</h1>
</div>
<div id="chmenu">
 <ul id="menu">
   <li><a href="http://www.saladin5.fr/index.html" class="menuprincipal">Accueil</a></li>
   <li><a href="http://www.saladin5.fr/definition.html" class="menuprincipal">Définitions</a>
     <ul>
       <li><a href="http://www.saladin5.fr/definition.html" class="ssmenu">Défintions</a></li>
       <li><a href="http://www.saladin5.fr/ir.html" class="ssmenu">Internet et Réseaux</a></li>
     </ul>
   </li>
   <li><a href="http://www.saladin5.fr/serveurphoto.html" class="menuprincipal">Serveur Photo</a></li>
 </ul>
</div>
<div id="pages">	
 <p class="contenu"> 
   Bienvenue sur le Dico de l'info, ici vous trouverez des définitions sur les termes informatiques... 
 </p>
 <p class="starjojotrek">
   Et voici aussi un petit lien pour les Fofos de Zeb.fr 
   <a href="http://starjojotrek2.free.fr/DLpourPC/">Starjojotrek</a>
 </p>
</div>
<div id="pied">
 <p>
   <a href="#haut_de_page">
     <img class="rethautgauche" src="image/boutonhaut.jpg" alt="haut">
   </a>
   <a href="#haut_de_page">
     <img class="rethautdroite" src="image/boutonhaut.jpg" alt="haut">
   </a>
   <br><img src="image/Count_002.gif">
   <br><img src="image/Count.gif">
   <br><img src="image/Count_003.gif">
 </p>
</div>
<!-- DEBUT / Cybermonitor / START -->
<script type="text/javascript"><!--
CM_RUBRIQUE = "edit_PagesPersos_abonnes";
CM_CLIENT = "clubv3";
CM_SECTION1 = "PagesPersos";
// -->
</script>
<script type="text/javascript" src="http://js.cybermonitor.com/clubv3.js">
</script>
<noscript>
 <img src="http://stat3.cybermonitor.com/clubv3_v?R=edit_PagesPersos_abonnes&S=total;PagesPersos">
</noscript>
<!-- FIN / Cybermonitor / END -->
<script type="text/javascript" src="http://perso-static.club-internet.fr/popUnder3.js"></script>
<script type="text/javascript">
 setTimeout("dailyPopUnder('myPopUnder', popUnderData[Math.floor(Math.random()*(popUnderData.length))], 620, 512);", 3000);
</script>
</body>
</html>

Ta page a désormais une structure logique compréhensible, avec ses 4 blocs <div> en-tete, menu, corps de la page, pied de page. Reprends le code tel quel, j'ai probablement dû enlever quelques autres scories dont je n'ai pas parlé.

Et il te restera à t'assurer, au travers du validateur du W3C, que tu peux prétendre au label XHTML 1.0 Strict

saladin · le 9 mai 2007

Salut,

Avant tout, merci pour toute l'aide que tu me fournis ,

<div> "en-tete"

Rien à re-dire. (juste, que tu m'as donné un code faux pour la feuille de style plus précisément l'image de fond et l'attribut no-repeat, mais cela importe peu puisque j'ai réussi à trouver d'où venait le problème de plus ça me fait de l'entrainement)

<div> "pages"

Rien à re-dire.

Nota : si tu n'aimes pas voir ton pied de page remonter au milieu de cet écran, il te suffit de donner une hauteur à la <div> "pages", par exemple de 300px.

C'est pour cela que je me compliquais la vie en faisant une <div> "pied" pour chaque page du site: merci pour l'astuce

En effet, je viens de faire le test et c'est mon hébergeur qui me rajoute ce script, car dans l'original il n'y est pas, donc je ne peux rien faire contre cette immonde faute et c'est aussi pour ça que je ne comprenais pas pourquoi tu me disait cela, puisque je ne voyais pas cette partie de mon script.

Mon hébergeur place toute cette partie là:

<!-- DEBUT / Cybermonitor / START -->
<script language="javascript"><!--
CM_RUBRIQUE = "edit_PagesPersos_abonnes";
CM_CLIENT = "clubv3";
CM_SECTION1 = "PagesPersos";
// --></script>
<script language="javascript" src="65_fichiers/clubv3.js">
</script>
<noscript>
<img src="http://stat3.cybermonitor.com/clubv3_v?R=edit_PagesPersos_abonnes&S=total;PagesPersos">
</noscript>
<!-- FIN / Cybermonitor / END -->
<script language="JavaScript" src="65_fichiers/popUnder3.js"></script>
<script language="JavaScript"> setTimeout("dailyPopUnder('myPopUnder', popUnderData[Math.floor(Math.random()*(popUnderData.length))], 620, 512);", 3000); </script>

je crois que c'est pour les statistiques.

lignes blanches

Moi personnellement je trouve que ça aèrent le texte et que ça le rend plus lisible, mais c'est une question de gout.

Pour le margin-top négatif je ne saurais pas te dire pourquoi je l'ai mis

Et il te restera à t'assurer, au travers du validateur du W3C, que tu peux prétendre au label XHTML 1.0 Strict

Comment fait on pour la valider?

Un dernier problème subsiste, j'ai supprimé le compteur, la date et l'heure qui je l'avoue ne servaient à rien mais depuis que je les ai enlevés mon <div> "pied" ne se voit plus, j'ai été contraint de faire une image de 110px de weidth pour qu'elle réapparaisse aurais-tu une autre solution? (Il se peut que je me sois mal expliqué...)

Encore merci pour tous

a+

fantassin-06 · le 9 mai 2007

Salut,

Comment fait on pour la valider?

pour valider il faut se rendre ici et là 3 solutions :

- Où tu valides en y mettant le lien de la page directement sur le serveur.

- Où tu valides en "uploadant" la page à partir de ton PC.

- Où tu "copie/colle" le la totalité du code sur la page.

Dylav · le 9 mai 2007

<div> "en-tete"

Non, il n'y avait pas erreur sur le nom de l'image, mais il fallait écrire background: tout court, et non background-image: (puisque j'empilais deux paramètres concernant le background). En effet, l'idée est de mettre la photo de John Wayne en tant qu'image de fond calée par défaut en haut à gauche de la <div> en-tete, avec un no-repeat pour éviter qu'elle se répète sur toute la largeur de la <div>. Mais il faut ajouter un margin:0; au body, et margin:0;padding:0; au h1, pour obtenir un cadrage parfait. Mais je constate que tu es effectivement déjà sur la piste...

<div> "pied"

J'avoue que je ne comprends pas pourquoi le bandeau bleu n'apparaît pas au moins à concurrence de la hauteur des images boutonhaut, puisqu'elles "occupent le terrain"...

Validateur

Pour le passage sous les fourches caudines du validateur du W3C, je vois que Fantassin t'a tout indiqué en détail. N'y a plus qu'à...

Dylav · le 9 mai 2007

Valider le CSS

J'allais ajouter qu'il n'était pas inintéressant non plus de valider ta feuille de style, et j'ai voulu faire un passage en vitesse (qu'il est curieux, ce Dylav...). Euréka : c'est là que j'ai trouvé le problème de la <div> "pied" : tu as mis un espace en trop dans la mesure de la hauteur : il faut écrire height: 100px; ! Une fois ça rectifié, le bandeau bleu réapparaît... tu peux d'ailleurs remplacer les deux margin des classes rethautgauche et rethautdroite par une seule margin:20px; qui mettra des marges tout autour des boutons, et en particulier en haut et en bas

Je te laisse la joie de découvrir les deux autres erreurs (et les 3 warnings)...

saladin · le 10 mai 2007

Salut,

Je viens de rectifier pour la <div> "pied", je ne pensais pas qu'un espace pouvait faire que cela ne marche pas (mais je l'avoue, je ne l'avais pas vu)

Voila, pour les dernières rectifications .

Maintenant je viens (d'essayer) de valider mon CSS , voici le lien => Validation page CSS

J'ai corrigé un maximum de fautes mais je ne comprends pas ce qu'il me dit... . Donc, si quelqu'un comprends d'où vient mes fautes, peut-il me les expliquer?

J'ai aussi essayé de valider mon script HTML et j'ai corrigé 6 fautes sur les onze du départ

Mais les cinq restantes: j'ai beau regarder, je ne les trouve pas et pourtant pour moi ce ne sont pas des fautes. Voici le script car sinon vous aurez les immondes fautes que mon hébergeur me met de-dans:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Le Dico de l'Info</title>
<meta name="Description" content="Site définissant tous les termes d'informatiques"/>
<meta http-equiv="content-type" content="text/html: charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="style" href="tour.css"/>
<style type="text/css">#pages {height: 500px;}</style>
</head>

<body>
<a name="haut_de_page"></a>

<div id="en-tete">
 <h1>Le Dico de l'Info</h1>
</div>

<div id="chmenu">
 <ul id="menu">
<li><a href="http://www.saladin5.fr/index.html" class="menuprincipal">Accueil</a></li>
<li><a href="http://www.saladin5.fr/definition.html" class="menuprincipal">Définitions</a>
  <ul>
	<li><a href="http://www.saladin5.fr/definition.html" class="ssmenu">Défintions</a></li>
  <li><a href="http://www.saladin5.fr/ir.html" class="ssmenu">Internet et Réseaux</a></li>
  </ul>
</li>
<li><a href="http://www.saladin5.fr/serveurphoto.html" class="menuprincipal">Serveur Photo</a></li>
 </ul>
</div>
<div id="pages">
 <p class="contenu">
Bienvenue sur le Dico de l'info, ici vous trouverez des définitions sur les termes informatiques...
 </p>
 <p class="starjojotrek">
Et voici aussi un petit lien pour les Fofos de Zeb.fr
<a href="http://starjojotrek2.free.fr/DLpourPC/">Starjojotrek</a>
 </p>
</div>

<div id="pied">
 <p>
<a href="#haut_de_page">
  <img class="rethautgauche" src="image/boutonhaut.jpg" alt="haut">
</a>
<a href="#haut_de_page">
  <img class="rethautdroite" src="image/boutonhaut.jpg" alt="haut">
</a>
 </p>
</div>
</body>

</html>

Si quelqu'un peut m'aider à trouver mes fautes ça sera bien gentil.

Merci d'avance et voici le lien pour le Validatior du source.

a+

Dylav · le 10 mai 2007

Validation CSS

Pour l'erreur dans chmenu, on ne peut pas affecter la valeur both à l'attribut float. On peut en revanche l'affecter à l'attribut clear, ce qui impose le forçage d'un retour à la ligne après. Je pense que c'est tout à fait ce que tu souhaitais faire :

#chmenu {clear: both; ...}

mais je ne suis pas sûr que ce soit nécessaire, dans la mesure où une <div> n'est pas un bloc inline, et qu'il y a toujours rupture de ligne après. Tu peux vérifier, mais tout semble fonctionner sans float ni clear.

Pour les warnings (messages d'alerte bénigne), c'est tout bête, il suffit de mettre entre guillemets les noms de polices contenant des espaces. Exemple :

h1 {font-family:"Comic sans MS", arial; ...}

Validation XHTML

Tu as 3 erreurs en tout, c'est drôlement propre pour un premier coup !

L'ancre : il faut l'inclure dans un bloc de type <p> ou assimilé. Je te suggère de la déplacer en tête de titre

<h1><a name="haut_de_page"></a>Le Dico de l'Info</h1>

Les balises dites "vides", c'est-à-dire balise de "début" sans balise de "fin" : il s'agit d'une harmonisation avec la syntaxe XML puisque, contrairement à HTML, le langage XHTML est un langage XML. On termine une balise vide par un "/" avant le ">" (certains prétendent que, pour des raisons de compatibilité, il faut faire précéder le "/" d'un espace, et j'en ai fait une habitude). Tu as le cas à traiter pour tes deux images retour haut. Exemple :

<img class="rethautgauche" src="image/boutonhaut.jpg" alt="haut" />

Tu peux vérifier, dans le <head>, que c'est le cas pour les deux balises <meta> et la balise <link>, mais sans l'espace...

Et là... tadâââm ! This Page Is Valid XHTML 1.0 Strict !

Connexion

Pas encore inscrit ?

Problèmes de liens

Messages recommandés

saladin

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

saladin

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

saladin

Lien vers le commentaire

Partager sur d’autres sites

fantassin-06

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

saladin

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer