Style CSS, un deuxième a: et a:hover?

Résolu/Fermé

thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 - 1 juil. 2008 à 15:10
thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 - 7 juil. 2008 à 15:25

Bonjour,
J'aimerais savoir si c'est possible d'avoir deux style "a:" et "a:hover".
Explication:

J'ai un style a: qui dit que mon texte est en Verdana et blanc
Un style a:hover qui dit que mon texte doit passé à une autre couleur

J'ai un menu en haut de ma page sur fond rouge dans lequel sont mes liens. Donc il sont tout a fait lisible
Seulement le problème est que quand je fais un lien dans mes pages, qui sont sur fond blanc, on ne voit plus le lien. Logique ^^
Y a-t-il donc un moyen de gérer deux style de liens, si oui comment faire et comment appliquer un certain style à un lien au choix??
Je précise que je travaille avec Dreamweaver CS3, si quelqu'un pouvait m'indiquer la marche à suivre dans ce logiciel pour faire ce qui est demandé, sa serait sympa ;)

Cordialement,
Jeremy

A voir également:

Style CSS, un deuxième a: et a:hover?
Style word - Guide
Deuxieme ecran pc - Guide
Créer un deuxième compte facebook - Guide
Créer un deuxième compte instagram - Guide
Utiliser tablette comme deuxieme ecran - Guide

3 réponses

Réponse 1 / 3

Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
1 juil. 2008 à 15:18

Bonjour,
tu peux préciser les styles à l'intérieur de chaque div.

Par exemple si tu as une <div id="menu">

alors tu peux créer le style menu.a et menu.a:hover
idem pour les autres div

thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 2
1 juil. 2008 à 15:46

ok... seulement voila je suis pas un spécialiste en code, je suis plutôt infographiste :p
Alors explique moi plus précisement si tu veux bien:

- comment je définis le "div id" sur un tableau par exemple (a quoi doit ressembler le code), pour que tout les liens contenu dans ce tableau soit affecté par le nouveau style mais pas le reste de la page donc.

- dans ma feuille de style à quoi ressemble le code de ce "div id"
est-ce tout simplement (en prenant comme div id: menu):

.menu.a {
font-family:
color:
font-size:
}

en tout cas merci de m'avoir déjà mis sur la piste ^^

Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545 > thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014
1 juil. 2008 à 15:49

Ta page est en ligne ? ou alors tu peux mettre un bout de son code ? je te donnerai alors un exemple pour ta page.

Réponse 2 / 3

thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 2
1 juil. 2008 à 16:05

Alors voici mon menu:

<table width="100%" border="0" cellpadding="0" cellspacing="0" background="../images/bandeau.png">
      <tr>
        <td height="30">&nbsp;</td>
        <td width="769" height="30" class="Style2"><div align="center" class="Menu"><a href="../pages/accueil.html">ACCUEIL</a>   |   <a href="../pages/atelier.html">ATELIER</a>   |   <a href="../pages/jcp.html">JEAN-CLAUDE PIEROT</a>   |   <a href="../pages/echos.html">PAROLES</a>   |   <a href="../pages/news.html">NEWS</a>   |   <a href="../pages/infos.html">INFOS</a>   |   <a href="../pages/contact.html">CONTACT</a>   |   <a href="../pages/pda.html">PLAN D'ACCES</a> </div></td>
        <td height="30">&nbsp;</td>
      </tr>
    </table>

Dans cette partie il me faut un style de lien (blanc et hover qui sont déjà configuré comme suit)

a:link, a:visited {
	color:#FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #fccb67;
	text-decoration:none;
	background-color: a6423e;

Maintenant j'aimerai que dans le tableau suivant j'ai un autre style de lien

          <table width="666" border="0" align="center">
          <tr>
            <td width="660" class="text"><!-- TemplateBeginEditable name="texte" --><!-- TemplateEndEditable --></td>
          </tr>
        </table>

Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
1 juil. 2008 à 16:32

En fait si tu veux réutiliser plusieurs le même style par la suite dans différentes Table, tu peux faire aisni :

<table class="menu" width="100%" border="0" cellpadding="0" cellspacing="0" background="../images/bandeau.png">

et ensuite créer un style

menu.a:link, menu.a:visited {
	color:#FFFFFF;
	text-decoration: none;
}

de même pour l'autre tableau :

<table class="autreTableau" width="666" border="0" align="center">

l'avantage de créer une classe est que tu peux l'appliquer à plusieurs tableaux à la fois

thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 2 > Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010
1 juil. 2008 à 16:37

ok ok je vais essayer ça :)
Merci beaucoup

Réponse 3 / 3

thejameskiller Messages postés 22 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 avril 2014 2
1 juil. 2008 à 16:47

Bon je ne comprends pas :S

Alors voila peux tu m'indiquer exactement à quoi doit ressembler la page plus bas et la feuille de style...
Il y a deux tableau, dans le premier j'aimerai que le texte reste noir mais que les liens soit blanc (c'est un exemple pas besoin des valeurs de couleurs) et dans le deuxième cadre j'ai toujours mon texte en noir mais faut que mon lien soit d'une couleur différente. Et toujours avec un roll over

<body>
<table width="200" border="1">
  <tr>
    <td><p>Ceci est du texte</p>
    <p><a href="#">Et ici c'est un lien</a></p></td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="200" border="1">
  <tr>
    <td><p>Ceci est du texte</p>
    <p><a href="#">Et ici c'est un lien</a></p></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

J'espère que ça t'ennuie pas :)

Encore merci

Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
1 juil. 2008 à 20:35

Salut,
j'avais effectivement fait des imprécisions dans mes explications...
J'avais pas fait de css depuis quelques temps.
Voilà le code qui fonctionne. Le problème de syntaxe était au niveau de la déclaration des styles.

<html>

<style>

.menu a {
	color:#000000;
	text-decoration: none;
}

.menu a:hover {
	color:#FFFFFF;
	text-decoration: none;
}

.contenu a {
	color:#000000;
	text-decoration: none;
}

.contenu a:hover {
	color:#FF33FF;
	text-decoration: none;
}

</style>


<body>
<table class="menu" width="200" border="1">
  <tr>
    <td><p>Ceci est du texte</p>
    <p><a href="#">Et ici c'est un lien</a></p></td>
  </tr>
</table>
<p>&nbsp;</p>
<table class="contenu" width="200" border="1">
  <tr>
    <td><p>Ceci est du texte</p>
    <p><a href="#">Et ici c'est un lien</a></p></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>

Parfait!
Ca fonctionne :)
Merci beaucoup d'avoir pris le temps de m'expliquer un peu le CSS, je sens que ça va m'être très utile.
PS: désolé pour le retard dans ma réponse, mais j'étais au Japan Expo toute la semaine ^^

Discussions similaires

créer un 2è compte sur le bon coin

Comment avoir deux comptes Leboncoin, un seul téléphone...?