[résolu] A href dans h1 ?

Bonjour,

je me demande si on peut faire cela :
des liens dans une balise h1..
avec chaque lien IDentifié pour lui attribuer une couleur spécifique et des écartements adequates.

<h1>
<a id="t-trois" href="[~127~]" title="Votre site Professionnel, évolutif et auto-administrable">WEB DESIGN</a>
<a id="t-deux"  href="[~126~]" title="Notre expertise en Développement logiciel">DEVELOPPEMENT</a>
<a id="t-un" href="[~125~]" title="Réseaux, Linux, Windows, Maintenance, Mac">SERVICES</a>
</h1>

L'affichage est ok, mais... de lien, il n'y a pas.. (survol non réactif, pas de clic possible).


Ca surement bidon mais ....

J'ai aussi essayé de coller l'id dans un span contenant les a href, mais là ca ne donne plus le résultat visuel souhaité.

Merci

extrait css

/* container positionné hors flux */
#teaser-top {

	font-size: 65%;
	position: absolute;
	top: 3px;
	right: 150px;

	margin: 0;
	padding: 0;
}

/* contournement des h1 standard */
#teaser-top h1 {

        display: inline!important; /* heu ca c'est pas forcément à garder */

	background-image: none!important;
	padding: 0;
	border: none!important;
}

/* les trois liens */
#teaser-top #t-un {

	color: #FF1493;
	background-image: none;
	padding: 0;
}

#teaser-top #t-deux {

	border: none;
	color: #00C834; 
	background-image: none;
	padding: 0 40px 0 40px;

}

#teaser-top #t-trois {
        border: none;
	color: #FF8C00;
        background-image: none;
	padding: 0;
}

Modifié par elz64 (10 Nov 2007 - 09:32)

Salut elz64 je viens de tester ton bout de code vite fait et chez moi ça marche impec.. Les couleurs, les liens, le survol etc..

Et je vois pas de problème dans le code

ben M.. alors ! Merci

Une goousse d'ail ... un exorciste .. quelqu'un ?

Hum pb de cache alors entre mes diverse mises à jour du code /reload de la page ...?

je pense que l'ensemble des héritages de mes css complets sont peut-être en cause aussi ..
mais je ne vois pas pourquoi les liens resteraient non fonctionnels alors..hum

Pour te faire une idée copie/colle les bouts de code que tu as posté dans un nouveau fichier et teste tu verras que ça fonctionne

Sinon c'est que le problème vient d'ailleurs

je viens de rafraichier le cache de MODx.

IE se comporte ok !

toujours pas FF.

J'ai souvent des tremblements nerveux avec le rafraichissement sous FF.

Je crois que c'est encore le cas.

Mais je dois tester avec un autre PC..

Si qqun sait comment forcer la purge du cache de FF (ctrl F5 ne marche PAS vraiment).

Il y a une option pour "Effacer tes traces" dans les outils

mouais ..pas le plus pratique..
J'ai eu dans le temps (!) une extension FF qui faisait ca.

Pas retrouver.

Merci

Hello,

Le code posté est:

1. Syntaxiquement correct
À l'exception de la valeur de l'attribut href de chaque lien, qui devrait être une URL (nota: si tu gardes un href vide, certains navigateurs n'afficheront pas le contenu de l'élément comme un lien réactif, mais comme du texte simple).

2. Sémantiquement incorrect
Un titre de section introduit un contenu. Ici, tu as une suite de liens, qui s'apparente à un menu de navigation, et qui à priori n'introduit pas le contenu qui suit. C'est une utilisation abusive de h1. Utilise plutôt une liste non ordonnée, ou bien un simple paragraphe ou une div.

Remarque en passant: il est par contre syntaxiquement «correct» ou du moins «acceptable» de placer un lien sur un hN quand celui-ci est réellement un titre de section. Exemple typique: les pages d'index sur les blogs, où on a pour chaque billet récent un titre de section et un début de contenu, et où le titre du billet introduit le contenu ou l'extrait de contenu... et permet également d'accéder à la page du billet.
Dans l'idéal, il faudrait séparer ces deux fonctions (introduire le contenu ou l'extrait de contenu avec un titre, et donner accès à l'article avec un lien séparé), mais c'est un mécanisme bien connu des utilisateurs et donc intéressant du point de vue de l'ergonomie.

elz64 a écrit :
Pas retrouver.

Dans Firefox 2:
Outils > Effacer mes traces (Ctrl+Maj+Suppr)

ben ...
marche tjs pô ds FF.
du tout.

c'tagacant s'truc là. je verrais demain.

elz64 a écrit :
marche tjs pô ds FF.
du tout.

c'tagacant s'truc là.

elz64, pourrais-tu faire l'effort d'écrire en français et en toutes lettres? Ça facilitera la lecture pour tout le monde (en particulier pour les utilisateurs de synthèse vocale, mais pas que).

