Liens non soulignés

Question

corambe

6 Mar 2008 à 19:11

Bonjour,

J'avais fait une première version de mon site tout en html, et ça ne fait vraiment pas pro, puis les différences de rendu selon les navigateurs sont trop énormes, j'ai donc décidé de me mettre au css.

Ca date de cette aprèm, donc ne soyez pas trop sévères, svp... Smiley ohwell

Je ne veux pas avoir mes liens soulignés, donc j'ai mis dans la partie <style> les petites choses pour pas les avoir, à part quand on passe la souris dessus. Au début ça a marché, mais maintenant ça ne marche plus, ni ça, ni le fait que cela soit un autre fond quand je passe dessus, ce que j'ai pourtant l'impression de demander. Par contre je demande que la couleur de la police change quand je passe dessus et ça il le fait !
J'ai cherché les sujets (nombreux!) qui traitent de ce problème, mais pour la plupart cela s'est résolu avec les mêmes codes que ceux que j'ai mis.

Donc j'imagine qu'il y a une raison, mais après plusieurs heures d'apprentissage css, je ne dois plus avoir les idées très claires, en tout cas je ne trouve pas ce qui foire. Donc je vous copie le code concerné, et vous met le lien de la page.

<style type="text/css" title="randos" media="all">

</style>

C'est la page : http://www.corambe.com/menurandosbis.html

D'avance merci !

6l20

6 Mar 2008 à 21:39

Bonsoir corambe,

A priori l'état des liens est conforme à ce que tu as défini (IE6,IE7,Firefox et Opéra) Smiley cligne

As-tu pensé à vider le cache de ton navigateur ?

a écrit :

Donc j'imagine qu'il y a une raison, mais après plusieurs heures d'apprentissage css, je ne dois plus avoir les idées très claires

C'est possible Smiley smile

Demain est un autre jour, et te permettra de retrouver la vue Smiley cligne

Prends cela comme un jeu, essaies de suivre les tutoriels (tu en trouveras ici et là et sur le net bien évidemment ) regardes comment cela fonctionne, fait des modifs, trompes-toi et recommences.
Penses à visualiser ton site, tes essais, sur différents navigateurs cela te permettra de savoir rapidemment si tu as merdouillé quelque part...

Le reste viendra ensuite "tout naturellement" Smiley cligne

Bonne continuation dans cet intéressant apprentissage Smiley cligne

muby

6 Mar 2008 à 22:04

Personnellement quand je développe j'utilise :

http://joliclic.free.fr/mozilla/webdeveloper/

ce petit plugin bien pratique pour Firefox (couplé à firebug) dans lequel tu peux désactiver le cache, c'est très utile car ça doit etre juste une histoire de cache ou un truc dans le genre comme la si bien dis 6l20.

un petit raccourci pratique pour FF : ctrl+r (permet d'actualiser la page en vidant le cache) (jsuis pas certains de cela, mais ca marche souvent pour moi Smiley langue

)

Bonne continuation

fvsch

6 Mar 2008 à 22:48

Il y a Ctrl+F5 qui permet d'actualiser la page en ignorant le cache avec la plupart des navigateurs, sous Windows et Linux du moins.

corambe

7 Mar 2008 à 21:54

Merci, bon ben en fait maintenant ça s'affiche comme je veux.

Par contre j'ai un nouveau problème.

J'ai un site pour deux activités, donc chaque partie du site a ses propres codes graphiques (enfin c'est un bien grand mot...).
Donc j'ai divisé l'index en boîtes css, l'une d'entre elle présente une partie du site, et a ses codes et pareil pour l'autre.

J'ai donc mis deux classes différentes ("thérapies" et "randos"), et j'utilise chacune dans la boîte correspondante.

La page en question est : http://www.corambe.com

Voici le code de la partie 'head' :

  <style type="text/css" title="randos" media="all">
