[CSS] Formatage de liens de différents styles

[Nerva]

Bonjour.

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

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 :

.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

.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 :

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 :

.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. :wink:

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

#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 :

<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 :

	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... :wink:

 

[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" :

.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

#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.

 

[Florent V.]

Hé bé, c'est laborieux.

Je conseille une petite simplification. Plutôt que d'écrire:

a:link,a:active,a:visited {...}

On écrira plutôt:

a {
	text-decoration: none;
	color: #e03;
	font-weight: bold;
	/* font-size: 12px;
	font-family: Arial; */
}

Je commente la taille de texte et la fonte (on pourra les virer tout court) car il est souvent préférable que le style du lien s'adapte un minimum au texte environnant. Un lien en Arial 12px au milieu d'une citation en Times 15px, ça serait dommage...

Ensuite, pour le code du pied de page:

HTML:
<div id="bottom">
	<p><a href="home.php">Retour au menu</a></p>
</div>

CSS:
div#bottom {
	margin-left: 20px;
	width: 640px; /* à voir si vraiment utile ici */
	height: 50px;
	background: url(images/logo_bottom.jpg);
	clear: both; 
}
div#bottom p {
	margin: 0;
	padding: 20px 0 0 0;
}
div#bottom a {
	color: white;
	font-size: 16px;
}

Voilà, on devrait y être.

 

[Nerva]

SpeedAirMan
Ca ne fonctionne ni dans le container ni dans le texte.

Dan
Marche pas non plus...

 

[Dan_A]

Chez moi, ça marche, et avec tous les navigateurs.
Si la page est en ligne, il vaut mieux donner l'adresse de celle-ci.
Ceci dit, il faut souvent apprendre à marcher avant de vouloir courir.

 

[Nerva]

Dan
Non, la page n'est pas en ligne.

Florent
Ca fonctionne.

Merci... :wink:

 

[Nerva]

Techniquement ça fonctionne très bien mais esthétiquement ce n'est pas le pied ; un lien en caractères bruts sur un joli logo, c'est vraiment pas beau, rien à voir avec un texte inséré dans l'image avec logiciel photo.

Alors, y a-t-il moyen de rendre un image cliquable quand elle est contenue dans le CSS ou faut-il obligatoirement la placer dans le HTML ?

 

[dop20vt]

Tu gardes ton image en background et tu rajoutes display: block; dans ton css et tu renseigne également width et height !!

 

[Nerva]

Alors j'ai mis ça :

#top
{
margin-left: 20px;
width: 640px;
height: 260px;
background: url(images/logo_top.jpg);
display: block;
}

Et ça :

<div id="top"><a href="home.php"></a></div>

Ca ne clique pas. Je suppose qu'il y a autre chose à paramétrer ?

 

[UsagiYojimbo]

Oui si tu veux faire ca, il va te falloir forcer en css la width et la height de ton lien également.

 

[Dan_A]

Sans l'ensemble du code, difficile à dire.
display:block; est inutile dans #top, par contre il l'est dans #top a

 

[Victor BRITO]

Oui si tu veux faire ca, il va te falloir forcer en css la width et la height de ton lien également.

A étant un élément en ligne, on ne peut pas lui attribuer de largeur ni de hauteur, à moins de recourir à display: block.

La meilleure solution est de combler le vide de cet élément, pour qu'il soit repéré comme cliquable par n'importe quel utilisateur.

 

[UsagiYojimbo]

Oui si tu veux faire ca, il va te falloir forcer en css la width et la height de ton lien également.

A étant un élément en ligne, on ne peut pas lui attribuer de largeur ni de hauteur, à moins de recourir à display: block.

La meilleure solution est de combler le vide de cet élément, pour qu'il soit repéré comme cliquable par n'importe quel utilisateur.

Oui j'avais oublié de préciser que pour ce faire il faut mettre la balise a en display:block (ce qui est certes fonctionnel mais pas très propre au final).

 

[dop20vt]

#top a
{
margin-left: 20px;
width: 640px;
height: 260px;
background: url(images/logo_top.jpg);
display: block;
}

"#top a" sinon tes paramètres ne s'appliquent qu'au div hors c'est le lien qui doit posséder ces paramètres.