Css : Mettre un lien hypertexte sur un background

[ivoyages]

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

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 :

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

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

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

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

.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 */
}

 

[tryan]

Ok, c'est bon à savoir ça . Je vais faire des testes..

 

[graphee]

yop, pour faire un background 100 ave un lien dessus il te faut 3 zones :

1/ ton background
2/ ton lien
3 ta zone de contenu qui va venir par dessus pour éffacer le lien au centre d site, ainsi ton lien est partout par dessus ton fond peut importe la taille de l'écran.

<body>
    <div class="background">

    <a href="#" class="lien_pub"></a><!-- lien -->

        <div id="wrapper">
        CONTENU DE TON SITE
        </div>

    </div>
</body>

#background {
    background: url("images/background.jpg") no-repeat scroll center 0 transparent !important;
    width: 100%;
}

.lien_pub { display:block; width:100%; height:100%; position:fixed}

#wrapper {  width:1000px; margin:0 auto; position:relative;}

très important : position fixed du lien, et position relative du centre!!!!