Background de site cliquable en css

/ / Trucs et astuces

J’ai récemment recherché comment rendre le background d’un site cliquable de manière simple, après pas mal de recherche je n’ai rien trouvé qui correspondait exactement à ce que je voulais.
Mon objectif étant d’avoir un habillage cliquable un peu comme sur le site du figaro ou de la redoute.

Voici une structure de base de background cliquable en css

Voici le code html de la page, très simple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example habillage de site web</title>
<link href="habillage.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="habillage_site">
<a href="#"><img src="images/img-trans.png" /></a>
</div>
<div>
<div>
<p>Menu de gauche</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3     </li>
</ul>
</div>
<div>
<h2>Contenu du block principal </h2>
<p>Contenu page </p>
</div>
<div>
&copy; H-hennes 2013
</div>
</div>
</body>
</html>
…

Background de site cliquable en css Lire la suite »