[résolu]Zone cliquable

Bonjour

J'ai créé une zone cliquable pour un logo en arrière fond:

#logo {
	left: 2px;
	width: 150px;
	cursor: pointer;
	position: absolute;
	top: 0px;
	height: 140px;
}

<a href="http://www.pasaj.ch"><div id=logo></div></a>

Cela marche nickel mais à la validation ça râle:

a écrit :
# Error Line 34 column 44: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

<a href="http://www.pasaj.ch"><div id=logo></div></a>

# Error Line 34 column 48: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<a href="http://www.pasaj.ch"><div id=logo></div></a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

En soit le truc marche avec les navigateurs que j'ai essayé mais si cela peut être valide...

Est-ce que quelqu'un arriverait à régler ce truc pour un débutant en css et un ignare en anglais?

Bon week-end.
Modifié par pbpub (13 Oct 2006 - 20:22)

Le site si jamais: www.bregnard.org
Modifié par pbpub (07 Oct 2006 - 16:34)

Salut pbpub ,

Je pense que la première erreur serait corrigée en mettant des guillemets :

<div id="logo">

Quant à la deuxième le valdateur te dit qu'il est interdit de mettre une balise div dans une balise a
C'est vrai que cela fonctionne mais en termes d'accessibilité c'est pas top : si je désactive le CSS je n'ai plus du tout de lien et si je désactive les images j'ai un lien "quelque part" sur la page sans qu'aucun texte (alt) ne me dise à quoi il correspond.
Donc de mon point de vue la solution serait de redécouper ton header.jpg en logo.jpg et header_droit.jpg et de mettre un "vrai" lien avec image et alt qui va bien dans ton div logo.
Mais ceci n'engage que moi

@+

Autre possibilité :
- créer un bloc avec une div dimmensionnée (ça c'est fait) ;
- placer un lien à l'intérieur (pas à l'extérieur, quelle idée !) ;
- mettre ce lien en display: block; avec height: 100% (pour la largeur ça devrait être automatique) ;
- bien entendu, fournir un texte alternatif pour expliciter le lien.

<div id="logo">
<a href="/" title="Aller à la page d'accueil">PASAJ</a>
</div>

Et hop, on cache le texte du lien avec un petit text-indent: -5000px;, par exemple.

Merci! Tout marche!

Et merci également pour l'astuce

Bonjour!

En fait, ce n'est pas si réglé que ça car le lien me retourne à la même page au lien de la page www.pasaj.ch (ce qui est bien écrit dans les codes sources).

Bizzare non?
Modifié par pbpub (11 Oct 2006 - 17:43)

personne n'a d'idée?

Je pense que je vais me retourner vers ma solution non valide qui marche...

Merci pour tout!

Salut,

Si tu ne veux pas redécouper ton header.jpg le plus simple me semble d'utiliser <map>

@+

[*EDIT]
Et en cherchant mieux voilà ce que j'ai trouvé...
[/EDIT]
Modifié par Heyoan (13 Oct 2006 - 19:15)

excellent!

Merci