Discussion :

[kurtbosh]

Bonjour,

Je voudrais affecter un lien à chaque pavé de cette page : http://www.grenault.net/mob_index.htm.

Or le W3C n'autorise pas cette fonctionnalité <a href="..."><div class="...">

Si vous avez une solution, je suis preneur !

Merci.

Cordialement.

[Muchos]

Pour répondre à votre question :

1. Vous pourriez passer à HTML5, qui accepte les éléments bloc entre les balises A.
2. Sinon, vous pouvez faire comme l'exemple suivant :
   

   Code html :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   <div class="bloc">
     <a class="bloc_lien" href="#"></a>
   </div>

   Code css :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   .bloc {
     border: medium solid black;
     height: 4em;
     width: 4em;
   }
   .bloc_lien {
     display: block;
     background: blue;
     height: 100%;
     /* width: auto (par défaut) */
   }

Pour répondre à votre problème :
Selon moi, vous pourriez éviter le problème en changeant de syntaxe. Vos DIV sont inutiles : une liste suffirait. Ex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul class="menu">
  <li>
    <a href="#"><span>Photos</span>
    <br />Présentation de quelques photos</a>
  </li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.menu {
  padding: 0;
}
.menu a {
  display: block;
  margin: 1em auto;
  border-radius: 1ex;
  width: 50%;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #3366FF;
}
.menu span {
  color: #FFF;
}

En outre, vous pourriez mettre une seule ligne de texte plutôt que de vous répéter (mais peut-être est-ce pour ajouter du mot-clé).

[houba222]

Bonjour

Ou remplacer le bloc "div" par un "span" (dans votre code actuel je ne sais pas quel élément div pose souci et l'effet attendu)

Même remarque que Muchos, sémantiquement vous devriez plutôt utiliser les listes. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="bloc-liste">	
   <h3 class"montitre"><a href="photos/mob_index.htm" class="pages">Photos</a></h3>
   <ul class"maliste">
      <li><a href="photos/mob_index.htm" class="texte">Présentation de quelques photos</a></li>
      <li><a href="photos/mob_index.htm" class="texte">lien1</a></li>
      <li><a href="photos/mob_index.htm" class="texte">lien2</a></li>
   </ul>
</div>

[Bovino]

Ensuite, on peut aussi considérer que la validation est une chose, que le fonctionnel en est une autre.
Si le code présenté n'est pas valide, ce n'est pas bien grave au final dans la mesure où il est fonctionnel.
D'autant que sémantiquement, une div dans un lien n'est pas nécessairement une aberration, pour preuve, l'évolution faite par le W3C concernant ce point dans la norme HTML5.
Bref, le meilleur conseil reste le premier donné par Muchos : mettre un doctype HTML5 et aucune autre modification n'est nécessaire.

[kurtbosh]

Bonjour,

Je vous remercie tous pour votre aide.

Le problème est résolu car, en fait, un lien sur un Div est accepté en HTML5, une excellente initiative !

J'ai donc converti la page en HTML5 et le code se réduit à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<a href="mob_tech.htm">
<div class="bloc-liste">
Cours Photo
<div class="texte">Initiation rapide et simple à la photo
</div>
</div>
</a>

Sur le Galaxy S4, cela me semble acceptable mais je ne sais pas sur un I-phone ?

Bonne journée.

--
http://mobile.grenault.net