Forum d'entraide PHPFrance

Salut,
Bon. J'ai plus ou moins terminé mon premier site css + xhtml. www.servicecivil.ch/projet 2 problèmes:

1. XHTML: lorsque je ferme la balise <br> avec </ br>, IE me rajoute une deuxième ligne, comme si j'avais introduit 2 <br> de suite.

2. CSS: alors que mes liens fonctionnent parfaitement avec Firefox, un petit test avec Internet Explorer n'a pas du tout donné les résultats escomptés. Certains liens ne sont pas reconnus comme tels (le curseur ne se transforme pas en main et on peut pas suivre le lien) et la propriété a:hover ne fonctionne pas avec la plupart des liens.
Code: j'ai introduit le code depuis un fichier séparer nommé links.css:
a {text-decoration: none; font-family: Tahoma, sans-serif; font-size: 12px;}
a:link {color: #ffffff;}
a:hover {color: #e20e0d;}
a:visited {color: #ffffff;}
Comme j'ai dis, ceci fonctionne parfaitement avec Mozilla et Opera, mais pas avec IE. Qq aurait une idée de ce qui j'ai fait faux?

Merci
jr

1. XHTML: lorsque je ferme la balise <br> avec </ br>, IE me rajoute une deuxième ligne, comme si j'avais introduit 2 <br> de suite.

La balise <br> est une balise de type marqueur (comme <img>, <input>, <hr>, etc.)
et non conteneur (comme <b>...</b>, <table>...</table>, etc.).

<br>toto est content</br> // incorrect
toto est content<br>      // HTML correct
toto est content<br />    // xHTML correct

2. CSS: alors que mes liens fonctionnent parfaitement avec Firefox, un petit test avec Internet Explorer n'a pas du tout donné les résultats escomptés. Certains liens ne sont pas reconnus comme tels (le curseur ne se transforme pas en main et on peut pas suivre le lien) et la propriété a:hover ne fonctionne pas avec la plupart des liens.

Un p'tit extrait de ton code, stp ?

J'ignore si c'est ton cas, mais lorsque tu utilises une écriture de ce type
(pas du tout W3C-valid, mais ça marche quand même) :

<a href="index.php"><table>...</table></a>

le lien peut fonctionner mais il ne reprend pas les propriétés CSS définies pour les liens.

Salut,
pour prendre la suite de ce qu'a dit albat, tu as dans ton code source quelques erreurs basiques faciles à corriger.
Quand tu utilises une balise vide, tu peux la fermer en terminant par "<.../>" au lieu de fermer avec "<...>" et ensuite "</...>". Ensuite, il y a les éléments dits "de blocs": Il ne sert pas nécéssairement à grand chose de les imbriquer. Ainsi, il est inutile de faire précéder un élément <table> d'un élément <p>.

Petite astuce : quand tu écris une balise ouvrante, avant même de mettre le moindre contenu dedans, écris ta balise de fermetre et complète ensuite: de cette manière, tu n'oublieras rien et tu économiseras beaucoup de temps en recherche.

N'oublie pas non plus qu'en XHTML, les éléments et leurs attributs doivent être écrit en minuscule, donc <p> et non <P>, <table width=""> au lieu de <TABLE WIDTH="">

Un outil qui peut te servir beaucoup pour corriger ton code, c'est le validateur du W3C qui peut te ré-afficher ton code en pointant les erreurs avec les numéros de ligne. Tu vas faire des découvertes intéressantes. par exemple, on te dit qu'il n'y a pas tel ou tel attribut dans un élément donné : l'utilisation du XHTML implique la préférence pour l'utilisation de feuilles de style CSS
Exemple : au lieu de

Code : Tout sélectionner

<body bgcolor="#FFFFFF">

Préfères ceci:

Code : Tout sélectionner

<body style="background-color:#FFFFFF">

Ici, c'est la méthode en ligne, tu peux aussi bien le mettre dans une feuille de style externe et de cette manière, tu pourras mettre à jour ton site en ne corrigeant qu'une seuille ligne dans la feuille de style au lieu de devoir ouvrir chaque page.

BOn code

Merci bcp à tous les deux.
[quote]Un p'tit extrait de ton code, stp ? [/quote]
Je sais pas trop ce que tu veux Alba, alors je te balance le code source de ma page de base (fin message).
T'es allé visité mon site Cyrano, pour que tu dises qu'il reste encore des erreurs dans mon code source, ou tu t'es juste inspiré de ce que Alba m'a dit?
A+
jr

[code]<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Permanence Service Civil (Genève)</TITLE>
<meta name="description" content="Permanence Service Civil de Genève" />
<meta name="keywords" content="service civil, Service Civil, permanence service civil, Permanence Service Civil, service civil suisse, Service Civil Suisse, suisse, Suisse, armée, Armée, armée suisse, Armée Suisse, service militaire, service militaire obligatoire, obligation de servir, aide service civil, association service civil, dossier service civil, dossier service civil suisse, alternative armée suisse" />
<link rel="stylesheet" type="text/css" media="all" href="css/links.css"><link />
<script language="javascript" src="css/bannieres.js"></script>
</head>

<body bgcolor="#FFFFFF"><P><font face=Tahoma>

<table border=0 cellspacing=0 cellpadding=0 height="550" WIDTH="750">
<tr>
<td height="85" bgcolor="#000066" width="750" colspan=3 align="center" valign="center"><font ace=Tahoma color="#e20e0d" size="6">Permanence Service Civil (PSC)</font><br><font color="#e20e0d" size="4">Genève</font><br /></h4></td>
</tr>
<tr>
<td valign="top" rowspan=3 algin="left" WIDTH=150 bgcolor="#000066" cellpadding=0 cellspacing=0>

<p>
<h1>Service Civil</h1>
<ul class="navbar">
<li><a href="pgs/scbref.html">En Bref</a></li>

<li><a href="pgs/scintrodem.html">Introduire une Demande</a></li>
<li><a href="pgs/perm.html">Permanences</a></li>
</ul>
</p>

<p>
<h1>La Permanence</h1>
<ul class="navbar">
<li><a href="pgs/pscbref.html">En Bref</a></li>
<li><a href="pgs/pscactivites.html">Nos Activités</a></li>
<li><a href="pgs/pscsoutient.html">Soutenir la PSC</a></li>

</ul>
</p>

<p>
<h1>Utile</h1>
<ul class="navbar">
<li><a href="pgs/uliens.html">Liens</a></li>
<li><a href="pgs/uleg.html">Législation</a></li>
<li><a href="pgs/ucontact.html">Nous contacter</a></li>
</ul>
</p>

</td>

<td align="left" valign="top"><img src="img\rond.gif"></img></td>
<td rowspan="3" valign="bottom" width="120">

<table>
<tr>
<td valign="top" align="right"><a href="pgs/pscaction.html" onmouseover="window.document.even.src='img/evenR.gif';" onmouseout="window.document.even.src='img/even.gif';"><img src="img/even.gif" border="0" name="even" id="even"></img></a><p>&nbsp</p></td>
</tr>
<tr>
<td valign="bottom" align="right"><a href="pgs/perm.html" onmouseover="window.document.perm.src='img/permR.gif';" onmouseout="window.document.perm.src='img/perm.gif';"><img src="img/perm.gif" border="0" name="perm" id="perm"></img></a></td>
</tr>
</table>

</td>
</tr>
<tr>
<td width=500 align="center" valign="bottom">

<table align="center">
<tr>
<td align="center" valign="top">
<img SRC="img\paix.gif"></img>
</td>
</tr>
<tr>
<td valign="bottom" align="center">
<img src="img\mix.gif" width="400"></img>
</td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</html>[/code]

Je n'ai pas encore tout épluché, mais il y a déjà un truc qui saute aux yeux (Aïe !)

<img SRC="img\paix.gif"></img>

1. la balise <img> n'est pas non plus un conteneur. Donc <img>...</img> n'existe pas. Il faut utiliser <img />
2. tu peux indiquer l'URL de ton image avec un slash
3. mieux vaut tout mettre en minuscules (bas de casse)

<img src="img/paix.gif" />

Salut,
pour le code source, j'ai ouvert le site avec FireFox et j'ai fait Ctrl+U

comme ça, j'ai eu le code source de la page

En faisant rapidement, le code que tu viens d'afficher ici revu et sommairement corrigé donne ceci :

Code : Tout 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>Permanence Service Civil (Genève)</title>
<meta name="description" content="Permanence Service Civil de Genève" />
<meta name="keywords" content="service civil, Service Civil, permanence service civil, Permanence Service Civil, service civil suisse, Service Civil Suisse, suisse, Suisse, armée, Armée, armée suisse, Armée Suisse, service militaire, service militaire obligatoire, obligation de servir, aide service civil, association service civil, dossier service civil, dossier service civil suisse, alternative armée suisse" />
<link rel="stylesheet" type="text/css" media="all" href="css/links.css" />
<script language="javascript" src="css/bannieres.js"></script>
</head>
<body bgcolor="#FFFFFF">
<table border=0 cellspacing=0 cellpadding=0 height="550" width="750" summary="">
  <tr>
    <td height="85" bgcolor="#000066" width="750" colspan=3 align="center" valign="center">
      <font ace=Tahoma color="#e20e0d" size="6">Permanence Service Civil (PSC)</font><br />
      <font color="#e20e0d" size="4">Genève</font>
    </td>
  </tr>
  <tr>
    <td valign="top" rowspan=3 algin="left" width=150 bgcolor="#000066" cellpadding=0 cellspacing=0>
      <p>
      <h1>Service Civil</h1>
      <ul class="navbar">
        <li><a href="pgs/scbref.html">En Bref</a></li>
        <li><a href="pgs/scintrodem.html">Introduire une Demande</a></li>
        <li><a href="pgs/perm.html">Permanences</a></li>
      </ul>
      </p>
      <p>
      <h1>La Permanence</h1>
      <ul class="navbar">
        <li><a href="pgs/pscbref.html">En Bref</a></li>
        <li><a href="pgs/pscactivites.html">Nos Activités</a></li>
        <li><a href="pgs/pscsoutient.html">Soutenir la PSC</a></li>
      </ul>
      </p>
      <p>
      <h1>Utile</h1>
      <ul class="navbar">
        <li><a href="pgs/uliens.html">Liens</a></li>
        <li><a href="pgs/uleg.html">Législation</a></li>
        <li><a href="pgs/ucontact.html">Nous contacter</a></li>
      </ul>
      </p>
    </td>
    <td align="left" valign="top"><img src="img\rond.gif"></img></td>
    <td rowspan="3" valign="bottom" width="120">
      <table summary="">
        <tr>
          <td valign="top" align="right"><a href="pgs/pscaction.html" onmouseover="window.document.even.src='img/evenR.gif';" onmouseout="window.document.even.src='img/even.gif';"><img src="img/even.gif" border="0" name="even" id="even"></img></a><p>&nbsp</p></td>
        </tr>
        <tr>
          <td valign="bottom" align="right"><a href="pgs/perm.html" onmouseover="window.document.perm.src='img/permR.gif';" onmouseout="window.document.perm.src='img/perm.gif';"><img src="img/perm.gif" border="0" name="perm" id="perm"></img></a></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width=500 align="center" valign="bottom">
      <table align="center" summary="">
        <tr>
          <td align="center" valign="top">
            <img SRC="img\paix.gif"></img>
          </td>
        </tr>
        <tr>
          <td valign="bottom" align="center">
            <img src="img\mix.gif" width="400"></img>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Grosso modo, j'ai corrigé une balise <link></link> en <link />, une balise <br> en <br />, ajouté un attribut "summary" obligatoire en XHTML dans la balise <table>, mis tous les attributs en minuscule (norme XHTML) et supprimé des balises inutiles, <p> et <font> juste avant le tableau et non fermées.
Comme tu vois, rien de majeur. Je n'ai aps fait d'essai d'affichage n'ayant pas récupéré la feuille de style ni les images, mais je te laisse vérifier toi-même le résultat.
Ce que tu peux faire pour améliorer encore, c'est dégraisser le code html et améliorer au niveau des CSS
par exemple, la balise <table> : au lieu de

Code : Tout sélectionner

<table border=0 cellspacing=0 cellpadding=0 height="550" width="750" summary="">

Tu pourrais faire ça :

Code : Tout sélectionner

<!-- Code HTML -->
<table class="principal" summary="">
<|-- Et dans ta feuille de style externe -->
<style>
table.principal {border: none; border-collapse: collapse; height: 550px; width: 750px}
</style>

Comme ça, tu écris moins de code dans tes pages HTML et si tu mets à jour justela feuille de style, tout le site est mis à jour d'un coup.

Excellent les gars,
Je vous remercie franchement bcp.
J'espère pvr un jour rendre un tel service à un autre débutant afin de pouvoir vraiment vous remercier.
Tout de bon,
jr

Ceci dit, et au risque de paraître chiant, j'ai tjrs le même prblme avec mon site sous IE. Les liens ne sont pas reconnus comme tels par le navigateur, ce qui ne facilite pas vraiment la naviagation sur le site. Ceci est d'autant plus space, qu'il fonctionne parfaitement sous opera et mozilla....
Je crois que ce problème est lié à l'utilisation d'une page css externe. Y a-t-il des problèmes de ce genre connus avec IE?

IE a en effet une façon assez personnelle de réagir aux survols de liens.
J'ai noté plusieurs fois que le survol de deux liens définis par le même style CSS
ne provoquait pas le même effet (en l'occurrence, un changement de couleur pour le a:hover)
L'un changeait de couleur, l'autre pas. Va comprendre...

Que faire ? Attendre IE 7 ?
Ou... brûler Bill Gates ?

Ça y est ! Ça m'reprend !...

J'en connais un qui va rêver d'incendies toute la nuit

IE7 sera peut-être enfin conforme aux standards si les développeurs de IE relèvent le défi que leur propose le président d'Opéra.

Opera, par la voix de son PDG Hakon Wium Lie (accessoirement papa du CSS), et la Web Standard Project lancent un défi à Microsoft.

Ils vont mettre en place une batterie de tests sous forme d'une page contenant toute une série d'éléments répondants à certains standards. Cette page, nommée Acid2 sera bientôt mise à jour et contiendra ces fameux standards qui sont en gros des recommandations du W3C.

Voici une partie de l'annonce officielle :

"Aux développeurs d'Internet Explorer 7, je veux dire :

Vous êtes talentueux et intelligents. Vous connaissez les standards du web aussi bien que n'importe qui. Vous étiez capables de réparer IE dans le passé mais vos responsables ne vous ont pas laissé faire. Vous avez maintenant une chance de le faire : saisissez-la."

Les auteurs du message sont sûrs que les développeurs d'Internet Explorer réagiront car il s'agit d'un challenge à relever.

Super,
ça fait longtemps que je n'utilise plus IE moi-même, comme la plupart de ceux qui s'y connaissent ne serait-ce qu'un mini chouyat en informatique.
Ceci dit, le but d'un site Internet est qu'il soit accessible par tous, y compris par les nombreux moutons de Bille Gates qui n'ont pas encore trouvé qq pour leur installer mozilla.
Que faire dès lors d'une page de script css juste mais pas compatible avec IE? Y a-t-il un moyen d'en assurer l'affichage ou faut-il réintégrer tout le code dans chaque page (et ainsi renoncer à un des grands privilèges de css et aux normes XHTML)?
Malgré les immenses avantages qu'il présente (et dont je n'ai eu qu'un avant goût), si je dois renoncer à CSS pour m'assurer de toucher un publique aussi large que possible avec mon site(ce qui est le but, surtout vu le sujet du site en question), cela me ferait chier mais je le ferai.
Comment donc marrier les progrès en langage avec les logiciels pourris?
A+
jr

Est-il possible de "marier les progrès en langage avec les logiciels pourris ?"

Euh... en posant la question, tu n'as pas eu une vague idée de la réponse ?...

Comment donc marrier les progrès en langage avec les logiciels pourris?

zatize ze couechtionne !

De toute façon un site codé en XHTML et testé sous Firefox a beaucoup plus de chances de fonctionner correctement avec IE.

En passant les tests sous Firefox j'ai du "apprendre" le xhtml et depuis je n'ai plus de problème à part quelques balises (je pense à marquee par exemple) qui ne sont pas standards.

Forum d'entraide PHPFrance

problèmes avec IE

problèmes avec IE

Re: problèmes avec IE

Re: problèmes avec IE