Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Fiche Simple mais classe

    Partagez
    MasculinAge : 20Message(s) : 147

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    FreeSpirit
    le Sam 4 Oct 2014 - 15:01
    Salut tout le monde !

    Je vous propose ceci.

    Titre du Rp

    Feat





    Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.

    Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

    Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.



    Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet?




    Code:
    <link href='http://fonts.googleapis.com/css?family=Special+Elite|Bad+Script|Great+Vibes' rel='stylesheet' type='text/css' /><div style="width: 40%; margin: auto; padding: 80px; font-size: 14px; opacity: 0.8; border:10px outset #003366;"><div style="width:50%; height:30px; padding:10px; border-radius: 50px ; 0px ; 50px; 0px;"><div style="font-family: 'Great Vibes', cursive; font-size: 35px; position: relative; color: #000000; text-align: center; margin-top:-50px; background-color:#ffffff; opacity:0.7; width: 550px; margin-left:-140px; height: 80px; border-radius:50px 250px / 250px 50px; border-left: 5px solid #003366; border-right: 5px solid #003366;border-top:2px solid #003366; border-bottom:2px solid #003366;"><div style=" font-size: 40px; padding-top:20px; font-weight: bold;">Titre du Rp</div><span style="font-family: 'Special Elite', cursive; color: grey; font-size: 20px; position: relative;"><br /><p> Feat</p> </span></div></div>


    <p>
    Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.

    Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

    Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.</p>

    <p><span style="text-align:justify>
    Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.


    Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

    Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.</p></span>

    -<span style="color: #00cc99;">Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet?
    </span>

    <div style="font-size: 10px;  color:#000000; text-align: center; margin:auto;"> <a href="http://www.never-utopia.com/">(c) Codage By FreeSpirit</a></div>
    </div>


    Dernière édition par FreeSpirit le Sam 4 Oct 2014 - 16:39, édité 30 fois
    MasculinAge : 20Message(s) : 2102

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Alzufen
    le Sam 4 Oct 2014 - 15:21
    Bonjour à toi Wink

    Déjà merci du partage ^^ J'ai quelques petits trucs à dire sur ton LS mais ce n'est pas à prendre mal plutôt des conseils... ^^

    Déjà la grosse erreur c'est qu'on ne mélange jamais deux langages (le CSS et le HTML étant complémentaire c'est différent) en clair on ne code pas en HTML pour rajouter du BBCODE dedans, soit on fait tout en BBCODE soit on fait tout en HTML. Je rappelle que le BBCODE est retransmis en HTML mais généralement chaque balise est équivaut à une div ou une span "style" et du coup c'est pas forcément approprié en plus de pouvoir causer des soucis, c'est aussi un soucis de propreté ^^... Il y a pas mal de balise qui ont leur équivalent en HTML sans pour autant changer leur contenu ^^ Je te renvoi à ce lien pour plus d'informations > http://www.never-utopia.com/t42832-aide-les-erreurs-les-plus-courantes-en-codage

    Ensuite, c'est plus des conseils qu'autre chose :

    ¤ Déjà, la balise center n'est plus utilisé depuis longtemps et pourrais causer des erreurs à l'avenir dans tes codes, pour cause que celle-ci pourrait ne plus être interpréter, il y a d'autres façon pour centrer quelque chose, renseigne toi sur NU ou sur le WEB Wink Ce n'est qu'un conseil bien évidemment pas une obligation ^^

    ¤ Tu as moyen de réduire le code en groupant tes balises "link" en une seule, en séparant chaque police par | (alt + 6)

    ¤ Le blockquote n'est pas censé être utilisé pour faire un retrait sur le côté gauche mais pour faire un bloc de citation, blockquote voulant dire "Bloc citation", souvent il est utilisé à l'abus pour faire des retraits c'est pas du tout adéquate.

    ¤ Les BR sont censé être utilisé pour faire des "retour à la ligne" et non un saut de ligne, si on veut faire un saut de ligne nous avons la balise "p" ou (paragraphe) ou encore simplement les div. De plus, un br se ferme comme une balise image (et link aussi, tu ne les as pas fermé non plus). C'est à dire "br /" et non "/br" ^^

    ¤ Un lien ne se fini pas par // mais ça c'est un détail Wink

    ¤ Le Background-repeat: no-repeat ne sert à rien si tu n'as pas d'image de fond en background, ça fais du code en plus inutile ^^

    ¤ Le © pour Copyright n'est en réalité pas autorisé (mais ça, c'est un truc que m'a transmis Jack il y a peu XD), moi-même je l'utilisais avant (et il faut que je change ça dans mes LS) mais ce n'est théoriquement pas permis si tu ne l'as pas payé. Le mieux étant de mettre un (c) qui est le dérivé pour "crédit" ^^

    Je crois que c'est tout et c'est déjà énorme, essaye de les appliquer quand même petit à petit, certains ne sont pas trop dur (notamment le coup du Copyright) pour le reste, ce sont des détails mais ça à son importance quand même ^^)


    MasculinAge : 20Message(s) : 147

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    FreeSpirit
    le Sam 4 Oct 2014 - 15:55
    Merci pour ces conseils, bon pas de mélange BBCODE/HMTL on est d'accord ça je peux faire :)

    ¤ Déjà, la balise center n'est plus utilisé depuis longtemps et pourrais causer des erreurs à l'avenir dans tes codes, pour cause que celle-ci pourrait ne plus être interpréter, il y a d'autres façon pour centrer quelque chose, renseigne toi sur NU ou sur le WEB Wink Ce n'est qu'un conseil bien évidemment pas une obligation ^^
    -> Utilisation du padding/Margin ?
    ¤ Tu as moyen de réduire le code en groupant tes balises "link" en une seule, en séparant chaque police par | (alt + 6)
    Code:
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'| 'http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
    Comme ceci ?

    ¤ Le blockquote n'est pas censé être utilisé pour faire un retrait sur le côté gauche mais pour faire un bloc de citation, blockquote voulant dire "Bloc citation", souvent il est utilisé à l'abus pour faire des retraits c'est pas du tout adéquate.
    -> Padding ?

    ¤ Les BR sont censé être utilisé pour faire des "retour à la ligne" et non un saut de ligne, si on veut faire un saut de ligne nous avons la balise "p" ou (paragraphe) ou encore simplement les div. De plus, un br se ferme comme une balise image (et link aussi, tu ne les as pas fermé non plus). C'est à dire "br /" et non "/br" ^^
    Code:
    <br />TEXTE </br>
    ? sinon on utilise
    Code:
     <p>

    Code:
    <link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'| 'http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
    +
    Code:
    </link>
    ou
    Code:
    </a>
    ? Comme ceci ?

    ¤ Un lien ne se fini pas par // mais ça c'est un détail Wink
    -> Juste Erreur lors du copier/coller

    ¤ Le Background-repeat: no-repeat ne sert à rien si tu n'as pas d'image de fond en background, ça fais du code en plus inutile ^^
    -> Ok, je réutilise quelques fois des codes c'est pour ça :)

    ¤ Le © pour Copyright n'est en réalité pas autorisé (mais ça, c'est un truc que m'a transmis Jack il y a peu XD), moi-même je l'utilisais avant (et il faut que je change ça dans mes LS) mais ce n'est théoriquement pas permis si tu ne l'as pas payé. Le mieux étant de mettre un (c) qui est le dérivé pour "crédit" ^^
    -> C'est noté :)

    MasculinAge : 20Message(s) : 2102

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Alzufen
    le Sam 4 Oct 2014 - 16:18
    Alors, d'abord pour les liens ce serait plus :

    Code:
    <link href='http://fonts.googleapis.com/css?family=Special+Elite'|Great+Vibes rel='stylesheet' type='text/css' />

    Et la balise se ferme comme je viens de le faire Wink

    Puis, pour les br c'est juste < br / > et non < /br > tu la fermes directement dans la balise comme une img ou une balise link ^^ Par exemple :

    Code:
    Texte sur la ligne 1 <br />
    Texte sur la ligne 2
    <p>Saut de ligne</p>

    Ce qui donnera

    Texte sur la ligne 1
    Texte sur la ligne 2

    Saut de ligne


    Sache aussi que ForumActif fais des br automatiques, donc si tu mets un retour à la ligne dans ton message (ou un saut de ligne) ça deviendra forcément 1 br (ou deux pour le saut de ligne) chaque retour à la ligne est égal à un BR sous FA ^^


    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Mer 22 Oct 2014 - 16:44
    Hey !

    Tu as eu le temps de modifier ton code FreeSpirit ? Il reste des balises mal fermées, penses à relire Wink


    Je mets les voiles, que le vent te soit favorable matelot !
    MasculinAge : 21Message(s) : 365

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kiki85
    le Lun 10 Nov 2014 - 0:16
    merci
    FémininAge : 16Message(s) : 63
    Camy
    le Mar 23 Déc 2014 - 22:55
    Très joli !


    Le poro de service ^^
    FémininAge : 19Message(s) : 4
    Tori Aoshiro
    le Ven 20 Fév 2015 - 17:58
    Très simple mais sympa! ^^
    MasculinAge : 18Message(s) : 6
    RayJak
    le Sam 7 Mar 2015 - 12:31
    Merci elle est cool mais simple ! =)
    FémininAge : 16Message(s) : 17
    Koneko-chan
    le Ven 24 Avr 2015 - 18:39
    Merci ^^
    MasculinAge : 17Message(s) : 7
    Pandame
    le Ven 1 Mai 2015 - 12:09
    Merci pour cette fiche !
    FémininAge : 27Message(s) : 46
    Faelene
    le Lun 18 Mai 2015 - 20:29
    joli, merci :)
    FémininAge : 102Message(s) : 71
    Ellen Lesley
    le Dim 24 Mai 2015 - 3:32
    Simple, mais parfait (:
    FémininAge : 26Message(s) : 84
    Luunalight
    le Ven 12 Juin 2015 - 14:59
    Merci beaucoup !
    FémininAge : 20Message(s) : 41
    Laura.W
    le Mar 28 Juil 2015 - 14:11
    Très classe, à tester, merci beaucoup !
    FémininAge : 16Message(s) : 27
    Froufy
    le Jeu 2 Juin 2016 - 18:20
    Super!! Merci beaucoup!


    1+1= 4
          2
    3
    FémininAge : 24Message(s) : 1355

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Jeu 2 Juin 2016 - 19:07
    Merci pour le partage !
    MasculinAge : 23Message(s) : 5
    Lord Vlad
    le Mer 10 Aoû 2016 - 19:27
    Wow, joli, je l'adopte, merci du partage et du bon boulot :)
    Contenu sponsorisé
    Aujourd'hui à 6:54

      La date/heure actuelle est Sam 1 Oct 2016 - 6:54