J'aime bien l'idée, une petit ♥ pour toi !

Bonjour Shay Altanir et merci pour ta contribution !

Pour entammer la procédure de validation (qui devrait pas être trop longue malgré le retard), j'ai quelques remarques que j'aimerai que tu corrige :

• Peux-tu distinguer les parties HTML/CSS/Personnalisation/... avec des titres appropriés grâce à <h3> ? Ca permettrait d'aérer un peu tout ceci
  
• Peux-tu utiliser <div class="nb">...</div> pour indiquer tes "Notes :" afin que ce soit plus visible ?
  
• Peux-tu indenter correctement le HTML afin que l'on visualise bien la hiérarchie de chaque élément ?

Voilà, c'est tout ce que je vois, pour le reste pas grand chose à dire sur le fond donc réalise ces petits changements et non verrons ensuite
Je m'occuperais d'héberger ton screenshot sur CSSActif lors de la validation afin que ton exemple perdure aussi longtemps que le forum.

Merci encore !

Toutes les modifications demandés ont été effectuées!
Merci à toi d'avoir pris le temps de regarder mon code, j'ai beaucoup sous estimé l'importance de l'esthétique du tutoriel en lui même, c'est intéressant de progresser^^

Merci bien

Je me suis permis également de repasser encore derrière pour des petits détails ergonomiques, trois fois rien.

Maintenant, passons aux derniers ajustements, plus techniques
J'ai juste quelques remarques à ce sujet, moyennant quoi ce sera valide pour moi :

• Pourquoi nommer la classe .lienutile1 ? En fait, pourquoi le chiffre 1 ? Cela n'a pas vraiment de sens vu qu'il s'agit d'une classe (donc peut s'appliquer à un nombre infini d'éléments, rendant obsolète la numérotation)
  
  
• Je pense qu'il n'est pas nécessaire de définir la classe .fleche, notamment parce-qu'elle peut porter à confusion. En fait, tu peux carrément t'en passer (dans le HTML) en remplaçant ton sélecteur .fleche par le sélecteur de l'image .lienutile1 > img (dans ton CSS) qui ne dépendra pas de la nature de l'image donc !
  
  
• Cela découle du premier point, pourquoi mettre un identifiant #lienutile à la liste du coup ? Pour moi, cela veut dire qu'il ne peut y avoir qu'une seule liste de liens utiles dans la page. Du coup, c'est faux car tu dois rajouter un bloc par lien ; autant remplacer la classe .lienutile1 par une classe .lien-utile et repérer la liste avec les sélecteurs CSS appropriés, pas besoin de créer des classes/identifiants supplémentaires
  
  
• Enfin, la propriété font-style ne peut pas prendre la valeur none. Je ne sais pas ce que tu veux faire là mais ça n'a aucun effet (donc autant le supprimer) : cf. W3Schools

Si c'est un peu confus ou si tu ne comprends pas dis le moi.
Pour récapituler, je pense que tu peux ré-écrire ton HTML ainsi :

Code:

<div class="lien-utile">
    <img src="lien de l'image" />
    <ul>
        <li>
            <a  href="http://www.css-actif.com/">CSS actif</a>
        </li>
    </ul>
</div>

Je te laisse adapter le CSS en conséquence



Sur cette version cependant, il faut faire une <div> par lien utile.
De plus, on crée une liste <ul> pour... un seul élément (un lien) !

Or il serait plus efficace de faire simplement une puce par lien, ce qui donnerait une nouvelle structure (sans trop pousser) :

Code:

<div class="lien-utile">
    <ul>
        <li>
            <img src="lien de l'image" />
            <a  href="http://www.css-actif.com/">CSS actif</a>
        </li>
    </ul>
</div>

Avec autant de

Code:

<li>
    <img src="lien de l'image" />
      <a  href="http://www.css-actif.com/">CSS actif</a>
</li>

que de liens...

Mais cela nécessite probablement des ajustements dans le CSS, c'est plutôt à toi de voir et de tester, je ne suis pas là non plus pour te dire "à ta place j'aurais fais comme cela". En revanche je préfère t'indiquer les axes d'amélioration que tu pourrais apporter pour rendre ton code plus simple et fonctionnel

@Shay Altanir : Mon message précédent datant d'il y a 2 mois maintenant, je lock le sujet en attendant que tu me fasse signe (par mp) pour qu'on poursuive la procédure de validation. Merci de ta compréhension