Faire un div cliquable...

[neopium]

Bonjour tout le monde,

Voila, je souhaite faire rendre un div cliquable... j'ai trouvé un moyen de le faire qui marche, ainsi que vous pouvez le voir ici... Quand vous vous baladez sur les différentes cases blanches (je parle pas des menus déroulants qui sont en javascript), elles changent de couleur et sont cliquables...
Ça marche très, mais ce n'est pas du HTML 4.01 valide car j'ai mis mon <div> entre deux balises <a> :

         <!-- Debut Texte avec lien-->
        <a href='http://www.adam.matmeca.org/ingenieur.php'>
            <div class="TexteLien">
                Blabla
            </div>
        </a>
        <!-- Fin Texte avec lien-->

or la balise <div est une balise bloc, la balise <a> une inline, donc pas moyen de les imbriquer comme ça... et lorsque je les imbrique ds le sens autorise, seul le texte est cliquable...
voici le css correspondant :

div.TexteLien
{
background-color: #FFFFFF;
padding: 2px;
border-width: 1px;
border-top-width: 0px;
border-style: solid;
border-color: #e1e8ef;
margin-bottom: 0px;
text-align: justify;
}

div.TexteLien:hover
{
background-color: #F2F5FF;
}

Comment rendre cette page conforme ?
Merci pour votre aide

 

[Nephou]

:heu: ben grace au paramètre « display » en css tu peux changer le type de comportement de ton élément

par exemple
a.Textlien
{
display:block;
}

et hop, ta balise a passe de statut de "inline" à celui de "block"

 

[neopium]

effectivement, ça marche et c'est valide, merci !
voici mon code html :

        <!-- Debut Texte avec lien-->
        <div class="TexteLien">
            <a href="http://www.adam.matmeca.org/ingenieur.php">
                Blabla
            </a>
        </div>
        <!-- Fin Texte avec lien-->

et la partie css :

div.TexteLien
{
background-color: #FFFFFF;
padding: 2px;
border-width: 1px;
border-top-width: 0px;
border-style: solid;
border-color: #e1e8ef;
margin-bottom: 0px;
text-align: justify;
}

div.TexteLien:hover
{
background-color: #F2F5FF;
}

div.TexteLien a
{
display:block;
}