Problème pour l'ajout d'un lien dans mon en-tête

Bonjour

L'en-tête de du site en question est actuellement la suivante :

<h1 id="header"><span>Esperanto Civitio<span></h1>

avec le CSS suivant :

#header {
	width:780px;
	height:157px;
	background-image: url("images/header.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	margin:0;
	padding:0;
}

#header span {
	display:none;
}

Ainsi le texte Esperanto Civitio n'est affiché que dans les cas ou le navigateur ne supporte pas les CSS.


Mon problème : Je dois ajouter un lien sur l'en-tête

je pensais faire

<a href="index.php" title="accueil">
<h1 id="header"><span>Esperanto Civitio<span></h1>
</a>

mais ce n'est bien entendu pas correct du point de vue w3c


Est-ce que quelqu'un à une solution à me proposer ?


Edit : le site se trouve en test ici : http://modx.elfloridita.net
Modifié par JuTs (29 Sep 2006 - 19:40)

Bonjour.

Suggestion : utiliser un évennement onclick

<h1 id="header" title="accueil"  onclick="document.location.href='index.php'" />

avec cursor:pointer; dans le css...

mouais , ça empêchera l'accès à ceux qui n'ont pas js activé ou supporté.

Ceci dit je ne pense pas que ce lien sur l'en-tête soit indispensable. En réalité c'est la personne pour qui je fais ce site qui veut que je place ce lien. Et en plus ce n'est même pas un lien vers la page d'accueil mais vers une autre page du site. J'ai fortement déconseillé cette idée (puisque habituellement un lien sur l'en-tête pointe sur l'accueil du site) mais il insiste.

j'ai aussi pensé à faire un truc du genre

<div id="header">
<a ...><img ...></a>
<h1>Esperanto Civitio</h1>
<div>

et avec une propriété display:none; sur le h1.
mais on m'a toujours dit que les images qui font partie du design, ça se met dans les CSS et pas ailleurs
Et puis avec cette solution, c'est pas terrible pour ceux qui ne supportent pas les CSS et qui affichent les images (image avec le H1 à côté)
Modifié par JuTs (29 Sep 2006 - 20:07)

<h1 id="header"><a href="#" title="Retour à l'accueil"><span>Esperanto Civitio<span></a></h1>

#header {
	width:780px;
	height:157px;
	background-image: url("images/header.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	margin:0;
	padding:0;
}

#header a {
width:XXpx; height:XXpx; display:block;
}

#header a span {
	display:none;
}

[EDIT]
Erf le copy/paste n'avait pas marché

[EDIT#2]
Jme demande pourquoi tu l'apelles header si il n'y a que ça...
Modifié par noklio (29 Sep 2006 - 20:24)