Widget derniers sujets (erreur détectée par markup validation)

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
sur mon template mod_recent_topics, markup validation me détecte une erreur avec le center de cette portion

Code:

<tr>
      <td class="" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
   </tr>

La seul modif que j'ai fait sur cette portion est de supprimer la class cathead .

Voici l'alerte de markup

document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
…

Code:

t="25"><span class="genmed"><b><center>Derniers sujets</center></b></span></td…

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Mon template dans son intégralité ; hormis ce cathead, j'ai supprimé juste une class row1 ; il est pour ainsi dire presque d'origine

Code:

<!-- BEGIN scrolling_row -->
    {MARQUEE_JS_SRC}
    <table class="forumline genmed" width="100%" border="0" cellspacing="1" cellpadding="0">
            <tr>
                    <td class="catLeft" height="25">
                            <span class="genmed module-title">{L_RECENT_TOPICS}</span>
                    </td>
            </tr>
            <tr>
                    <td class="row1" style="height:{SCROLL_HEIGHT}px;">
                        <div class="marquee" align="left" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
                            <!-- BEGIN recent_topic_row -->
                                »&nbsp;<a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a><br />
                                <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}&nbsp;

                                <!-- BEGIN switch_poster -->
                                <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
                                <!-- END switch_poster -->

                                <!-- BEGIN switch_poster_guest -->
                                {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
                                <!-- END switch_poster_guest -->
                            <!-- END recent_topic_row -->
                        </div>
                    </td>
            </tr>
    </table>
    <script>
        $(".marquee").marquee();
    </script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
   </tr>
   <tr>
      <td class="" align="left"><span class="gensmall">
      <!-- BEGIN recent_topic_row -->
      » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /><img src="{ICON_TIME}" alt="" />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
      <!-- END recent_topic_row -->
      </span></td>
   </tr>
</table>
<!-- END classical_row -->

Pour faire bref, quelqu'un serait me renseigner pour savoir quel est le soucis lié à cette balise center ?

Merci par avance pour vos réponses

[Neptunia]

Coucou Stéphane ^^


Pour une fois le message du validateur est plutôt explicite

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

L'élément <center> est une balise de type bloc et n'a donc pas sa place à l'intérieur d'un élément en-ligne comme ici un <span>

Et j'irai encore plus loin en disant que la balise <center> n'a sa place nulle part puisqu'elle est obsolète.

[demeter1]

Bonjour Héléne,
Merci pour cette aide.
je modifie la class du span et je gère l'alignement par css donc ?

Est-il nécessaire de procéder ainsi sur l'ensemble des center contenus dans les templates ?

[Neptunia]

On peut au choix passer par le css, ou embarquer directement le style dans la partie html.

Par exemple sur FA, l'utilisation du bbcode center est transformé à l'exécution par :

Code:

<div align="center"> Contenu </div>

L'aspect bloc de l'élément <center> est repris par l'emploi de <div> (élément bloc) et le centrage par sa propriété align.

Est-il nécessaire de procéder ainsi sur l'ensemble des center contenus dans les templates ?

Cette balise est bien pratique et est encore très largement utilisée. Je ne sais même pas si les validateurs la signalent si elle est employée à l'intérieur de bons conteneurs (d'autres éléments bloc).
Mais comme elle est obsolète, les navigateurs n'ont plus aucune obligation de la gérer, et du coup ça présente un risque qu'aujourd'hui ou demain elle soit interprêtée différemment selon les navigateurs. C'est ce qui s'est passé par exemple à une époque avec le <marquee> sous Google Chrome. Le cas était toutefois différent. Cet élément était une pure invention de Microsoft, jamais standardisée.

Quant à supprimer tous tes <center>, à toi de voir ! Mais éviter d'en mettre là où il n'y en avait pas encore.

Lien externe : <center> - Mozilla Developer Network

[demeter1]

Merci Hélène pour tous ces renseignements.