28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème couleur liens du menu en include et site en général

Bonjour à tous,

j'ai un petit souci au niveau de la couleur de mes différents liens !
Mes liens dans le body sont différents des liens de mon menu.
Mon menu est construit avec un tableau sur une page externe que j'insère dans les pages du site en include.
Problème, la couleur des liens du menu sont celui de mon site en général alors que je veux que les liens du menu soient blancs.
Voici mon code CSS : 


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

body {
	background-image: url(images/background.jpg);
	background-repeat: repeat-x;
}
a:link {	color: #000000; }
a:visited {	color: #000000; }
a:hover {	color: #245ea5; }
a:active {	color: #000000; }

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#bg-header {
	background-image: url(images/header-background.png);
	background-repeat: no-repeat;
	height: 249px;
	width: 944px;
}
.bg-menu {
	background-image: url(images/menu-background.png);
	background-repeat: no-repeat;
	height: 443px;
	width: 215px;
}
#bg-body {
	background-image: url(images/body-background.png);
	background-repeat: no-repeat;
	height: 730px;
	width: 713px;
}
.bg-news {
	background-image: url(images/body/news.png);
	vertical-align:top;
	background-repeat: no-repeat;
	height: 273px;
	width: 223px;
}
.bg-mag {
	background-image: url(images/body/mag.png);
	background-repeat: no-repeat;
	vertical-align:top;
	height: 273px;
	width: 223px;
}
.bg-baby {
	background-image: url(images/body/baby2.png);
	background-repeat: no-repeat;
	vertical-align:top;
	height: 273px;
	width: 223px;
}
.bg-partenaires {
	background-color: #fffce5;
}
.header-txt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #a15b00;
}
#fil_ariane {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	
}
#fil_ariane_actif {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	font-weight: bold;
}
#bulle { position: absolute; visibility: hidden;  font-size:12px;}
.info{ border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"Arial";}
.tableau-horaires {
	background-color: #ffecc6
}
.tableau-mag {
	background-color: #ffdb92
}
h3{
display:inline;
}
h2{
	display:inline
}
.menu-rouge {
	background-image: url(http://www.***************/v2/images/menu/plus.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}

.menu-fushia {
	background-image: url(http://www.***************/v2/images/menu/mag.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
	
}
.menu-vertfluo {
	background-image: url(http://www.***************/v2/images/menu/catalogues.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-bleu {
	background-image: url(http://www.***************/v2/images/menu/baby.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-turquoise {
	background-image: url(http://www.***************/v2/images/menu/nouveautes.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-jaune {
	background-image: url(http://www.***************/v2/images/menu/coin.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-vertbouteille {
	background-image: url(http://www.***************/v2/images/menu/club.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-orange {
	background-image: url(http://www.***************/v2/images/menu/partenariats.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}
.menu-violet {
	background-image: url(http://www.***************/v2/images/menu/deveniraffilie.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#FFFFFF;
	font-variant: small-caps;
	background-repeat: no-repeat;
	height: 24px;
	width: 194px;
}


Auriez-vous une petite astuce svp ? J'ai beau recherché un peu partout je ne trouve pas Smiley decu
Merci d'avance Smiley smile
Modifié par Masure (12 Oct 2010 - 11:04)
Bonjour,

A quoi correspondent les liens du menu dans ta feuille de style ? On peut voir le code HTML généré ?

Ton fichier .css pourrait être optimisé, tu répètes des propriétés inutilement.
Bonjour ellm,

Les liens du menu dans mon CSS correspondent à l'image du fond des cellules de mon tableau.
voici le code HTML de mon menu : 

<link href="css-v2.css" rel="stylesheet" type="text/css" />
<table width="194" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td valign="bottom" class="menu-rouge"><img src="http://www.***************/v2/images/menu/plus.png" width="22" height="22" /> Les + </td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-fushia"><img src="http://www.***************/v2/images/menu/magasins2.png" width="22" height="22"  /> <a href="http://www.***************/v2/magasins-jouet.php">Les Mags</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-vertfluo"><img src="http://www.***************/v2/images/menu/catalogues2.png" width="22" height="22" /> <a href="http://www.***************/v2/catalogue-jouet.php">Les Catas</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-bleu"><img src="http://www.***************/v2/images/menu/baby2.png" width="22" height="22" /> <a href="http://www.***************/v2/puericulture.php">Baby</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-turquoise"><img src="http://www.***************/v2/images/menu/nouveautes2.png" width="22" height="22"> <a href="http://www.***************/v2/nouveaute-jouet-jeu.php">Les Nouveautés</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-jaune"><img src="http://www.***************/v2/images/menu/coindesenfants2.png" width="22" height="22"> <a href="http://www.***************/v2/jeux-gratuits-enfants.php">Le Coin des Enfants</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-vertbouteille"><img src="http://www.***************/v2/images/menu/club2.png" width="22" height="22"> <a href="http://www.***************/v2/clubs.php">Les Clubs</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-orange"><img src="http://www.***************/v2/images/menu/partenariats2.png" width="22" height="22"> <a href="http://www.***************/v2/partenariat.php">Partenariats</a></td>
  </tr>
  <tr>
    <td valign="bottom" class="menu-violet"><img src="http://www.***************/v2/images/menu/deveniraffilie2.png" width="22" height="22"> <a href="http://www.***************/v2/ouvrir.php">Devenir Affilié</a></td>
  </tr>
</table>
Aïe.

Je vois deux choses dérangeantes dans ton code :

- La balise <link> n'a rien à faire avant ta table. Elle devrait se trouver entre les balises <head> de ta page.
- Tu utilises une table pour faire ton menu, ce n'est pas le rôle d'une table. Pourquoi ne pas utiliser une liste non ordonnée (<ul>, <li>) ?

Pour ton problème, si tu veux conserver ce code, il suffit d'ajouter un identifiant sur ta table.

<table id="menu" width="194" border="0" cellspacing="3" cellpadding="0">

Ensuite, dans ta feuille de style, tu définis la couleur des liens qui appartiennent à cette table :

#menu a {
   color:#fff;
}
Ok j'ai viré la balise <link> qui ne servait effectivement à rien !
Concernant d'utiliser une liste non ordonnée, je vais y réfléchir et voir ça Smiley smile

En tout cas, maintenant, ça fonctionne bien le rendu est celui que je souhaitais, merci BEAUCOUP de ton aide ellm et à bientôt !
Sujet clos
Aller à