<!--
body { margin: 20px; font-size: large; line-height: 150%; margin-top: 0px;
margin-left: 120px;
margin-right: 120px;
background-color: #CCFF99;}
p {text-indent: 1em}
h2 { color: FFCC00; font-family: Garamond, Palatino, Serif}
.thérapies:link { text-decoration: none; color: #007000; }
.thérapies:hover { text-decoration: underline; background-color: transparent; color: #000000; }
.randos:link { text-decoration: none; color: #FFCC00; }
.randos:hover { text-decoration: underline; color: #000000; }
#haut { position: relative;
background-color: #000000;
width: 99%; height: 250px; color: #FFFFFF; border-color: #000000; border-width: 5px; border-style: groove; }
#thérapies { position: relative; width: 48%; padding: 5px; height: 70%; background-color: #FFFFCC; float:left; text-decoration: none; color: #007000; font-family: Tahoma; border-color: #000000; border-width: 5px; border-style: groove; }
#randos { background-color: #007000;
position: relative;
padding: 5px;
width: 48%; height: 70%;
color: #FFFFCC; font-family: Garamond, Serif;
float: right; border-color: #000000; border-width: 5px; border-style: groove; }
-->
  </style>

Et celui que j'ai mis dans les boîtes :


<div id="th&eacute;rapies"><big>
<br>
<a class="th&eacute;rapies"
 href="http://www.corambe.com/menutherapies.html">Fleurs
de Bach,
Th&eacute;rapie avec les chevaux,...</a><br>
<br>
<a class="th&eacute;rapies"
 href="http://www.corambe.com/menutherapies.html"></a></big><a
 class="th&eacute;rapies"
 href="http://www.corambe.com/menutherapies.html"><img
 style="width: 161px; height: 106px;"
 src="http://www.corambe.com/images/logobis.jpg"></a><br>
<i><br>
<a class="th&eacute;rapies"
 href="http://www.corambe.com/menutherapies.html"><u>Pr&eacute;sentation
des activit&eacute;s th&eacute;rapeutiques :</u>
<br>
Fleurs de Bach,
Th&eacute;rapie avec les chevaux, <br>
Communication
intuitive animale, <br>
Utilisation des
fleurs de Bach pour
les animaux</a></i></div>
<div id="randos">
<span style="font-weight: bold;"><big><br>
<a class="randos"
 href="http://www.corambe.com/menurandos.html">Randonn&eacute;es
&agrave; cheval</a></big><br>
<br>
</span><a class="randos"
 href="http://www.corambe.com/menurandos.html"><img
 style="width: 204px; height: 152px;"
 src="http://www.corambe.com/images/mercirando.jpg"></a><br>
<br>
<span style="font-style: italic;"><a class="randos"
 href="http://www.corambe.com/menurandos.html"><big>Promenades
et
randonn&eacute;es &agrave; cheval autour de
Malauc&egrave;ne,<br>
&agrave;
proximit&eacute; du Mont Ventoux et des Dentelles de Montmirail
</big></a></span><br>
</div>
</div>

Merci...

corambe

7 Mar 2008 à 21:56

Je précise juste pourquoi je dis que ça marche pas : normalement je veux que ce ne soit pas souligné, à part quand on passe la souris dessus, et pour la partie thérapies, je voulais une couleur verte et une couleur jaune pour la partie randos.

fvsch

7 Mar 2008 à 22:33

Bonjour,

Erreur dans le code HTML:

a écrit :
line 56 column 1 - Avertissement: <div> attribute "id" has invalid value "thérapies"

Il ne faut pas utiliser les entités caractères telles que é dans les valeurs des attributs id ou class. Tu peux à la rigueur utiliser des caractères accentués, mais dans ce cas il ne faut pas les «encoder» sous la forme d'entités caractères.
Donc:

<div id="th&eacute;rapies"></div>    <!-- PAS BIEN -->
<div id="thérapies"></div>           <!-- OK, mais peut être problématique -->
<div id="therapies"></div>           <!-- OK, et plus simple à gérer -->

Conseil: utiliser uniquement des caractères latins non accentués uniquement pour les sélecteurs CSS (et donc pour les attributs id et class côté HTML.

corambe

7 Mar 2008 à 23:48

ok merci, c'est vrai que c'était pas très malin de ma part.

mais ça ne marche toujours pas...

corambe

8 Mar 2008 à 09:37

Donc j'ai mis id="therapies" et class="therapie", pareil pour l'autre, j'ai mis: id="randos" et class="rando"

Ce matin au réveil je me suis dit aussi que c'était peut être parce que j'avais pas précisé le 'visited', donc j'ai rajouté ça, ce qui donne:



   1. .therapie:link { text-decoration: none; color: #007000; }
   2. .therapie:visited { text-decoration: none; color: #007000; }
   3. .therapie:hover { text-decoration: underline; background-color: transparent; color: #000000; }
   4. .rando:link { text-decoration: none; color: #FFCC00; }
   5. .rando:link { text-decoration: none; color: #FFCC00; }
   6. .rando:hover { text-decoration: underline; color: #000000; }

Et maintenant ça marche avec l'un (thérapie), mais pas avec l'autre (rando), qui lui n'est pas de la bonne couleur et reste souligné.

......

Shunkin

8 Mar 2008 à 09:42

corambe a écrit :

Et maintenant ça marche avec l'un (thérapie), mais pas avec l'autre (rando), qui lui n'est pas de la bonne couleur et reste souligné.

......

D'après ton code, essayes "randos" au lieu de "rando".

Heyoan

8 Mar 2008 à 11:30

corambe a écrit :
   4. .rando:link { text-decoration: none; color: #FFCC00; }
   5. .rando:link { text-decoration: none; color: #FFCC00; }
   6. .rando:hover { text-decoration: underline; color: #000000; }
Et maintenant ça marche avec l'un (thérapie), mais pas avec l'autre (rando), qui lui n'est pas de la bonne couleur et reste souligné.

......

Et accessoirement, renseigner le .randos:visited plutôt que 2 fois le .randos:link Smiley cligne

.

corambe

8 Mar 2008 à 16:47

ah ben oui, c'était ça... un peu étourdie...

merci beaucoup à tous

Sujet clos

CSS et mise en forme, CSS3

Liens non soulignés