[CSS] Formatage de liens de différents styles

[Nerva]

Bonjour.

Le style des liens de mon site est formaté ainsi :

Code: Tout sélectionner

a:link,a:active,a:visited
{
text-decoration: none;
color: #EE0033;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}

Cependant, en bas de chaque page, figure un lien de retour direct au menu que je voudrais différent en taille et en couleur.
J'ai donc ajouté ceci :

Code: Tout sélectionner

.retour_menu a
{
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
font-family: Arial;
}

Mais ça ne fonctionne pas ; le style affiché est le général.
Merci d'un coup de main...

[FloBaoti]

!important

Code: Tout sélectionner

.retour_menu a
{
text-decoration: none !important;
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: bold !important;
font-family: Arial !important;
}

[SpeedAirMan]

Bonjour.

Le style des liens de mon site est formaté ainsi :

Code: Tout sélectionner

a:link,a:active,a:visited
{
text-decoration: none;
color: #EE0033;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}

Cependant, en bas de chaque page, figure un lien de retour direct au menu que je voudrais différent en taille et en couleur.
J'ai donc ajouté ceci :

Code: Tout sélectionner

.retour_menu a
{
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
font-family: Arial;
}

Mais ça ne fonctionne pas ; le style affiché est le général.
Merci d'un coup de main...

Bonjour,

prends soin également de mettre le deuxième style ( .retour_menu a ) après le premier dans ton style.css .

Enfin, utilise les mêmes balises : .retour a:link (comme tu as fait pour le premier)
ça devrait fonctionner.

[Dan_A]

L'ordre d'apparition des déclarations doit être :
a:link
a:visited
a:hover
a:active
et la classe ou l'identité doit précéder chaque redéclaration

[Nerva]

Merci bien, ça fonctionne. En fait, même avec un "a" tout court ça fonctionne à moitié (pour le "hover", il prend le formatage définit globalement) mais j'avais mal paramétré ma balise : "id" à la place de "class".

[Nerva]

Ah, c'était trop beau, il y a le second problème à résoudre.

Voici le style de l'image de bas de page :

Code: Tout sélectionner

#bottom
{
margin-left: 20px;
width: 640px;
height: 50px;
background: url(images/logo_bottom.jpg);
clear: both;
}

Et le style du texte à incorporer dedans :

.retour a:link, a:visited, a:hover, a:active
{
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
font-family: Arial;
}

Et voici le code HTML :

Code: Tout sélectionner

<div id="bottom">
   <div class="retour"><a href="home.php">Retour au menu</a></div>
</div>

Comment centrer le texte verticalement dans l'image ? J'ai essayé avec un "padding" dans "retour", ça ne marche pas.

[webmasterlamogere]

j'utilse un truc comme ca pour centrer :

Code: Tout sélectionner

   background-position:0% 50%;

[Nerva]

Non, ça ne fonctionne pas... Pour l'instant, ça marche avec un "margin-top" mais ça ne doit pas être la méthode académique...

[Dan_A]

.retour a:link,.retour a:visited,.retour a:hover,.retour a:active
line-height:50px; dans #bottom, peut-être

[nickargall]

text-align:center
?

[Nerva]

Ah j'ai encore parlé trop vite ! Ca marche avec un margin left ou right mais pas avec un top ou un bottom.

Oui, un align-center pour le centrage horizontal mais c'est le vertical qui me pose problème.

[Dan_A]

As-tu essayé
line-height:50px; dans #bottom
et corrigé les déclarations pour les liens ?

[webmasterlamogere]

autant pour moi, c'est pour centrer l'image pas le texte.
Je pense qu'il faut définir une hauteur pour le texte égale à la hauteur de l'image déjà.

Il me semble aussi qu'il y a une erreur. il faut répéter ".retour" :

Code: Tout sélectionner

.retour a:link, .retour a:visited, .retour a:hover, .retour a:active

edit: grillé

[pcamliti]

J'ai le même souci avec un texte latéral à une image, sans que l'image soit en background.

Si vous avez la solution, je suis preneur aussi.

Vous faites une class pour l'image ?

[SpeedAirMan]

J'utilise

Code: Tout sélectionner

#conteneur
{
   position: absolute;
   margin-top: -200px;
   top: 50%;
   height: 400px;
}

... et ça marche bien.
Je ne suis pas sûr que "position:absolute;" soit nécessaire.

Edit : explications : on spécifie une hauteur et on précise que l'élément (texte ou image) doit être centré au milieu.