[RESOLU][CSS] Rendre clickable une background url (ou feinter)

Dev
1

Sur ce site j’aimerais que toute la partie du haut de l’header (en gros, les 145 premiers px de haut, sur toute la largeur) ce soit clickable et que ça pointe sur la home du site.
Sauf que c’est une background-image, donc je n’y arrive pas.
J’ai un peu bidouillé, essayé de reproduire ce qui est écrit ici mais ça ne marche pas.

Le haut de la page correspond à ce code:

<div id="blog"> <div id="header"> <div id="sitetitle"><h1><a href="http://www.coldfire.info"> </a></h1></div> <div id="sitedescription"><h2>Et vous, vous êtes CP ou CTF?</h2></div> </div>

Et le CSS pour ces parties-là, j’en suis arrivé (mal) à ça:

[code]#header {
width: 970px;
height: 291px;
background: url(images/header.jpg) no-repeat;
padding: 0;
margin: 0;
}

#header #sitetitle {
color: #fff;
padding-top: 2px;
font-size: 20px;
font-family: cursive;
font-weight: bolder;
}

#header a
{
position: absolute;
top: 0;
left: 0;
width: 970px;
height: 145px;
}

#header #sitetitle h1 a {
color: #fff;
display: none;
top: 0;
left: 0;
width: 970px;
height: 145px;

}

#header h2 {
color: #fff;
font-family: Trebuchet MS;
font-weight: bolder;
font-size: 25px;
}

#header #sitedescription {
padding-left: 15px;
padding-top: 124px;
}

#header #sitedescription a {
position: absolute;
top: 0;
left: 0;
width: 970 px;
height: 145px;
}[/code]

Mais je dois m’y prendre mal.
Quelqu’un pourrait m’aider à rendre la partie supérieure de la background image clickable afin qu’elle pointe vers la racine du site?
Merci d’avance

2

Tu pourrais peut être feinter en mettant un gif transparent dans ta div et faire le lien dessus ?

3

Tu peux m’en dire plus? :slight_smile:

4

Le plus propre serait encore d’editer ton fichier template, et d’y rajouter un bon vieux tag image, compatible avec TOUS les navigateurs.

5

Oui mais comme je suis une burne en CSS xhtml gnagna, j’ai peur de tout pêter :slight_smile:

6

je pense que pour ce que tu veux faire, faut regarder du côté de l’évènement javascript onClick (à poser sur ton div).
Après, ce que je ferais perso, pour garder le design actuel du site et pour rajouter la fonctionnalité : je changerais la background image visible en bannière clickable… Après, il y a certainement une raison pour ne pas faire celà…

7

Bon super vite (faut que j’aille à la creche)

Dans le fichier http://www.coldfire.info/wp-content/themes…lack/header.php (ou alors c’est un niveau au dessus)

tu change

[code]

<div id="header">
	<div id="sitetitle"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1></div>
	<div id="sitedescription"><h2><?php bloginfo('description'); ?></h2></div>
</div>[/code]

par

<div id="blog"> <a href="http://www.coldfire.info"><img src="monimage.jpg" alt="mydescription" width="talargeur" height="tahauteur" border="0"></a> <div id="header"> <div id="sitetitle"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1></div> <div id="sitedescription"><h2><?php bloginfo('description'); ?></h2></div> </div>

Et donc du coup, retrouve et edite le bout de CSS qui fait demarrer ton content à 145 px.

8

bah tu cré un gif en 1*1px avec un fond transparent et tu l’insères dans ta div qui contient l’image de fond en spécifiant au gif la largeur et la hauteur de ladite div et tu fais le lien dessus vers ta homepage.
Mais eu sinon a moins que j’ai mal compris si t’as juste ton image en fond de div avec rien a coté pourquoi ne pas simplement l’insérer comme une image normale et ainsi faire ton lien dessus ?

9

j’essaierais un truc comme ça:

<div id="header"> <div id="sitetitle" onclick="java script:window.location='http://www.coldfire.info'"></div> <div id="sitedescription"><h2>Et vous, vous êtes CP ou CTF?</h2></div> </div>

ou alors, en gardant le :

<div id="header"> <div id="sitetitle"><a href="http://www.coldfire.info">&nbsp;</a></div> <div id="sitedescription"><h2>Et vous, vous êtes CP ou CTF?</h2></div> </div>
avec dans la css

#sitetitle a{ width:100%; height:100%; }

10

[quote=« Nickiller, post:8, topic: 36613 »]bah tu cré un gif en 1*1px avec un fond transparent et tu l’insères dans ta div qui contient l’image de fond en spécifiant au gif la largeur et la hauteur de ladite div et tu fais le lien dessus vers ta homepage.
Mais eu sinon a moins que j’ai mal compris si t’as juste ton image en fond de div avec rien a coté pourquoi ne pas simplement l’insérer comme une image normale et ainsi faire ton lien dessus ?[/quote]

C’est bon :slight_smile:
J’ai viré le display: none; du CSS pour #header #sitetitle h1 a, j’ai changé le position vers relative pour #header a, et j’ai rajouté un gif 1x1px avec width et height dans le div sitetitle et c’est bon

Merci à tous!

Edit: Rabban, j’aime bien ta première solution, je testerai

11

Moi j’ai juste ajouté ça (marqué en gras ci-dessous) dans mon template :

Et ça m’a tout de même l’air vachement moins compliqué… :slight_smile: