5568 sujets

Sémantique web et HTML

Salut,

Je cherche à faire une liste de liens multi-éléments : le contenu de chaque lien serait une image, un Hn (le titre de l'image), et un p (le descriptif).
Ceci afin de pouvoir faire présenter un rollover sur l'ensemble, et que l'ensemble soit cliquable.
Problème : la balise a n'est censé contenir que du contenu inline. Comment faire ?

Merci
bonjour

Utiliser la propriété display:block qui modifieras le comportement de ta balise.

En revanche, je ne suis pas certain de la valeur sémantique d'une balise Hn dans un lien (Je sais pas trop pourquoi à vrai dire, mais ça me questionne),

J'aurais eu tendance à faire l'inverse : un lien dans un titre.

La structure que tu veux monter me parait un rien tarabiscoté quand-même.

Je suppose que ton roll-over va être javascripté pour satisfaire IE.
A y être pourquoi ne prends tu pas une structure plus classique, par exemple en encapsulant les éléments dans un contener, dans l'idéal un li, que tu rendrais roll-over-cliquable par javascript en récupérant la valeur du href via le DOM, et en laissant le lien accessible en cas de désactivation de javascript ?

Ce serait sans doute moins surprenant, particulièrement dans la perspective d'une meilleure accessibilité ?

JP

Ps: En passant quelque soit la solution, penses à doubler tes events onmouse avec onfocus pour la navigation au clavier...

JP
Administrateur
jpv a écrit :

Utiliser la propriété display:block qui modifieras le comportement de ta balise.

Non malheureusement, les modifications CSS n'affecteront que la présentation de la balise : elle sera affichée comme une balise de type bloc, mais sa structure restera toujours inline et ne pourra jamais contenir d'éléments blocs.

D'ailleurs le validateur HTML ne valide que la structure, pas ce qu'on peut en faire via CSS.

Pour le reste, j'aurais tendance à dire comme jpv.
La nuit menant paradoxalement (via le sommeil paradoxal ?) à l'illumination, je me suis réveillé en pensant au même genre de traitements (et à un bon verre de jus d'orange), j'avais donc pensé utiliser la méthode suivante, sur laquelle je voudrais votre avis :
- mettre le hover sur le li (en utilisant whatever:hover pour ie via une feuille de style à inclusion conditionnelle)
- mettre les trois éléments du li en liens, selon la structure suivante

<li>
  <a href="truc.html"><img src="truc.png" /></a>
  <h3><a href="truc.html">Titre de l'image</a></h3>
  <p><a href="truc.html">description</a></p>
</li>


Remarque : j'ai mis le lien dans le titre, et dans le paragraphe, en raison de leurs natures respectives block/inline. De plus, je mets les liens en display : block pour qu'ils n'y ait pas d'espace "vide de lien" dans mon li.

Alors votre opinion ? Smiley murf
Ce que tu veus je pense est un rendu à l'écran. C'est à dire qu'il faut que l'ensemble de la zone comprenant l'image, le titre et la description soit cliquable.

C'est donc un pur problème de css et il n'est ni utile ni très bon de le résoudre au niveau de la source html.

Une piste pour la solution : il faut que <a> remplisse tout <li> en largeur et hauteur et qu'il soit au premier plan.

Bon courage Smiley cligne
Bonjour,
pour l'avoir essayé, un "hn" ne sera jamais validé dans un "li"...
Par contre, tu peux essayer avec les listes de définitions :

<dl>
<dt>Ton image</dt> /*terme à déifnir*/
<dd class="titre">Titre de ton image</dd>/*la classe (titre, par exemple) te permet de lui passer un rendu en css*/
<dd class="texte">Ton texte explicatif</dd>/* idem avec la classe, et tu peux associer plusieurs définitions pour un élément à définir*/
</dl>

