la balise "h5" n'est pas autorisée dans "a" [Résolu]

[Mister Paul]

Je génère ce code depuis un CMS (PHP (Joomla)

Code :

<span class="browseProductTitle"><a title="zaza" href="zaza.htm"><h5 style="display:inline">titre zaza</h5> - sous titre zaza</a></span>

Je me suis arrangé comme ça pour avoir un seul et même lien englobant titre et sous-titre. Et non 2 liens distincts comme ça me le générait automatiquement dans mes autre essais…

Oui mais à la validation du code j'ai le message :

la balise "h5" n'est pas autorisée dans "a"

Comment faire pour consilier la validation du code et un lien unique sur ces 2 éléments ?

Merci pour l'aide
PAul

[brisso]

Salut,
et si tu englobes tout ton lien et que tu ajoutes des balises <subtitle> il y a toujours une erreur ?

[thelvin]

Envoyé par Mister Paul

Comment faire pour consilier la validation du code et un lien unique sur ces 2 éléments ?

Tu peux pas. Mets deux fois le même lien.

Un bricoleur idéaliste réglerait ça en JavaScript : un seul lien indiqué sur le titre, et du JavaScript s'occupe de copier le lien sur le sous-titre. Et si JavaScript ne marche pas, ben tant pis pour le lien sur le sous-titre, c'est pas la mort.
Mais bon, c'est beaucoup s'embêter pour rien.

[Mister Paul]

Envoyé par thelvin

Tu peux pas. Mets deux fois le même lien.

Ah ça non : ce n'est pas ce que je souhaite faire !

Envoyé par thelvin

Mais bon, c'est beaucoup s'embêter pour rien.

Ouh la la mais non pas du tout : des liens dissociés signifient quelque chose autrement ils auraient été associés !

Mais comment faire ça dans mon cas ?

[brisso]

Je ne comprend pas trop ton problème de "validation". Pour ma part quand je fait ce qui suit :

Code :

  <h1> <a href="#">exemple de lien <sub>et sous titre</sub></a></h1>

cela fonctionne sous ff, EI8, opera, safari et chrome.

[thelvin]

Envoyé par Mister Paul

Ouh la la mais non pas du tout : des liens dissociés signifient quelque chose autrement ils auraient été associés !

C'est intéressant. Je ne dis pas que vouloir ce genre de choses n'a pas de sens, moi-même je le fais assez souvent, mais j'aimerais que tu t'expliques un peu. Il existe peut-être des solutions équivalentes.

Toutefois, tu dois réaliser une chose : c'est bien d'avoir de l'ambition et de vouloir des choses. Mais la vie va parfois t'imposer des compromis. Le HTML, par exemple, permet de nombreuses choses... Et interdit toutes les autres. Or, le HTML a plus de pouvoir que tu n'en auras jamais. Il peut t'imposer tout ce que bon lui semble, et tu seras totalement impuissant à y faire quoi que ce soit.
Autrement dit, parfois, c'est juste pas possible. => Compromis.

@brisso:

Ce que l'on appelle un "sous-titre" est un deuxième titre, situé après un premier titre, généralement moins "important" que le premier, et stylisé différemment.

Exemple :

Code :

1
2
3
 
<h1>Un NoLife sur developpez.com !</h1>
<p class="sous_titre">thelvin est encore à étaler sa science après minuit le samedi.</p>

[Mister Paul]

Envoyé par thelvin

j'aimerais que tu t'expliques un peu. Il existe peut-être des solutions équivalentes.

Oui tu as raison. En fait c'est simple: je souhaite avoir 2 éléments de texte chacun avec un style différent, mais sur une même ligne et dans un même lien.

Quand je dis même lien je veux dire que lors d'un rollover, un clic, les 2 textes sont solidaires.

[thelvin]

D'accord. Et... Pourquoi ?

Cela dit, pour faire ça, une solution comme celle de brisso devrait faire l'affaire :

Code :

1
2
3
4
<h1><a href="lien.html">
  Un NoLife sur developpez.net !
  <span class="sous_titre">thelvin quitte-t-il parfois son ordinateur ?</span>
</a></h1>

C'est pas totalement le must au niveau sémantique, mais c'est pas catastrophique non plus.

[brisso]

Bonjour.
J'ai pensé un petit quelque chose qui je penses devrait assez vous plaire.
Pourquoi ne pas faire tes liens comme ça, je l'ai vu sur pas mal de site dc je me dis que c'est valide...

Code :

<a href="LIEN.html"><span class="GRANDTITRE">Contactez nous</span>Contact</a>

[Mister Paul]

Oui, oui c'est tout bête et ça fonctionnerait bien comme ça…
Je l'avais écarté car ça me pose d'autres problèmes de CSS que le <h5> réglait !
Me voilà dans les CSS maintenant !

[brisso]

Envoyé par thelvin

D'accord. Et... Pourquoi ?

Cela dit, pour faire ça, une solution comme celle de brisso devrait faire l'affaire :

Code :

C'est pas totalement le must au niveau sémantique, mais c'est pas catastrophique non plus.

Pfff...le débile... je n'avais même pas vu ta réponse...dsl

Pour le CSS tu ne devrais pas avoir trop de mal en faisant un truc du style :

Code :

<div class="lien"><a href="lien.html"> Titre<span>sous titre</span></a></div>

Code :

1
2
3
 
.lien { font-size:18px;}
.lien spam { font-size:14;}

bon courrage

[Mister Paul]

Euh vous êtes sûrs que ce code-là fonctionne ?…

Code :

1
2
3
4
<h1><a href="lien.html">
  Un NoLife sur developpez.net !
  <span class="sous_titre">thelvin quitte-t-il parfois son ordinateur ?</span>
</a></h1>

La classe "sous_titre" ne modifie pas le h1 chez moi…

[thelvin]

Envoyé par Mister Paul

Euh vous êtes sûrs que ce code-là fonctionne ?…

Code :

La classe "sous_titre" ne modifie pas le h1 chez moi…

Bien entendu, tu dois créer toi-même le CSS qui va modifier les choses.
"sous_titre" ne fait pas très anglais, tu ne crois pas ?

[Mister Paul]

vi, vi… j'avais bien compris.

Mais ce style ne modifie pas <h1>. Comme si une classe était inefficace contre un <h1>

[thelvin]

Wow wow wow... Hé, il faut apprendre CSS pour s'en servir, grand.

Il te faut une règle genre :

Code :

1
2
3
h1 .sous-titre {
  font-size: 0.5em;
}

[brisso]

Pourquoi n'utilise tu pas ce que je t'ai donné plus qui fonctionne parfaitement ??

[Mister Paul]

Yep…

Entre-temps j'étais sur

Code :

<a href="LIEN.html"><span class="GRANDTITRE">Contactez nous <span class="PETITTITRE">Contact</span></span></a>

qui fait ce que je souhaite sans me générer d'erreur de validation…

[thelvin]

C'est une des manières de faire...

Du coup, évidemment, tu n'utilises plus <h1> ou <h2> ou <h-truc>. Ce qui fait que tu ne perds rien avec :

Code :

<a href="LIEN.html"><span class="GRANDTITRE">Contactez nous</span> <span class="PETITTITRE">Contact</span></a>