Et pour revenir au sujet:
- le code HTML que tu as posté marche (les liens sont marqués comme actif), pas testé avec le CSS;
- de toute façon, tu devrais commencer par corriger la structure HTML (ce h1 n'a rien à faire autour de ces liens).

a écrit :
Remarque en passant: il est par contre syntaxiquement «correct» ou du moins «acceptable» de placer un lien sur un hN quand celui-ci est réellement un titre de section.

Il s'agit d'un teaser en sommet de page jouxtant le menu d'évitement (aller au contenu)

Il s'agit bel et bien de titres de sections, décrites plus bas et non instantanément visibles (pas "above the fold" en 1024x768). hn me paraissait bien, et tant qu'à faire h1, vu que c'est important. j'aime autant que G suive ces liens.


Le contenu du code [~nn~] des a href est un tag MODx qui correspond à l'url de la page visée

Florent V. a écrit :


2. Sémantiquement incorrect

Non.

elz64 a écrit :
Il s'agit bel et bien de titres de sections, décrites plus bas et non instantanément visibles (pas "above the fold" en 1024x768).

Mouais... il faudrait voir en fonction du contenu exact de la page, mais ça me parait louche.

Qu'est-ce que tu as juste après ce h1?

Edit: hé hé, me fais taper sur les doigts. Deux-trois mots en plus, Laurent?
Modifié par Florent V. (09 Nov 2007 - 20:03)

Florent V. a écrit :

Edit: hé hé, me fais taper sur les doigts. Deux-trois mots en plus, Laurent?

Non.

Pas pu m'en empêcher, désolé.

Bon. On peut déjà partir de là: si le contenu du titre est pertinent en tant que tel, c'est à dire s'il décrit ce qui le suit (et ici, il me semble qu'on peut le supposer), il n'y a aucune raison normative pour qu'il ne puisse pas contenir de liens par ailleurs.

C'est un bon exemple, par ailleurs, d'énumération qui n'a rien à voir avec les éléments de liste, par obligation structurelle.

Mais l'intéressant ici, surtout, c'est de montrer que les liens n'ont en fait rien à voir avec la "structure logique" des contenus : le lien est un élément de texte, non de phrase ou supra. Il peut intervenir n'importe-où, tout comme un vulgaire span.
Modifié par Laurent Denis (09 Nov 2007 - 20:16)

Laurent Denis a écrit :
si le contenu du titre est pertinent en tant que tel, c'est à dire s'il décrit ce qui le suit (et ici, il me semble qu'on peut le supposer)

C'est sur ce point que j'ai un doute: est-ce que «Webdesign Développement Services» décrit ce qui suit... j'ai estimé un peu vite que non, mais ça me semble un minimum casse-gueule tout de même.

elz64, qui a accès au contenu, saura trancher.

Laurent:

a écrit :
Mais l'intéressant ici, surtout, c'est de montrer que les liens n'ont en fait rien à voir avec la "structure logique" des contenus : le lien est un élément de texte, non de phrase ou supra. Il peut intervenir n'importe-où, tout comme un vulgaire span.

J'adhère.

Denis:

a écrit :

C'est sur ce point que j'ai un doute: est-ce que «Webdesign Développement Services» décrit ce qui suit... j'ai estimé un peu vite que non, mais ça me semble un minimum casse-gueule tout de même.

C'est apparenté à un menu d'évitement.
D'une part ca dit les 3 mots important (le Quoi) et ca permet de renvoyer de suite vers des sections que l'on ne lirait pas forcément vu que pas visibles (ce sont des 'chapitres' apparents sous le "coucou" de l'accueil.

Afin de s'assurer que le visiteur comprenne de suite de quoi il s'agit et offrir la possibilité de sauter directement vers les pages j'ai voulu intégrer les liens. Cela a aussi un autre effet utile par l'info bulle du Title.

Reste que ces liens ne sont pas, dans ce choix, des sauts vers des ancres de la même page (ce qui eut été un choix pur 'évitement') mais des sauts vers les pages individuelles de chacune des 3 sections décrites.

Enfin, je continue de considérer qu'il s'agit bien de titres de 1er niveau dans la 'catégorie' QUOI.
Je n'ai peut-être pas de grosse expérience SEO, mais bon, Google considèrera peut-être mieux un lien dans un h1 que dans un span.

ps : je suis navré que les lecteurs vocaux n'aient pas la capacité à rendre la dérision des expressions orales 'décalées' et ne lisent jamais du Titeuf

Reste que ca ne fonctionne pas du tout en FF. Il y a donc un truc.
et le truc c'est que :

je n'avait pas mis de z-index ds les definitions de #teaser-top.

malgré la présence de seulement 2 blocs positionnés dans mon template (celui-là + l'évitement) visiblement FF le voyait dessous.
Modifié par elz64 (10 Nov 2007 - 09:31)