Appliquer un lien hypertexte sur un background

Appliquer un lien hypertexte sur un background Noter :

#1 ivoyages

Groupe : Hubmaster
Messages : 141
Inscrit(e) : 25-juin 04
Genre:Homme
Localisation:Région Parisienne
Société:Alta Media

Posté 01 juin 2011 - 19:29

Bonsoir,

J'appelle un background depuis ma feuille de style comme ceci :

    body {
    margin-top:24px;
    background-color:#FDFCFA;
    background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:1.5;
    }

Comment appliquer au background un lien hypertexte ?

Je suis preneur d'infos car je ne vois pas du tout.

Merci

Greg

I-Voyages - I-Trekkings - Grégory Rohart Photographies

Haut

#2 Dadou

Light or Dark Side ?

Groupe : Fondateur
Messages : 3 244
Inscrit(e) : 29-avril 04
Genre:Homme
Localisation:13 rue Offenbach, Barentin

Posté 01 juin 2011 - 20:26

tu ne peux pas, en fait, c'est le contraire qu'il faut faire : appliquer un background à un lien hypertexte

« Demander ne coûte qu’un instant d’embarras ; ne pas demander, c’est être embarrassé toute sa vie. » (Proverbe japonais)
- Mon petit site a moi

Haut

#3 ivoyages

Groupe : Hubmaster
Messages : 141
Inscrit(e) : 25-juin 04
Genre:Homme
Localisation:Région Parisienne
Société:Alta Media

Posté 01 juin 2011 - 21:33

Dadou, le 01 juin 2011 - 20:26, dit :

tu ne peux pas, en fait, c'est le contraire qu'il faut faire : appliquer un background à un lien hypertexte

Ah ok.

ET je fais ça comment

J'ai tenté :

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.5;
}
.thenorthface{
margin-top:24px;
background-color:#FDFCFA;
background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
display:block;
width:1903px;
height:930px;
}

et dans le html :

<a href="#"><div class="thenorthface"></div></a>

mais le background est au dessus du reste du tempalte :wacko:

I-Voyages - I-Trekkings - Grégory Rohart Photographies

Haut

#4 MarvinLeRouge

Groupe : Hubmaster
Messages : 771
Inscrit(e) : 22-novembre 04
Genre:Homme
Localisation:Toulon

Posté 01 juin 2011 - 21:49

Salut,

Alors,

Tu ne peux pas mettre un div dans un a (a est un élément inline donc ne doit contenir que des éléments inline)
En revanche, tu peux tout à fait donner à ton lien un aspect de type bloc
Et il va falloir que tu joues sur les z-index pour que le reste soit quand même au-dessus
Et tant qu'on y est, on met du contenu à ton lien

Ca donnerait un truc du style

<body>
<a class="thenorthface">du texte qui décrit bien ton lien</a>
<div class="wrapper">
Le reste de la page
</div>
</body>

.thenorthface {
position : fixed;
z-index : 1;
left : 0;
top : 0;
width : 100%;
height : 100%;
text-indent : -5000px;
overflow : hidden;
background : url("une image assez grande pour couvrir l'écran, de préférence conçue pour passer en repeat");
}
.wrapper {
position : relative;
z-index : 2;
}

Ce message a été modifié par MarvinLeRouge - 01 juin 2011 - 21:50.

Lorsqu'un lapin rouge naît, on le nomme Marvin, en mémoire de Marvin 1er qui détruisit la ville de Zautamauxime. Puis on le bannit car les lapins rouges, ça porte malheur.

Haut

#5 ivoyages

Groupe : Hubmaster
Messages : 141
Inscrit(e) : 25-juin 04
Genre:Homme
Localisation:Région Parisienne
Société:Alta Media

Posté 02 juin 2011 - 10:39

MarvinLeRouge, le 01 juin 2011 - 21:49, dit :

Salut,

Alors,

Tu ne peux pas mettre un div dans un a (a est un élément inline donc ne doit contenir que des éléments inline)
En revanche, tu peux tout à fait donner à ton lien un aspect de type bloc
Et il va falloir que tu joues sur les z-index pour que le reste soit quand même au-dessus
Et tant qu'on y est, on met du contenu à ton lien

Ca donnerait un truc du style

<body>
<a class="thenorthface">du texte qui décrit bien ton lien</a>
<div class="wrapper">
Le reste de la page
</div>
</body>

.thenorthface {
position : fixed;
z-index : 1;
left : 0;
top : 0;
width : 100%;
height : 100%;
text-indent : -5000px;
overflow : hidden;
background : url("une image assez grande pour couvrir l'écran, de préférence conçue pour passer en repeat");
}
.wrapper {
position : relative;
z-index : 2;
}

Merci pour le bout de code. Un pote l'a fait pour moi entre temps...

I-Voyages - I-Trekkings - Grégory Rohart Photographies