[résolu] Ne pas appliquer la mise en forme des liens aux ancres ?

Bonjour à tous

J'ai un petit souci que je n'arrive pas à résoudre toute seule.

Pour une page particulièrement longue d'un site d'un client, j'ai créé des ancres avec une sorte de sommaire pour que le visiteur puisse accéder plus rapidement à certains contenus.
J'ai donc 4 ancres de type a name="toto" dans mes balises h3 dont voici le code :

<div id="page"> 
	<div id="col_left">       
					
								
		<p>
		<a href="#vision">&gt;&gt; Vision des Forschungsprojektes</a><br />
		<a href="#plattform">&gt;&gt; KEHL Plattform Fokus</a><br />
		<a href="#4punkte">&gt;&gt; F&uuml;r dieses Problem wird die KEHL-Plattform L&ouml;sung auf 4 Punkte die Sch&auml;rfe einstellen</a><br />
		<a href="#losungbeschreibung">&gt;&gt; KEHL Plattform L&ouml;sung Beschreibung</a>
		</p>

		<h3><a name="vision">Vision des Forschungsprojektes</a></h3>
		<!-- je vous fait grâce du contenu ^^ -->
		<h3><a name="plattform">KEHL Plattform Fokus</a></h3>
		<h3><a name="4punkte">F&uuml;r dieses Problem wird die KEHL-Plattform L&ouml;sung auf 4 Punkte die Sch&auml;rfe einstellen</a></h3>
		<h3><a name="losungbeschreibung">KEHL Plattform L&ouml;sung Beschreibung</a></h3>
		
	</div>
</div>

Mon souci : au survol, ces h3 se comportent du coup comme les autres liens de mon site. J'ai peur de perdre l'utilisateur, même si le curseur de la souris ne devient pas un pointer au survol, c'est assez troublant je trouve. Voici le code css qui met en forme les liens d'une manière générale dans ma page :

/**** Page liens **/ 
	#page #col_left a:link{
	color:#6d9540;
	border-bottom: 1px solid #6d9540;
	text-decoration:none;
	}
	#page #col_left a:visited{
	color:#6d9540;
	text-decoration:none;
	border-bottom: 1px solid #6d9540;
	}
	#page #col_left a:hover{
	color:#525252;
	border-bottom: 2px solid #4a7918;
	text-decoration:none;
	}
	#page #col_left a:active{
	position: relative;
	top: 1px;	
	}

Je ne m'explique pas pourquoi le h3 garde son apparence normal, et me fait un remix dès qu'il est survolé. Si j'enlève la mise en page des liens, aucun souci les h3 ne sont pas touchés.

Ma question : existe-t-il un moyen de mettre en forme en css uniquement les liens avec des ancres, ou un moyen de lui dire "appliques ça pour tous les liens sauf les ancres" ? Le but étant vous l'aurez compris, que mes ancres soient "invisibles" à l'œil de l'utilisateur, que mes h3 même si ils ont une ancre gardent leur apparence de h3

Merci à vous
Modifié par saiko_sama (14 Jun 2010 - 13:08)

Bonjour,

Le moyen :
En utilisant des id sur les h3 au lien de balise de liens sans attributs href .

l'exemple :

<div id="page">  
    <div id="col_left">        
                     
                                 
        <p> 
        <a href="#vision">&gt;&gt; Vision des Forschungsprojektes</a><br /> 
        <a href="#plattform">&gt;&gt; KEHL Plattform Fokus</a><br /> 
        <a href="#punkte">&gt;&gt; F&uuml;r dieses Problem wird die KEHL-Plattform L&ouml;sung auf 4 Punkte die Sch&auml;rfe einstellen</a><br /> 
        <a href="#losungbeschreibung">&gt;&gt; KEHL Plattform L&ouml;sung Beschreibung</a> 
        </p> 
 
        <h3 id="vision">Vision des Forschungsprojektes</h3> 
        <!-- je vous fait grâce du contenu ^^ --> 
        <h3 id="plattform">KEHL Plattform Fokus</h3> 
        <h3 id="punkte">F&uuml;r dieses Problem wird die KEHL-Plattform L&ouml;sung auf 4 Punkte die Sch&auml;rfe einstellen</h3> 
        <h3 id="losungbeschreibung">KEHL Plattform L&ouml;sung Beschreibung</h3> 
         
    </div> 
</div> 

(éviter les chiffres comme première lettre de "class" ou d' "id" )

GC

Salut,

Comme les liens vers les ancres commencent par #, avec ça :

a[href^="#"] {color: blue}

Toutes tes ancres seront en bleu.

le href^="#" signifie le lien doit commencer par #

Ou sinon, dans ton exemple, tu vises plus précisement les a avec

#page #col_left p a:link

au lieu de

#page #col_left a:link

Mais sinon, je dis comme gc-nomade
Modifié par baubbelayponge (14 Jun 2010 - 11:07)

Salut,

Un peu de lecture sur cette page, et tu verras que la solution est encore plus simple que tu crois : Comment faire un lien vers un endroit précis de la page (ancre) ?

re,

le lien de Mikachu te propose en fait te propose de garder ta balise a dans les h3 pour y ajouter la possibilité (en rendant cette balise utile) d'y mettre un lien de retour 'haut de page' , (et accessoirement donne un lien de plus a google ).

Pour les styles , il te faudra alors faire un 'reset' avec ta regle qui style tes h3 avec :

#page #col_left h3 /* les h3 */, #page #col_left h3 a:pseudo-class

GC

Bonjour à tous, merci de vos réponses

j'ai testé plusieurs trucs du coup

- pour les id à dans les h3 de gc-nomade, celà fonctionne sous IE7 et opera, mais pas sous firefox, safari et chrome (windows), joie ^^

- le a[href^="#"] {color: blue} de Xulu ne fonctionne pas

- l'idée de baubbelayponge de viser le p fonctionne très bien, c'est celle que j'ai mise en place pour le moment sur le site.

- pour Mikachu j'avais lu l'article de Raphael avant de poster, mais c'est vrai que je n'avais pas pensé à mettre des liens retour en haut sur les h3, car le contenu ce certains ne fait que 3 lignes (c'est surtout le premier qui est très long). L'idée est à retenir, effectivement, je vais tester ça sur la page. Le seul petit "bémol" c'est que le site est sous un cms propriétaire avec une vieille version de fckeditor, c'est lui qui va générer les ancres une fois que le client reprendra le site en main, à voir d'ici là du coup.

- pour les reset sur les h3 je ne suis pas sûre d'avoir tout compris mais je vais tenter le coup. Mais comme je ne peux pas prévoir à l'avance si l'ancre sera sur un h3 ou un h6 je vais m'amuser à les faire pour tous les titres je pense (et puis les p tant qu'à faire ^^ )

en tout cas merci pour les réponses je vous tiens au courant

Et voilà j'ai opté pour le lien retour en haut de page, avec une mise en page plus discrète sur les h3

Encore merci à tous et toutes