AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Page d'accueil pause café

    Partagez
    Cheshire Cat
    FémininAge : 19Messages : 648

    le Mer 18 Mai 2016 - 22:38

    Bonjour à vous tous !
    Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.
    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    En action !




    Afin de voir les codes, merci de poster. Vous avez tout à fait le droit de dire un simple "Merci"  :hudada:


    Dernière édition par Cheshire Cat le Lun 6 Juin 2016 - 6:55, édité 8 fois



    Youp
    FémininAge : 21Messages : 498

    le Jeu 19 Mai 2016 - 3:37

    Elle est grave classe ta PA ! Franchement bravo ^^



    Cheshire Cat
    FémininAge : 19Messages : 648

    le Ven 27 Mai 2016 - 0:22

    C'est bien gentil, merci beaucoup
    J'ai modifié un petit peu les codes en attendant ^^



    Nihil Scar Winspeare
    Messages : 3942

    le Dim 5 Juin 2016 - 21:45

    Haaan, qu'elle est jolie cette PA, j'adore vraiment le style :hug:
    Si tu veux, j'ai fait une petite screen au survol du cercle / survol du staff.

    J'ai jeté un petit coup d'oeil au code, je me permets quelques petites remarques pour rendre ça encore mieux / facile à modifier (même si c'est déjà du bon code hein ! Very Happy)

    Comme dans le défi avec les ronds :p, ça serait cool d'utiliser le point 7 de ce tuto [Aide] Les Erreurs les plus Courantes en Codage.
    Ca permettrait d'alléger ton code CSS ! Je pense par exemple à .vote_1, .vote_2, .vote_3 qui se ressemblent beaucoup !
    Spoiler:

    Dans le head, tu charges 3 polices :
    Code:
    <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz|Josefin+Sans' rel='stylesheet' type='text/css' />
    Par contre, je ne trouve pas "Josefin Sans" dans le reste du code. C'est pas grand chose, un vestige d'une ancienne modification sûrement, mais je pense qu'on pourrait la retirer du coup !  :friends:

    D'ailleurs pendant que je parle de polices, un petit conseil qui peut faciliter la modification ensuite, ça serait de choisir l'une des 2 polices (Yanone Kaffeesatz ou PT Sans Narrow) comme police principale.
    Mettons que tu choisisses PT Sans Narrow comme police principale, tu la mets dans le CSS de la div qui englobe tout (.corps) ou même sur le body (puisque ici on est dans une page HTML)
    La police est une propriété qui s'hérite, ça veut dire que les enfants auront par défaut la même police !
    Ainsi, dans le reste du CSS ensuite, tu n'as plus besoin de préciser ceci, car tu l'auras fait pour le parent/le body :
    Code:
    font-family: 'PT Sans Narrow', sans-serif;
    Ca peut paraitre un détail, mais déjà c'est plus pratique pour personnaliser, et ça allège le code :)
    J'ai expliqué ça rapidement mais dis moi si tu veux un exemple concret !

    Autre petit détail, lié à une modification rapide je pense, ici il y a le signe = qui s'est fait la malle xD (plusieurs fois)
    Code:
    <a href="#" target"_blank">Contacter</a> | <a href="#" target"_blank">Profil</a>
    Du coup on te laisse vérifier partout que c'est bon !

    Petite info supplémentaire, si dans une page tu veux te débarrasser de devoir spécifier partout les target blank, tu peux rajouter dans la balise head ceci :
    Code:
    <base target="_blank" />
    Comme ça, plus besoin de préciser sur chaque balise a, tous les liens s'ouvriront par défaut dans un nouvel onglet Wink
    Je l'utilise rarement, mais c'est vrai que ça peut être bien utile  :toto:
    Si tu veux le voir expliqué d'une manière différente, Nyo en parle dans le tuto Créer une page HTML (pour fiche de pub, formulaires, etc,)

    Enfin dans le CSS de .news li, il y a une petite coquille qui s'est glissée, tu peux supprimer cette ligne :
    Code:
    width:box-sizing;

    Pour le CSS, ce qu'on fait habituellement avec les préfixes c'est les mettre avant la propriété en elle même.
    Exemple :
    Code:
    -webkit-transition: all 300ms;
    transition: all 300ms;

    au lieu de :
    Code:
    transition: all 300ms;
    -webkit-transition: all 300ms;
    En fait, il faut mettre d'abord les propriétés avec préfixe, et ensuite en dernier la propriété standard pour éviter de possibles bugs.

    Enfin, il me semble que ce n'est pas obligatoire, mais tu peux rajouter à la fin de ton LS un petit message dans ce genre :
    "Si jamais vous avez des problèmes avec ce Libre Service, n'hésitez pas à poster dans "Problème avec mon code" ou dans "Personnalisations" pour recevoir de l'aide."
    Perso, j'aime bien le mettre dans l'une des mises en formes proposées, c'est plus pratique pour le mettre bien en avant Very Happy




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Cheshire Cat
    FémininAge : 19Messages : 648

    le Dim 5 Juin 2016 - 23:43

    Merci beaucoup pour les conseils Nihil, ça m'a permis de modifier et ça me fera gagner du temps à l'avenir ! :bwaha:



    Nihil Scar Winspeare
    Messages : 3942

    le Jeu 14 Juil 2016 - 11:02

    Top o/

    Sur Safari, il y a un léger bug parfois quand on survole les ronds à côté du contexte ça affiche le contexte parfois, mais il me semble que ça vient de Safari, pas de ton code *grmblr* >->

    Si un autre architecte passe par là et à quelques minutes pour tester la PA et dire que ça marche bien chez lui, ça serait cool, ça permettra de la rendre disponible pour tout le monde plus rapidement peut-être :joie:

    EDIT : j'ai signalé en zone staff que le sujet pouvait être classé, je crois (je suppose T_T) que tout est bon <3


    Dernière édition par Nihil Scar Winspeare le Sam 16 Juil 2016 - 11:27, édité 1 fois




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Cheshire Cat
    FémininAge : 19Messages : 648

    le Jeu 14 Juil 2016 - 16:15

    Sachant que j'ai pas Safari vu que je n'ai absolument aucun Mac, impossible de regarder :')

    D'accord, on attends alors ^^



    Neva
    FémininAge : 25Messages : 18542

    le Sam 16 Juil 2016 - 18:15

    Je mets ça dans le LS du coup !
    Merci Ches



     
    Kâ Lys
    MasculinAge : 53Messages : 297

    le Dim 17 Juil 2016 - 3:40

    Merci



    missphan
    FémininAge : 33Messages : 152

    le Dim 17 Juil 2016 - 19:31

    j'adore merci =)



    + my personal brand of heroin
    You’re none of them because you’re all of them. Now that we found each other, you’ve given my past and future meaning. You are the sixth. You are the last. ©endlesslove.
    Ryukaï
    MasculinAge : 18Messages : 522

    le Dim 17 Juil 2016 - 21:52

    Roh! c'est classe! Merci Ches!



    Kelalin
    FémininAge : 24Messages : 1405

    le Dim 17 Juil 2016 - 23:41

    Merci pour le partage !
    Eryu
    FémininAge : 24Messages : 35

    le Lun 18 Juil 2016 - 12:47

    J'aime énormément ce codage, très simple et esthétique en même temps.
    Du coup je vais te l'emprunter sans vergogne 8D
    Merciii !
    Lexis
    FémininAge : 26Messages : 40

    le Lun 18 Juil 2016 - 13:31

    tellement classe ! merci du partage :)
    ceschosesetranges
    MasculinAge : 23Messages : 13

    le Mer 20 Juil 2016 - 1:13

    Comme c'est joli, j'adore <3 !

    Merci du partage !
    messia
    FémininAge : 19Messages : 18

    le Mer 20 Juil 2016 - 12:33

    Elle est super jolie, je vais l'utiliser !
    Merci du partage !
    charlint
    FémininAge : 17Messages : 14

    le Mer 20 Juil 2016 - 20:28

    Mercii !
    Wayat
    MasculinAge : 18Messages : 4

    le Ven 22 Juil 2016 - 0:04

    Merci pour le travail, elle est vraiment jolie ! o//
    Nevr0z
    FémininAge : 28Messages : 74

    le Ven 22 Juil 2016 - 2:55

    Merci :)
    br4nd0n
    Age : 23Messages : 47

    le Lun 25 Juil 2016 - 15:01

    La PA est magnifique, elle témoigne d'un bon travail Wink




    Kit by Adil94
    lucythao
    FémininAge : 23Messages : 53

    le Mar 2 Aoû 2016 - 20:24

    C'est trop mignon !

    Merci du partage ! ♥



    Hancok
    FémininAge : 32Messages : 854

    le Mer 3 Aoû 2016 - 11:14

    PA vraiment très sympathique et jolie, merci beaucoup.





    alas
    FémininAge : 25Messages : 20

    le Jeu 4 Aoû 2016 - 1:19

    Excellent. xD
    NanoiHime
    FémininAge : 18Messages : 512

    le Mar 9 Aoû 2016 - 1:17

    merciii





    lala zhang
    FémininAge : 25Messages : 297

    le Mar 9 Aoû 2016 - 19:02

    Elle est super belle la pa. Merci du partage =)
    Contenu sponsorisé

    Aujourd'hui à 3:57


      La date/heure actuelle est Sam 10 Déc 2016 - 3:57