css | Hervé Hennes

Background de site cliquable en css

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.

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

…

Truc et astuces : [Chrome] Contourner l’erreur d’affichage de la propriété background-image sur un tr

8 juin 2011 / herve / Trucs et astuces

Un petit tip que je partage avec vous aujourd’hui car j’ai pas mal cherché sur internet une solution qui me convenait.

Le problème que j’ai rencontré est le suivant :
Sous Google Chrome et Safari, l’image de fond attribuée à ma ligne de tableau <tr> ne s’affichait pas correctement, et était reprise par chaque cellule du tableau.

Voici l’aperçu problématique :

Voici le code html du tableau

<table border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr class="bg_realisation_small">
<td class="bg_realisation_gauche_chrome">
<h3>AVANT</h3>
<img style="width: 260px; height: 195px;" src="realisations-5.jpg" alt="" /></td>
<td class="bg_realisation_droite_chrome">
<h3>APRES</h3>
<img style="width: 260px; height: 195px;" src="realisations-4.jpg" alt="" /></td>
</tr>
</tbody>
</table>

Le principe du hack constiste à supprimer le fond de la balise tr et à l’appliquer aux éléments td en spécifiant la position du fond.

Voici le Css du correctif :

tr.bg_realisation_small

…

Truc et astuces : [Chrome] Contourner l’erreur d’affichage de la propriété background-image sur un tr Lire la suite »