Aide - Recherche - Membres - Calendrier
Version complète : Couleur des liens / Dreamweaver
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
dumb_kangaroo
Bonjour,

J'essaye de faire varier la couleur des liens sur une page avec dreamweaver. J'ai parcouru quelques forums sur la question, qui m'ont fait comprendre qu'il fallait créer une feuille de style css puis la lier à ma page html. J'ai tenté tout seul, mais ça ne marche pas. Je suis graphiste et je décroche COMPLETEMENT dès que quelques lignes de code apparaissent...

Voici la page en travaux : http://www.010380.com/home_beta

J'aimerais que les liens du menu soient blanc et virent au gris quand on passe dessus, restent gris quand on est sur la page liée.
Et j'aimerais que les liens en bleu comme "privacy policy" par exemple, réagissent différemment...

J'ai créé ce css pour les liens blanc du menu :

@charset "utf-8";
/* CSS Document */

<style type="text/css">


#a {
text-decoration:none;
color:#FFFFFF;
}
#a:visited {
color:#FFFFFF;
}
#a:hover {
color:#666666;
}
#a:active {
color:#FFFFFF;
}
#a:focus {
color:#FFFFFF;
}

</style>


Je l'ai appelé lien_menu.css

Si j'ai bien compris je dois intégrer ce code : <link rel="stylesheet" href="lien_menu.css" type="text/css"> quelque part dans mon html. Mais je ne comprends pas où...
J'ai lu que c'est dans la balise <head> si on veut l'appliquer à toute la page mais j'ai pas saisi où je dois le foutre pour l'appliquer à un lien en particulier...

J'imagine que c'est hyper basique pour vous mais pour moi c'est genre big deal...Donc il faut vraiment me montrer concrètement ou je dois coller ce bazard smile.gif (et accessoirement checker si le css est correct...)

Merci pour votre aide.

DK
tazo
Bonjour,

La feuille de style (CSS) n'est pas un fichier HTML. De ce fait, il n'est pas nécessaire et c'est même une erreur de mettre les lignes "<style type="text/css">" et "</style>" dans ton fichier CSS.
En enlevant ces lignes, ton problème devrait être résolu.

Bon courage icon_wink.gif
tazo
Re-Bonjour, (je n'arrive pas à éditer mon message précédent)

De plus, le # précédant un nom correspond à un élément nommé avec un id.
Exemple :
HTML : <div id="header"></div>
CSS : #header { /* tes styles CSS */ }

HTML : <a href="#">Mon lien</a>
CSS : a { /* tes styles CSS */ }
a:hover { /* tes styles CSS */ }

Si tu veux que tes styles de liens ne soient que pour ton menu, tu peux faire en sorte que :
HTML : <div id="menu"><a href="#">Mon lien</a><a href="#">Mon lien 2</a><a href="#">Mon lien 3</a></div>
CSS : #menu a { /* tes styles CSS */ }
#menu a:hover { /* tes styles CSS */ }

Bon courage icon_wink.gif
dumb_kangaroo
Merci pour ton aide. J'ai corrigé ma feuille de style comme tu m'as indiqué.
Par contre, je ne sais toujours pas comment lier ce css avec un lien en particulier. J'ai rien compris à ton deuxième message smile.gif

dumb_kangaroo
En gros je voudrais savoir où exactement je dois coller <link rel="stylesheet" href="lien_menu.css" type="text/css">

dans ça :

<tr>
<td height="19" bgcolor="#103156"><table width="346" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30"><div align="center"></div></td>
<td width="54"><div align="center"><span class="Style9"><a href="home.html" target="&quot;blink&quot;">home</a></span></div></td>
<td width="76"><div align="center" class="Style9">
<div align="center">services</div>
</div></td>
<td width="94"><div align="center"><span class="Style9">about us</span></div></td>
<td width="92"><div align="center"><span class="Style9">contact us</span></div></td>
</tr>

???
tazo
Bonjour,

Il faut insérer la ligne
HTML
<link rel="stylesheet" href="lien_menu.css" type="text/css">

dans le <head> de ta page HTML.

Bon courage icon_wink.gif
dumb_kangaroo
Mais non, ça va agir sur tous les liens de ma page et c'est ce que je ne veux pas. je veux pouvoir agir différemment sur chaque lien de ma page...
icon_eek.gif
tazo
Bonjour,

Si tu veux que tes styles de liens ne soient que pour ton menu, tu peux faire en sorte que :

HTML :
<table id="menu">[...]<a href="#">Mon lien</a>[...]<a href="#">Mon lien 2</a>[...]<a href="#">Mon lien 3</a>[...]</table>

Fichier CSS inclus dans le <head> :
#menu a { /* tes styles CSS */ }
#menu a:hover { /* tes styles CSS */ }

Ainsi, les styles ne s'appliqueront que sur les liens contenus dans ton tableau nommé "menu" ("#" en CSS = "id" en HTML)
dumb_kangaroo
Ok j'ai compris. merci beaucoup pour ton aide.
wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2008 Invision Power Services, Inc.