[CSS] Formatage de liens de différents styles

[Florent V.]

Hé bé, c'est laborieux.

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

Code: Tout sélectionner

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

On écrira plutôt:

Code: Tout sélectionner

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:

Code: Tout sélectionner

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

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

Code: Tout sélectionner

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

Et ça :

Code: Tout sélectionner

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

Code: Tout sélectionner

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