Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Problèmes de liens

saladin

Par saladin
dans Programmation

 Partager

Messages recommandés

saladin Mega Power Member

saladin

Posté(e)
  • Auteur
Posté(e) (modifié)

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 :P

Aurais tu une solution?

a+

Modifié par saladin

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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... :P

 

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 Mega Power Member

saladin

Posté(e)
  • Auteur
Posté(e) (modifié)

Salut,

Oulala :P 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... :P .

 

- 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 :P .

Merci d'avance :P .

a+

Modifié par saladin
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

<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>

<script> de fin de page

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 :P

saladin Mega Power Member

saladin

Posté(e)
  • Auteur
Posté(e)

Salut,

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

 

<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 :P 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 :P

 

<script> fin de page

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 :P

 

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

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 Mega Power Member

fantassin-06

Posté(e)
Posté(e)

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.

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

<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... :P

 

<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"... :P

 

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'à... :P

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 :P

 

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

saladin Mega Power Member

saladin

Posté(e)
  • Auteur
Posté(e)

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... :P . 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 :P

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+

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 ! :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...