C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 19:52 par Sakira

» [RPG] Fiche personnage avec bannière latérale
Hier à 19:46 par #Brook

» Système d'onglets simple et personnalisable
Hier à 19:45 par #Brook

» [RPG] Fiche personnage et présentation
Hier à 09:44 par Invité

» [RPG] Fiche de présentation
Lun 26 Juin 2017, 18:26 par Invité

» Modifier l'apparence du titre des topics
Mer 21 Juin 2017, 10:21 par Invité

» Zoomer progressivement sur une image
Mar 20 Juin 2017, 12:38 par Lutèce

» Décoration avant ou après un lien
Mar 20 Juin 2017, 12:05 par nuanciel


Poster un nouveau sujet   Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.terramysticarpg.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 25



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)

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


Ceci est une signature. ~

Avatar par Kitsuna ♥


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   Sam 25 Aoû 2012, 17:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://serialdesigner.forumactif.fr/
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



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




MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   Dim 26 Aoû 2012, 17:37
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



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   Mer 03 Oct 2012, 07:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.terramysticarpg.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 25



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


Ceci est une signature. ~

Avatar par Kitsuna ♥
MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   Mer 03 Oct 2012, 07:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



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   Mer 03 Oct 2012, 09:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



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   Mar 04 Déc 2012, 10:14
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: [Non Validé] Affichage spécial des liens utiles   
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é] Affichage spécial des liens utiles
» Liens utiles et ressources^^
» Tuts Photoshop, liens utiles; Gwaedin, Ange, inuit.
» Liens utiles pour codeurs
» Affichage rang spécial

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
CSSActif :: Codes Directement Exploitables :: Codes à Copier/Coller-
Poster un nouveau sujet   Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.

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 | Contact | Signaler un abus | Forum gratuit