5568 sujets

Sémantique web et HTML

bonjour à tous.

voila le souci dont je n'arrive pas à me défaire ...
si une âme charitable peut me donner un coup de main ?

Je souhaite créer des fieldsets avec legend composée de plusieurs éléments générés par du PHP.

voici le code actuel :

<fieldset id="field_quijouequoi">
    <legend>
    <?php
    $reponse_scorereel = $bdd->prepare(' SELECT E1.nom AS nom_equipe1, E1.logo AS logo_equipe1, E2.nom AS nom_equipe2, E2.logo AS logo_equipe2, MA.score1 AS scorereel_equipe1, MA.score2 AS scorereel_equipe2, a_jour
                                                  FROM matchs MA
                                                INNER JOIN equipes E1
                                                ON MA.equipe1 = E1.id_equipe
                                                INNER JOIN equipes E2
                                                ON MA.equipe2 = E2.id_equipe
                                                   WHERE id_match = ?');
            $reponse_scorereel->execute(array($_GET['match']));
            $donnees_scorereel = $reponse_scorereel->fetch();
     if($donnees_scorereel['a_jour'])
     {
     ?>
<!--a->
          <span>
              <img class="vignette_pronostics" src="<?php echo(ROOTPATH.'/images/logos/'.$donnees_scorereel['logo_equipe1'])?>" title="<?php echo($donnees_scorereel['nom_equipe1'])?>" alt="<?php echo($donnees_scorereel['nom_equipe1'])?>"/>
              <span class="centre_pronostics">
                  <input class="score1" type="text" name="prono1" id="prono1" disabled="true" value="<?php echo($donnees_scorereel['scorereel_equipe1'])?>" />
                  <span class="tiret_pronostics">-</span>
                  <input class="score2" type="text" name="prono2" id="prono2" disabled="true" value="<?php echo($donnees_scorereel['scorereel_equipe2'])?>" />
              </span>
              <img class="vignette_pronostics" src="<?php echo(ROOTPATH.'/images/logos/'.$donnees_scorereel['logo_equipe2'])?>" title="<?php echo($donnees_scorereel['nom_equipe2'])?>" alt="<?php echo($donnees_scorereel['nom_equipe2'])?>"/>
           </span>    
     <?php        
     }
     else
     {
        echo('<span>MATCH EN COURS</span>');
     }
     ?>
     </legend>
        
INTERIEUR DU FIELDSET
...




L'affichage est nickel sous IE et FF.
Par contre, sous Chrome et Safari, je n'ai rien du tout d'affiché dans le legend. (on voit juste la place prise, au niveau de la coupure du filet du fieldset.

Bon ok, il y a des inputs qui font bondir (c'est juste une demande esthetique), et des spans à l'intérieur de spans (c'est pour styliser, je n'ai trouvé que cette astuce, à la place des divs, qui permettent que ça fonctionne, du moins sur FF et IE). Mais ce ne sont pas ces éléments qui empechent l'affichage sous webkit.
Si je libère le "a" coincé en commentaires dans <!--a-> , alors l'intégralité du legend s'affiche bien sous tous navigateurs. Mais le "a" s'affiche également bien sûr.

Comment pourrais-je afficher correctement ce legend sous tous navigateurs ?
merci d'avance !
Modérateur
Bonjour,

Ce serait plus simple si tu mettais uniquement le code HTML généré par le PHP. (view source dans ton navigateur préféré), ainsi que les CSS associés.

Sinon une page en ligne c'est encore mieux.
exact !
J'aurai bien posté l'URL, mais c'est une page sécurisée par mdp.
voila le code généré

<fieldset id="field_quijouequoi">

        <legend>
                <img class="vignette_pronostics" src="sochaux.png" title="Sochaux" alt="Sochaux"/>
            <span class="centre_pronostics">
                <input class="score1" type="text" name="prono1" id="prono1" disabled="true" value="3" />
                <span class="tiret_pronostics">-</span>
                <input class="score2" type="text" name="prono2" id="prono2" disabled="true" value="0" />
             </span>
            <img class="vignette_pronostics" src="lens.png" title="Lens" alt="Lens"/>

        </legend>


et entre temps, je viens bizarrement de solutionner le problème par l'ajout d'un clear:both sur le dernier <img> (les éléments vignettes et centre sont en float)
Lorsqu'il y a ce clear:both, plus besoin de mettre mon caractère "a".
Bon, j'ai le résultat voulu, mais la méthode me chagrine un peu.
Modérateur
Moi ce qui me chagrine, c'est de mettre autant d'éléments dans l'élément legend, alors que celui-ci devrait servir de caption (de titre) pour décrire le fieldset. Il serait peut-être plus sage de mettre tes nombreux éléments à l'intérieur du fieldset, sous le legend. Peux-tu au moins faire une capture d'écran du fieldset pour qu'on voit concrètement à quoi ressemble le formulaire?

Tu penseras aussi à valider ton code. Il me semble que c'est disabled="disabled".
le code est valide W3C.

euh .... c'est pas un formulaire. pas taper ! Smiley lol

Toutes mes pages sont construites sous la même forme, avec des fieldsets, j'aimerai garder l'uniformité.
La page en question, ça donne ça :

http://img706.imageshack.us/img706/1429/capturemei.jpg

Dans la légende, on a le score réel du match, puis dessous les pronos de chacun des membres.
Le score réel est présentée de façon identique à celle des pronos.
Il me reste un problème d'espace plus important à gauche de la legend qu'à droite, et ce sur tous les navigateurs.
Modérateur
Justement, les éléments HTML ne doivent pas être utilisés pour des questions d'esthétisme, mais pour leur signification et leur rôle. Pour l'esthétisme, il faut se tourner vers les CSS pour personnaliser les éléments adéquats.

En regardant l'image, je te dirais d'utiliser un tableau pour afficher les résultats si ce n'est pas déjà le cas. Pour ce qui est du legend, un bon vieux titre (h1, h2...) avec le positionnement adéquat pourrait faire le travail, quoique ce n'est pas tout à fait un titre. Ça demande réflexion.

J'éliminerais aussi les inputs.

Si tu tiens absolument à continuer à utiliser les fieldsets et legends, je vais laisser le soin aux autres membres de t'aider, parce que je trouve que c'est un non sens.
Modifié par Tony Monast (19 Oct 2010 - 17:17)
Tony Monast a écrit :
Justement, les éléments HTML ne doivent pas être utilisés pour des questions d'esthétisme, mais pour leur signification et leur rôle. Pour l'esthétisme, il faut se tourner vers les CSS pour personnaliser les éléments adéquats.

Oui, tu as raison, vu comme ça je ne peux que m'incliner.
J'avais lu les methodes pour "simuler" des fieldsets et legends, avec des positionnements absolute de div, et en jouant sur les z-indexs,mais cela m'avait paru vraiment usinagazesque, par rapport à l'utilisation de fieldsets.

Après, en admettant que l'intérieur du fieldset ait été un formulaire ... Il doit quand meme bien être possible de mettre plusieurs éléments, dans un legend, en les stylisants.
Si je les place dans des <h1> comme tu l'evoques, rien ne s'affiche sous webkit.