[Non Validé] Affichage spécial des liens utiles Bouton_active[Non Validé] Affichage spécial des liens utiles Bouton_hover[Non Validé] Affichage spécial des liens utiles Fb-hover[Non Validé] Affichage spécial des liens utiles Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
[Non Validé] Affichage spécial des liens utiles EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[Non Validé] Affichage spécial des liens utiles EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[Non Validé] Affichage spécial des liens utiles EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[Non Validé] Affichage spécial des liens utiles EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[Non Validé] Affichage spécial des liens utiles EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
[Non Validé] Affichage spécial des liens utiles EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
[Non Validé] Affichage spécial des liens utiles EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
[Non Validé] Affichage spécial des liens utiles EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -20%
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q ...
Voir le deal
749 €

Partagez
 

[Non Validé] Affichage spécial des liens utiles

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.terramysticarpg.com/
Shay Altanir
Shay Altanir
{ Membre }
{ Membre }

Féminin Messages : 25



[Non Validé] Affichage spécial des liens utiles Empty

Affichage spécial des liens utiles

Description

Voici un code qui vous permettra d'afficher vos liens utiles, avec un effet de changement de couleur et un glissement au passage de la souris. (Comme la navigation de CSS Actif)

Démo

https://i.servimg.com/u/f36/16/36/06/79/lienut10.png

Code

Vous devez poster un message à la suite pour afficher le code

Informations générales

Shay Altanir/Ayael25/08/2012Firefox, ChromePSEUDO STAFFPas de mise à jour pour l'instant


Dernière édition par Shay Altanir le Mer 03 Oct 2012, 07:57, édité 4 fois
MessageSujet: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptySam 25 Aoû 2012, 17:01
Revenir en haut Aller en bas
http://serialdesigner.forumactif.fr/
K-Surf
K-Surf
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



[Non Validé] Affichage spécial des liens utiles Empty
J'aime bien l'idée, une petit ♥ pour toi !
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptyDim 26 Aoû 2012, 17:37
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Non Validé] Affichage spécial des liens utiles Empty
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 Smile
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 !
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptyMer 03 Oct 2012, 07:15
Revenir en haut Aller en bas
http://www.terramysticarpg.com/
Shay Altanir
Shay Altanir
{ Membre }
{ Membre }

Féminin Messages : 25



[Non Validé] Affichage spécial des liens utiles Empty
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^^
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptyMer 03 Oct 2012, 07:59
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Non Validé] Affichage spécial des liens utiles Empty
Merci bien Smile

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 Wink
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 Wink


Pour aller plus loin

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 Wink
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptyMer 03 Oct 2012, 09:17
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Non Validé] Affichage spécial des liens utiles Empty
Sujet verrouillé en attendant des nouvelles de son auteur


@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 Wink
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles EmptyMar 04 Déc 2012, 10:14
Revenir en haut Aller en bas
Contenu sponsorisé




[Non Validé] Affichage spécial des liens utiles Empty
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   [Non Validé] Affichage spécial des liens utiles Empty
Revenir en haut Aller en bas
 

[Non Validé] Affichage spécial des liens utiles

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Non validé] Personnalisation de l'affichage des messages
» [Liens] Quelques effets pour vos liens
» [Liens] Liens avec fond coloré
» Quelques codes utiles pour la Chatbox
» [Liens] Soulignement des liens en tirets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Codes Directement Exploitables :: Codes à Copier/Coller-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit