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

Résolu

thejameskiller Messages postés 22 Date d'inscription Statut Membre Dernière intervention -
thejameskiller Messages postés 22 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

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

3 réponses

Réponse 1 / 3

Darkito Messages postés 1191 Date d'inscription Statut Membre Dernière intervention 545

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 545 > thejameskiller Messages postés 22 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 545

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 Statut Membre Dernière intervention 2 > Darkito Messages postés 1191 Date d'inscription Statut Membre Dernière intervention

ok ok je vais essayer ça :)
Merci beaucoup

Réponse 3 / 3

thejameskiller Messages postés 22 Date d'inscription Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 545

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>

thejameskiller Messages postés 22 Date d'inscription Statut Membre Dernière intervention 2 > Darkito Messages postés 1191 Date d'inscription Statut Membre Dernière intervention

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

J'ai 2 comptes le bon coin avec le meme numéro de téléphone.

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

Votre réponse

Discussions similaires