Faire un lien sur une bannière en css

07 juil. 2008, 11:35

Bonjour j’ai fait un header avec une bannière. Je voudrais que cette bannière renvoit tout le temps sur la même page.
Mon style css est le suivant pour la bannière :
#header {
height: 100px;
background-image: url(bandeau.jpg);
background-repeat: no-repeat;
}

Quelle est la syntaxe à rajouter pour que l’image ‘bandeau.jpg’ ait un lien et pointe sur une page x ?
Merci beaucoup
Catherine

07 juil. 2008, 11:46

Bonjour,

A ma connaissance il n'est pas possible de définir un lien en css.

Dans ton code html tu peux mettre une image transparente devant ton header pour en faire un lien mais je vois pas trop l'intéret.

Sinon tu peux aussi utiliser l'attribut "onclick" de ton div header mais si le javascript est désactivé chez le client cela ne marchera pas.

Exemple :

CSS :

Code : Tout sélectionner

#header { 
height: 100px;
background-image: url(http://www.google.fr/logos/chagall.gif); 
background-repeat: no-repeat; 
} 

#header:hover {
	cursor:pointer;
}

HTML :

Code : Tout sélectionner

<div id="header" onclick="window.location='http://www.google.fr';"></div>

Si tu veux faire ce lien pourquoi ne pas avoir dans ton header l'image en html et le reste en css ?

07 juil. 2008, 14:26

Code : Tout sélectionner

a#header {
    display: block;
    height: 100px;
    width: 80px;
    background-image: url(http://www.google.fr/logos/chagall.gif);
    background-repeat: no-repeat;
}

et la source HTML :

Code : Tout sélectionner

<a href="http://www.google.fr" target="_blank" title="Go to google"></a>

Les dimensions à revoir ....
Plus propre niveau sémantique, mais le mieu reste une balise <a> et <img /> d'imbriqué

07 juil. 2008, 14:48

+1 ca marche aussi, par contre j'aurai écrit

Code : Tout sélectionner

#header a{
...

dans le css, je crains que l'autre syntaxe ne fonctionne pas, non ?
Et il faut mettre ton lien dans une <div id="header"> ...

07 juil. 2008, 16:30

dans ce cas, pas de <div id="header"

on met le id directement sur le <a id="header" ...

petit oubli de ma part, mais ca devrait marcher

07 juil. 2008, 23:04

Hey

,

Je vous arrête tout de suite. Un lien vide ? Que vois-je ? Berk

.

Pourquoi mettre la bannière en CSS ? C'est une image, un média, nous sommes d'accord. Ton code HTML :

Code : Tout sélectionner

<a href="http://domain.tld/">
  <img src="Media/Image/Bandeau.jpg" alt="Bandeau pour le site Domain.tld" />
</a>

Si tu veux pouvoir appliquer un style particulier, donne un identifiant à ton lien ou à ton image, ou alors une classe, comme tu veux.

Ne jamais mettre de lien vide, hein. Surtout pour un élément aussi important. Comment un moteur de recherche va-t-il référencer la bannière ? Le lien a un titre, certes, mais pas de texte. La moitié des moteurs de recherche ne vont pas le traiter déjà. En plus, ce serait fort agréable de ne pas utiliser de target. Il est bon de laisser le choix à l'utilisateur. C'est à lui de décider s'il ouvre la page dans une nouvelle fenêtre, nouvelle onglet ou même onglet.

08 juil. 2008, 10:45

C'est sur que le lien vide est tout sauf idéal.
Dans ce cas ne surtout pas oublier le title ....

Mais la question était avec du CSS ...
Enfin, tout à fait d'accord. Vive l'accessibilité et le respect de la sémantique sinon

08 juil. 2008, 10:51

Mais la question était avec du CSS ...

Certes mais ce n'est pas une question de CSS. Le problème peut se résoudre simplement en HTML, alors il est préférable de conseiller de l'HTML

.

08 juil. 2008, 10:55

Oui, tout à fait,
D'où la précision :

Plus propre niveau sémantique, mais le mieu reste une balise <a> et <img /> d'imbriqué

Enfin, maintenant il a l'embarat du choix des solutions

Faire un lien sur une bannière en css

Qui est en ligne