Css : Mettre un lien hypertexte sur un background

[ivoyages]

Bonsoir,

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

Code: Tout sélectionner

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 et d'idées car je ne vois pas du tout.

Merci

Greg

[tryan]

Salut,

Je ne crois pas qu'il soit possible d'attribuer un lien à cet balise. A mon avis il faut créer une autre class auquel tu attribues une partie des éléments dans le genre :

Code: Tout sélectionner

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

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

ps: je peux me planter aussi!

[YoyoS]

Tu risques pas d'avoir un site valide W3C en faisant ça. Depuis quand on met une balise block dans une balise inline ?

La technique est de simplement donner une hauteur, largeur à ton lien ainsi que l'attribut magique: display:block;

[tryan]

Autant pour moi ^^. Donc du coup :

Code: Tout sélectionner

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

<a class="top" href="#">*</a>

C'est bon la ?

[ivoyages]

ça ne marche pas. Le background est en haut de page et le template en bas...

Pour info, le site est ici h**p://www.i-trekkings.net. Le background est en place mais reste à placer le lien hypertexte...



Greg

[tryan]

Tu as réussis ?

[ivoyages]

oui un pote l'a fait pour moi... mais je n'ai pas encore regardé le code.

Je le place pour info dès que j'ai 2 secondes.

Merci pour avoir pris le temps de m'aider.

[YoyoS]

Il a simplement viré ton background et l'a ajouté comme une simple image =D

Code: Tout sélectionner

<div id="page">
<a href="http://www.i-trekkings.net/annuaire/redirec.php?id=1619"><img src="http://www.i-trekkings.net/templates/temp/img/bckgrd-TheNorthFace.jpg" alt="TheNorthFace" /></a></div>

[ivoyages]

Voici ce qui a été fait :

html :

Code: Tout sélectionner

<div id="page">
<a href="http://www.i-trekkings.net/annuaire/redirec.php?id=1619" target="_blank"><img src="http://www.i-trekkings.net/templates/temp/img/bckgrd-TheNorthFace.jpg" alt="TheNorthFace" /></a></div>

css :

Code: Tout sélectionner

#page {
   width: 1902px;
   /* × 929 */
   /*height:auto;
   margin: 0 auto;*/
   left:50%;
   top:0;
   margin-left:-951px;
   position: relative;
   background:transparent;
   height:3702px;
   /height:3712px;
   height /*\**/: 3714px\9
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   #page {
      height:3705px;
   }
}

Greg

[tryan]

Il ya des trucs qui me trou le c*l dans ton css et j'aimerais bien comprendre certaines parties en rouge:
/height:3712px;
height /*\**/: 3714px\9
et
@media screen and (-webkit-min-device-pixel-ratio:0) {
#page {
height:3705px;
}
}

[ivoyages]

Il ya des trucs qui me trou le c*l dans ton css et j'aimerais bien comprendre certaines parties en rouge:
/height:3712px;
height /*\**/: 3714px\9
et
@media screen and (-webkit-min-device-pixel-ratio:0) {
#page {
height:3705px;
}
}

J'peux pas t'expliquer... c'est un pote qui a fait ça

[Leonick]

Il ya des trucs qui me trou le c*l dans ton css et j'aimerais bien comprendre certaines parties en rouge

ce sont des hacks de css, qui ne sont pas compris par FF mais que IE, entres aitres, prend en compte, car les caractères "spéciaux" ne le gênent pas. d'où l'intérêt que ces hacks soient positionnés après la vraie affectation de height. Donc ff comprend pa 1° et l'applique et ie comprend les suivante

[tryan]

Merci Leonick mais même ton explication je ne la comprend pas !
J'ai bien compris que c'était un hack css mais c'est son fonctionnement que je ne pige pas.

[Leonick]

http://www.ultra-fluide.com/ressources/css/css-hacks.htm#IE

[YoyoS]

Par exemple tu veux une hauteur différente pour IE7- par rapport aux autres, tu fais:

Code: Tout sélectionner

.div {
height: 50px; /* Pour tous les standards */
/height: 0px; /* Lu que par IE 7- et écrase la valeur au dessus */
-height: 23px; /* Lu que par IE 6- et écrase les valeurs au dessus */
}