Bien sûr, tu peux affecter les liens trois fois, comme dans tes "li" précédemment
Modifié par Macpom (02 Jun 2005 - 11:05)
@clb56 : je vais voir ce que donne cette piste et je vous dirais le résultat. Ceci dit, il n'est pas faut de dire que les trois parties sont bien trois éléments portant un lien vers la même page, l'écriture de 3 liens ne me semble donc pas fausse (bien que pas optimale je te l'accorde).

@Macpom : un h2 n'a aucune raison de ne pas être validé dans un li : un li admet aussi bien du contenu block que inline. Et après test, ça passe sans problème sur le valideur du w3c, sur celui du wdg et sur celui de yansanmo.
Alors tant mieux pour ton "h2" ; quelle DTD as-tu utilisé ? Je en retrouve plus la page précisément où ce n'était pas passé, chez moi, mais j'en ai le souvenir !
@Macpom : XHTML 1.0 Strict

@clb56 : Après tests, je ne vois vraiment pas comment ta méthode pourrait marcher, puisque
a) le lien en question n'aurait a priori pas de contenu, ce que je trouve étrange d'un point de vue sémantique
b) comment le lien, qui serait un descendant du li, pourrait-il influer sur son parent ou ses "siblings" ?
NB : Oui j'ai bien réussi à faire un lien qui recouvre tout le li. Mais ça ne marche pas sous IE Win (oh mon dieu quelle surprise Smiley confus )
Marvin Le Rouge a écrit :


@clb56 : Après tests, je ne vois vraiment pas comment ta méthode pourrait marcher, puisque
a) le lien en question n'aurait a priori pas de contenu, ce que je trouve étrange d'un point de vue sémantique
b) comment le lien, qui serait un descendant du li, pourrait-il influer sur son parent ou ses "siblings" ?
NB : Oui j'ai bien réussi à faire un lien qui recouvre tout le li. Mais ça ne marche pas sous IE Win (oh mon dieu quelle surprise Smiley confus )


à propos de a)

Le lien en question a tout son sens si tu lui en donnes un de contenu. En fait en terme de structuration html ce que tu souhaites s'énoncerait très bien ainsi :


<ul>
        <li class="idli">
        <h3>Titre</h3>
        <img src="img.jpg" alt="texte de remplacement" />
        <p>
        Texte de commentaire de l'image
        </p>
        <p>
        Texte de commentaire de l'image
        </p>
        <p>
        Texte de commentaire de l'image
        </p>

        <a href="page.html">goto page</a>

        </li>
</ul>


à propos de b)

Il y a effectivement quelques points à régler et les bug de IE ont un charme fou Smiley lol

Celà dit, rien d'insurmontable.

Il faut donner une hauteur à <li>, mettre un background à <a> (ça règle le problème pour IE, évidemment le background doit être transparent), se débrouiller pour faire disparaitre le texte du lien dans la version stylée.

Proposition de css :


        .idli {
        position:relative;
        height:15em;
        }

        .idli a {
        text-decoration:none;
        text-indent:-5000px;
        display:block;
        position:absolute;
        top:0;
        left:0;
        z-index:1000;
        width:100%;
        height:100%;
        background:url(transparent.gif);
        }


testé avec FF, opera, IE6 (le tout sous windows)

L'important de tout ceci à mon sens c'est que l'intégité du document html est complètement préservée.

++
Je testerai ta solution et je te dirai ce que ça donne.
Pour le lien, je trouve vraiment ça dommage que son contenu soit limité aux balises inline : pourquoi, structurellement, un lien ne pourrait-il pas avoir un contenu de type block ?
Marvin Le Rouge a écrit :
pourquoi, structurellement, un lien ne pourrait-il pas avoir un contenu de type block ?


quand une balise block est donnée un nouveau point d'articulation est donné dans la structuration du document. Si chaque lien constituait un tel point d'articulation ce serait une folie donc les liens sont inline. Si un contenu quelconque d'une balise inline pouvait devenir point d'articulation du document on en arriverait également à une folie.
Modifié par clb56 (03 Jun 2005 - 14:42)