Ecrire sur un background

Bonjour,
j'ai appris à créer ma page web sur votre site en suivant pas mal de tutos, et je n'ai pas trouvé la réponse à mon problème.

Je souhaite pouvoir mettre derrière un lien texte une image en background, étant prof cela me permettrait d'avoir toujours le même logo pour mes cours et de pouvoir simplement mettre par dessus le titre du chapitre.
Avec le code css que j'ai écrit mon image de fond se place correctement si je ne mets pas de texte entre les balises <a></a> ici mais se décale si j'en mets un là.

Voici le code html dans le body
<div>
<h3>Cohésion de la matière</h3>
<a class="cours" href="" title="" target="_blank">texte à insérer</a>
<a href="" title="Electrisation" target="_blank"><img src="flash.png"></a>
</div>

et le CSS
.cours {
display: inline-block;
font-size:14px;
width:100px;
height:48px;
background:url(page.png) no-repeat 0px 0px;
text-align:center;
}

Avez-vous une piste ? Problème de positionnement ?
En vous remerciant par avance et encore bravo pour ce site !
Modifié par lemeen (18 Jan 2012 - 23:17)

Salut,
Je te conseillerai de mettre ton image en fond de ton lien.
Je veux dire par là, de le faire en css avec la propriété background-image.

Cela t'éviterai de devoir jouer avec deux <a> distinct et de t'embêter avec le positionnement.

A mon avis, suite à la mise en background de ton image tu seras certainement amené à aller faire un tour vers la propriété line-height

Merci Fahrenheit,
ça commençait à chauffer dans ma petite tête.

a écrit :
Cela t'éviterai de devoir jouer avec deux <a> distinct et de t'embêter avec le positionnement.

Je propose aux élèves différents types de ressources (web, logiciels, documents...) et donc je veux mettre en arrière plan différentes images de fond.
Il me semble que je suis donc "obligé" de mettre deux <a> successifs.
Voilà ce que je fais, si cela peut vous éclairer... site

a écrit :
Je te conseillerai de mettre ton image en fond de ton lien.
Je veux dire par là, de le faire en css avec la propriété background-image.
A mon avis, suite à la mise en background de ton image tu seras certainement amené à aller faire un tour vers la propriété line-height

C'est ce que j'essaye de faire, je suis en train de faire des essais avec line-height mais pas très concluants... j'insiste à moins qu'une autre idée me soit soumise.

Merci en tout cas, ma recherche de solution continue.
Modifié par lemeen (19 Jan 2012 - 13:44)

(Je vais vous vouvoyer puisque vous me vouvoyer)

Dans le cas de background différents il y a la solution des "class".
En utilisant des class sur des éléments vous pourrez ensuite appliquer un style spécialement conçus pour pour chacun d'eux et ne changer que le texte en html.

Un exemple de l'utilisation de la class :

l'html :

<a href="#" class="mapremiereclass"> mon texte 1 </a>

<a href="#" class="masecondeclass"> mon texte 2 </a>
 
<a href="#" class="mapremiereclass"> mon texte 3 </a>

le css :

.mapremiereclass
{
    background:url(images/mapremiereimage.jpg) no-repeat;
}

.masecondeclass
{
    background:url(images/masecondeimage.jpg) no-repeat;
}

En sachant que la class (contrairement à l'id) est réutilisable sur plusieurs éléments vous gagnerez du temps (et moins d'embêtement) en l'utilisant puisque vous pourrez en css déclarer des styles différents en fonction des class (que vous en ayez deux, trois, quatre, cinq, etc) et ensuite tout simplement les appliquer dans l'html comme démontré dans mon exemple.

J'espère avoir été clair dans mon explication. Si ce n'est pas le cas n'hésitez pas à me le faire savoir



Edit (erreur de ma part sur line-height, je rectifie):
Pour ce qui est du line-height, il faut savoir que c'est une propriété assez particulière d'utilisation, très pratique pour centrer du texte.
Par exemple, si ma balise <a> fait 80px de hauteur et que je veux centrer le texte de cette balise alors je devrais lui appliquer un line-height:80px; (et un text-align:center; par la même occasion mais là n'est pas la questions).

En gros, si votre image de fichier fait 40px de hauteur et que vous voulez centrer le texte par rapport à cette image (au préalable mise en fond) alors il faudra appliquer un line-height:40px; .
Modifié par Fahrenheit (19 Jan 2012 - 14:36)

On va donc se tutoyer...
Ta première explication était super claire, à tel point que je viens juste de modifier mon code pour introduire deux classes et par là même alléger le code.

Voilà ce que ça donne, et effectivement plus de pb.

CSS :
a {
display: inline-block;
font-size:14px;
width:48px;
height:48px;
line-height:60px;
text-align:center;
line-height:60px;

}
.cours {
background:url(page.png) no-repeat;
}

.flash {
background:url(flash.png) no-repeat;
}

HTML :
<a class="cours" href="" title="" target="_blank">Cours</a>
<a class="flash" href="" title="" target="_blank">&nbsp</a>

Par contre j'ai toujours mes deux <a>, mais cela dérange-t-il vraiment ?

PS : c'est vrai que ma solution de départ mettait de la mise en forme dans le HTML, et ça c'est pas beau quand on peut le faire avec du CSS (je me fouette tout en disant "c'est ma faute, ma très grande faute...").

Encore un très grand merci, j'abandonne de ce pas le degré Celcius et le Kelvin (mauvaise blague de prof de physique...).

Tes deux <a>, à partir du moment où leur action est différente (deux liens différents donc) ne sont pas dérangeant.

Le premier cas était perturbant car non optimisé pour une réutilisation de la page et entrainaient des conséquences css à s'arracher les cheveux puisque tu utilisais deux <a> pour la même action.

Tout l'avantage de la class et du css est là, écrire un minimum de code pour un avoir un rendu parfait et optimisé.

Je viens de comprendre la blague et j'accepte volontiers la flatterie ! (par contre, la physique s'est, pour moi, arrêté en année de troisième).

Bien heureux d'avoir pu t'aider.