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
    avatar
    Cheshire Cat
    FémininAge : 19Messages : 864

    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



    avatar
    Youp
    FémininAge : 22Messages : 574

    le Jeu 19 Mai 2016 - 3:37

    Elle est grave classe ta PA ! Franchement bravo ^^



    avatar
    Cheshire Cat
    FémininAge : 19Messages : 864

    le Ven 27 Mai 2016 - 0:22

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



    avatar
    Nihil Scar Winspeare
    Messages : 4621

    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



    avatar
    Cheshire Cat
    FémininAge : 19Messages : 864

    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:



    avatar
    Nihil Scar Winspeare
    Messages : 4621

    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



    avatar
    Cheshire Cat
    FémininAge : 19Messages : 864

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



    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Sam 16 Juil 2016 - 18:15

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



     
    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Dim 17 Juil 2016 - 3:40

    Merci



    avatar
    missphan
    FémininAge : 34Messages : 154

    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.
    avatar
    Ryukaï
    MasculinAge : 19Messages : 611

    le Dim 17 Juil 2016 - 21:52

    Roh! c'est classe! Merci Ches!



    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Dim 17 Juil 2016 - 23:41

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

    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 !
    avatar
    Lexis
    FémininAge : 27Messages : 40

    le Lun 18 Juil 2016 - 13:31

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

    le Mer 20 Juil 2016 - 1:13

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

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

    le Mer 20 Juil 2016 - 12:33

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

    le Mer 20 Juil 2016 - 20:28

    Mercii !
    avatar
    Wayat
    MasculinAge : 19Messages : 4

    le Ven 22 Juil 2016 - 0:04

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

    le Ven 22 Juil 2016 - 2:55

    Merci :)
    avatar
    br4nd0n
    Age : 23Messages : 50

    le Lun 25 Juil 2016 - 15:01

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




    Kit by Adil94
    avatar
    FROSTendoloris
    FémininAge : 23Messages : 56

    le Mar 2 Aoû 2016 - 20:24

    C'est trop mignon !

    Merci du partage ! ♥



    avatar
    Hancok
    FémininAge : 33Messages : 962

    le Mer 3 Aoû 2016 - 11:14

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





    avatar
    alas
    FémininAge : 26Messages : 20

    le Jeu 4 Aoû 2016 - 1:19

    Excellent. xD
    avatar
    NanoiHime
    FémininAge : 18Messages : 557

    le Mar 9 Aoû 2016 - 1:17

    merciii



    avatar
    lala zhang
    FémininAge : 26Messages : 336

    le Mar 9 Aoû 2016 - 19:02

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


      La date/heure actuelle est Sam 22 Juil 2017 - 12:37