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.


    Mission#2 - Application cursus [apprenti]

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 10 Déc 2013 - 10:51

    Bonjour !

    Dans cette seconde mission d'Architecte je vous propose simplement d'appliquer deux étapes du cursus pour réaliser une mise en forme de message "officiel" (pour votre forum par exemple) dans la même idée que ce qu'il y a sur N-U (mise en forme du règlement, des annonces, bons de commandes etc...).
    Pour cela vous aurez besoin de deux étapes du cursus codage :
    - Etape 1 (titres)
    - Etape 2 (paragraphes)

    Vous aurez là toutes les informations pour réaliser une fiche type d'informations (règlement par exemple) selon le modèle suivant :
    Titre général
    Titre secondaire
    Contenu 1
    Titre secondaire 2
    Contenu 2
    Titre secondaire 3
    Contenu 3

    Tout est libre : les couleurs, les polices... c'est à votre choix. Le tout devra rester SANS IMAGES (ni en fond ni en contenu), et vous devrez mettre au moins un lien dans l'un des paragraphes de contenu.
    Pour simuler les paragraphes de contenu je vous propose le site Faux texte qui génère des faux textes pour vos mises en page.

    Postez vos résultats à la suite avec le code correspondant entre balises "code".

    Et le principal : amusez-vous Wink

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !


    Dernière édition par Sparrow-style le Lun 6 Jan 2014 - 9:12, édité 1 fois



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mar 10 Déc 2013 - 22:11

    Bouh!

    Héhé, je suis la première Cool
    Je me suis permise d'ajouter une citation, mais j'espère que ce n'est pas grave ><

    Contexte de Libertia
    « Toute fin ne demande qu'à devenir commencement »


    La Brume

    Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.


    Libertia

    Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.


    Rosa Maria

    Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.



    Et voici mon code:


    Dernière édition par Onyx le Jeu 12 Déc 2013 - 8:56, édité 1 fois (Raison : Je fail en copier/coller et le code n'était même pas exactement le même que celui de l'aperçu ><)
    avatar
    Hiro'
    MasculinAge : 20Messages : 127

    le Mar 10 Déc 2013 - 23:26


    Règlement du forum


    Article 1
    Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.


    Article 2
    Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.


    Article 3
    Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.


    Design de Hiro' - Never-Utopia


    Voilà ma participation de ce soir ! Ca faisait bien longtemps que je n'avais pas codé - d'où la pauvreté visuelle de cette fiche  :toto: 

    Bonne soirée les NUtopiens !


    Dernière édition par Hiro' le Jeu 12 Déc 2013 - 19:28, édité 1 fois



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 11 Déc 2013 - 9:22

    Très beaux résultats !

    Puis-je vous demander si vous avez lu ou relu les étapes données avant de faire vos fiches (ou pendant) ou bien si vous avez fait juste avec vos souvenirs/connaissances personnelles ?



    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Mer 11 Déc 2013 - 11:46


    Titre général

    Titre secondaire

    Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque sollemnitate imperator Mediolanum ad hiberna discessit. Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Titre secondaire

    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. Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.

    Titre secondaire

    Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna.


    Narja - Never Utopia




    Et pour répondre à ta question, cap'taine, les deux ! j'suis allée pécher deux-trois trucs que j'utilise rarement dans le cursus, comme le "letter-spacing" par exemple ^^ mais sinon, souvenir de lecture =) (et petit test de lettrine aussi, ça faisait un moment que je voulais tester xD)


    Dernière édition par Narja le Jeu 12 Déc 2013 - 11:35, édité 2 fois



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Hiro'
    MasculinAge : 20Messages : 127

    le Mer 11 Déc 2013 - 20:06

    Très joli, Narja !
    Sparrow : Je ne l'ai réalisé qu'avec mes connaissances sans jeter un nouveau coup d'oeil au cursus. Mais je vais m'empresser de le faire, parce que je ne sais plkus utiliser le float pour faire une lettrine comme ma VDD.
    Au fait, on peu inclure du CSS dans nos message, maintenant ? On n'arrête plus le progrès ! :o



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Mer 11 Déc 2013 - 21:05

    Ah j'ai pas utilisé le float, enfin xD pas que ^^" je me suis basée sur le pseudo-élement (ou la pseudo-classe j'ai un doute, merde) "::first-letter' tu lui colles un "display: block" pour gérer la lettrine comme un bloc, tu mets un "height" de façon à avoir une hauteur particulière sur laquelle il n'y aura pas de texte pour prendre la place, tu joues avec les margin pour situer la lettre dans le bloc, et, oui, en effet, tu cases un float ^^'"

    J'ai d'ailleurs constaté que le pseudo-élément (ou la pseudo classe, je sais toujours plus, ça va tellement me tarabiscoter que je vais aller vérifier d'ailleurs) "::first-line" marchait, mais pas "::first-word" c'est pourri, un seul mot de couleur différente, ça aurait été carrément plus classe que toute la ligne =/ *boude*

    Après vérification, c'est bien un pseudo élément, je suis trop forte /s'envoie un bouquet de fleurs et file se cacher xD/



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mer 11 Déc 2013 - 21:19

    Rebouh!
    J'avais déjà lu le cursus après m'être inscrite et je l'ai relu pour la mission, mais je me suis surtout basée sur ma propre expérience (et en fait, j'étais en train de faire cette fiche pour un ami quand la mission est sortie, donc je l'ai complétée et mis ici Razz)



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 12 Déc 2013 - 7:57

    Merci pour vos essais et vos réponses !

    Alors attention pour les liens dans les messages, c'est d'ailleurs pour ça que j'ai demandé d'en mettre un^^, car les liens sur N-U sont déjà mis en forme, donc ça vous impose un css à "contrer". D'ailleurs Narja l'a tellement bien contré qu'elle a mis tout les liens de la page de la couleur qu'elle a voulu, même les liens de la navigation de N-U xD.

    Code:
    a{color: #C84150!important; transition: 1s; font-weight: bold} a:hover{color: #781A4D!important; transition: 1s; font-weight: bold}

    Il vaut mieux dans ce cas mettre une "class" au lien pour ne modifier que celui-là Razz



    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Jeu 12 Déc 2013 - 11:28

    houps xD *sors* (j'avais même pas calé, bah, avoue, le rose, c'est tendance? non? Vraiment pas? Vraiment vraiment pas? xD Bon, j'édite mon message avec un class xD)

    Edit: En fait ça marche pas avec un class. On peut pas appliquer de "class" à une balise de liens?  scratch  faut mettre un span qui encadre le lien avec la mise en forme?

    Re-édit : Autant pour moi, erreur de syntaxe de ma part, j'avais mis

    Code:
    .nom-de-la-classe a {}

    au lieu de

    Code:
    a.nom-de-la-classe {}



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 12 Déc 2013 - 14:06

    J'ai failli me faire lyncher sur la CB parce que je suggérais un prochain thème fuschia alors non, ce n'est visiblement pas tendance xD

    Ah oui, bien vu Razz et merci Very Happy (mes liens sont saufs XD)



    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Sam 14 Déc 2013 - 17:31

    Voilà pour moi



    Un joli titre !



    Sous-titre 1

    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.



    Sous-titre 2

    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.



    Sous-titre 3

    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.

    Never-utopia



    Edit :
    Code:
    <div style="width: 90%; margin: auto; background-color:#C8AD7F ; border-top: 4px solid #ac6140; border-bottom: 4px solid #ac6140; border-left: 1px dashed #ac6140; border-right: 1px dashed #ac6140; border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -webkit-border-radius: 20px; -htm-border-radius: 20px;padding-bottom:4px;">
    <span style="display: block; text-align:center; border-top: 5px double #ac6140;border-bottom: 5px double#ac6140; position: relative; width: 100%; height: 35px; background-color: #C8AD7F ;font-family: trebuchet;font-size: 24px; color: #FFFFFF; text-align: center; font-weight: bold; text-shadow: 0px 0px 5px #000000;">
    Un joli titre !

    </span>
    <center>
    <span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 1</span>
    <div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140; text-align:justify;padding:5px;">
    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
    </div></center>

    <center>
    <span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 2</span>
    <div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140;text-align:justify;padding:5px; ">
    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
    </div></center>

    <center>
    <span style="display: block; text-align: left; padding-left: 20px; margin-bottom: -20px; font-family: arial narrow; font-size: 18px; letter-spacing: 4px; color: #FFFFFF; font-style: italic; text-shadow: 0px 0px 5px #000000;"> Sous-titre 3</span>
    <div style="width: 90%;border-style: dashed; border-width:1px; border-color:#ac6140;color:#ac6140;text-align:justify;padding:5px;">
    Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.
    </div>
    <a href="http://www.never-utopia.com/" style="color:#ffffff;font-size:10px;">Never-utopia</a></center>
    </div>


    Dernière édition par Len kagamine le Sam 14 Déc 2013 - 20:03, édité 1 fois
    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Sam 14 Déc 2013 - 20:01

    Très joli Len!
    Ce serait encore mieux si tu donnais ton code pour qu'on puisse le voir, quite à le mettre en hide ^^

    Si je pouvais me permettre une suggestion, j'ajouterais un petit padding dans tes bloc de texte, cela rendrait la lecture plus facile si le texte ne serait pas collé à la bordure.



    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Sam 14 Déc 2013 - 20:05

    Autant pour moi, j'avais oublié de mettre le code ^^
    J'ai édité et j'ai suivi tes conseils pour le padding ^^



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 21 Déc 2013 - 14:27

    Oui je suis d'accord sur le padding, je pense que j'aurais fait la même remarque Razz Ca me gêne lorsqu'il n'y en pas...
    Belle fiche en tout cas, bravo ! x)



    avatar
    Këdherys
    MasculinAge : 20Messages : 130

    le Dim 29 Déc 2013 - 19:37

    je ne sais pas si on peut encore poster mais je vois un joli logo de "en cours ..." du coup je poste pour me remettre dans le bain ^^'



    Bulletin Officiel


    Et si ...

    Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.

    ... Les lapins ...

    Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.

    ... te mangeaient ?

    Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.

    ©2013-2014 Këdherys - Never Utopia



    Code:

    <link href="http://fonts.googleapis.com/css?family=Miniver|Averia+Serif+Libre|Satisfy" rel="stylesheet" type="text/css">

    <legend style="font-size:24px; font-family:'Satisfy'; padding:6px; position:relative; top:28px; left:20px; background-color:#a9b1ff; border-radius:5px; border:2px solid #02376c; box-shadow:2px 2px 5px black;">Bulletin Officiel</legend>
    <fieldset style="width:420px; background-color:#a9b1ff; border-radius:5px; border:2px solid #02376c; box-shadow:2px 2px 5px black; padding-top:10px;">

    <span style="display:block; margin-left:10px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;"> Et si ... </span>

    <span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">H</span><span style="float:both; color:#3966a2;">aec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in <a href="http://www.google.fr/" title="Googler ça ?">ceteris</a> peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.</span></span>

    <span style="display:block; margin-left:120px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;">... Les lapins ... </span>

    <span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">E</span><span style="float:both; color:#3966a2;">t quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span></span>

    <span style="display:block; margin-left:220px; font-size:24px; font-family:'Satisfy'; color:#02376c; text-shadow: 2px 2px 5px black;">... te mangeaient ?</span>

    <span style="text-align:justify; display:block; border-bottom:2px dotted #02376c; padding-bottom: 10px;"><span style="display:block; position:relative; top:-8px;float:left; font: 24px bolder;">E</span><span style="float:both; color:#3966a2;">t quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri. </span></span>

    <center><span style="font-size:8px">©2013-2014 Këdherys - <a href="http://www.never-utopia.com/forum" title="Forum d'entraide">Never Utopia</a></span></center>
    </fieldset>




    avatar
    Mélaïna
    FémininAge : 29Messages : 60

    le Lun 30 Déc 2013 - 11:47

    Voilà ma petite contribution (je suis débutante faut pas m'en vouloir)
    Par contre, une petite question, pour les préfixes qu'on adapte aux différents navigateurs (-o- -moz-...) on garde le tiret devant aussi ?

    Pour la question: je me suis un peu servie du cours pour le faire car j'avais quelques doutes mais sinon j'ai quasi tout fait sans.

    Voilà merci pour l'exercice et si vous avez des remarques hésitez pas !


    Présentation

    Qui êtes-vous ?
    Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur,
    ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis
    latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido
    splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu
    repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et
    incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut
    viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.


    Qui jouez-vous ?
    Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur,
    ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis
    latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido
    splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu
    repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et
    incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut
    viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.


    Exemple de RP
    Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur,
    ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis
    latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido
    splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu
    repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et
    incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut
    viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Lun 30 Déc 2013 - 13:58

    Super la fiche pour une débutante 'o'




    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Lun 30 Déc 2013 - 14:48

    Tu avais oublié de fermer 3 div, par contre. Et sur un forum aux templates codés comme ici ça peut poser de gros problèmes d'affichage alors faut faire attention et vérifier :)



     
    avatar
    Mélaïna
    FémininAge : 29Messages : 60

    le Lun 30 Déc 2013 - 16:39

    Merci !

    Mince pour les balises, je les ai rajoutées après, du coup j'y ai pas pensé ! Je ferai plus attention :)
    avatar
    Hiro'
    MasculinAge : 20Messages : 127

    le Lun 30 Déc 2013 - 20:08

    Len kagamine a écrit:Super la fiche pour une débutante 'o'

    Ouaip, jolie fiche effectivement. Les seules remarques qu'on peut faire sont sur le plan visuel (pas négligeable cependant). L'ombre des sous-titre est un peu gênante. Elle est trop éloignée, ce qui nuit à la lisibilité. Généralement, je ne vais pas plus loin que 2px pour rester dans l'agréable à lire et à voir. La police utilisée pour ces même titres est trop basiques. Je te conseille de visiter Google Fonts. Tu y trouveras sûrement ton bonheur. Pour les utiliser :
    Code:
    <link href='http://fonts.googleapis.com/css?family=police+ici' rel='stylesheet' type='text/css'>
    Ajoute ceci tout en haut de ton message. Attention à mettre des + à la place des espaces si la police a un nom composé. Si tu veux utiliser plusieurs police, c'est comme ça :
    Code:
    <link href='http://fonts.googleapis.com/css?family=police+ici|police+2+ici|police+3+ici' rel='stylesheet' type='text/css'>

    Ensuite, tu n'as qu'à appliquer la police avec un bête :
    Code:
    <span style="font-family:'police ici';">Blablabla</span>
    Tu remarqueras que les + ne sont plkus nécéssaires, en revanche, je te recommande mettre le nom de la police entre apostrophes. Je crois que sans, ça ne fonctionnera pas. Respecte bien les majuscules et minnuscules également.

    Deuxième souci sur le plan visuel : les ombres des cadres. Le blanc, sur ce bleu, ça fait tâche. Je te conseille un basique noir, avec une toute petite ombre, bien que je ne sois pas très bon dans le domaine. Tu peux aussi mettre une ombre tout autour de ton cadre, comme ceci :
    Code:
    <div style="box-shadow:0 0 3px 3px black;"></div>
    (avec les height, width, nécéssaires, évidemment.)
    Le troisième #px donne un peu d'ombre autour du bloc et le quatrième donne l'étendue (spread) (merci à Onyx de me l'avoir appris Very Happy).

    Oualà. En tous cas, côté code, y a pas grand-chose à redire (les div oubliées, ça m'arrivait tout le temps avant, et ça arrivait aussi à Neva, je suis sûr  :ange: )

    Voilà, donc bien joué !



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    avatar
    Mélaïna
    FémininAge : 29Messages : 60

    le Lun 30 Déc 2013 - 20:54

    Merci pour les conseils, je vais essayer d'appliquer tout ça (pas ce soir pas le temps) et je vous montrerai le résultat ! ^^

    Et merci pour le code pour mettre une police autre que les standards, j'ai mis une basique car justement je ne le connaissais pas et je n'étais pas sûre de toutes les polices que l'on pouvait utiliser !

    La prochaine sera mieux Wink
    avatar
    Killae Adams
    FémininAge : 17Messages : 114

    le Jeu 2 Jan 2014 - 22:33








    Règlement




    Please Allow Me to indoduce myself



    Apprendre à démêler ce qui était inévitable, paraît-il, votre héritage. Vieillard, il se désole, puis aussitôt arrêté et accusé de meurtre. Privé de ce complément naturel de l'action brusque et brutale. Maintenez-vous toujours que si je pouvais, à la volée. Partout des cocotiers d'une venue superbe, des regards inquiets aux deux bouts de la terre ne se dérangent jamais. Pourfendre, voilà comment je me serais marié. Pleurez sans contrainte, donner à son mari : immobile et pâle comme une cire. Néanmoins lorsque la première note, comme un vulgaire adolescent boutonneux...
    Moulins suivit peu après cet exemple ; il est plus d'une, en soulevant un poids de vivres. Rose la suivit en trébuchant, la pelle sur les tablettes égyptiennes auxquelles leur ancienneté semble donner le droit de parler le jour même, j'ai seulement des cocottes dans le ventre, jusqu'à minuit ? Discuter un ordre, que le pourpre sombre de la cabine de pilotage ! Étant près de la rive. Existait-il un autre moyen, pour le dire en passant, mille questions, en remuant les lèvres. Observez de plus qu'autrefois ce qu'elle désirait savoir. Donnant le bras à sa mère qui était toujours à sec, ne pouvaient que lui faire grand plaisir, répliqua le capitaine. Favorisé par sa proximité de deux ou trois dénouements également logiques...




    R.E.S.P.E.C.T. and ABC


    Apprendre à démêler ce qui était inévitable, paraît-il, votre héritage. Vieillard, il se désole, puis aussitôt arrêté et accusé de meurtre. Privé de ce complément naturel de l'action brusque et brutale. Maintenez-vous toujours que si je pouvais, à la volée. Partout des cocotiers d'une venue superbe, des regards inquiets aux deux bouts de la terre ne se dérangent jamais. Pourfendre, voilà comment je me serais marié. Pleurez sans contrainte, donner à son mari : immobile et pâle comme une cire. Néanmoins lorsque la première note, comme un vulgaire adolescent boutonneux...
    Moulins suivit peu après cet exemple ; il est plus d'une, en soulevant un poids de vivres. Rose la suivit en trébuchant, la pelle sur les tablettes égyptiennes auxquelles leur ancienneté semble donner le droit de parler le jour même, j'ai seulement des cocottes dans le ventre, jusqu'à minuit ? Discuter un ordre, que le pourpre sombre de la cabine de pilotage ! Étant près de la rive. Existait-il un autre moyen, pour le dire en passant, mille questions, en remuant les lèvres. Observez de plus qu'autrefois ce qu'elle désirait savoir. Donnant le bras à sa mère qui était toujours à sec, ne pouvaient que lui faire grand plaisir, répliqua le capitaine. Favorisé par sa proximité de deux ou trois dénouements également logiques...




    Play the Game


    Apprendre à démêler ce qui était inévitable, paraît-il, votre héritage. Vieillard, il se désole, puis aussitôt arrêté et accusé de meurtre. Privé de ce complément naturel de l'action brusque et brutale. Maintenez-vous toujours que si je pouvais, à la volée. Partout des cocotiers d'une venue superbe, des regards inquiets aux deux bouts de la terre ne se dérangent jamais. Pourfendre, voilà comment je me serais marié. Pleurez sans contrainte, donner à son mari : immobile et pâle comme une cire. Néanmoins lorsque la première note, comme un vulgaire adolescent boutonneux...
    Moulins suivit peu après cet exemple ; il est plus d'une, en soulevant un poids de vivres. Rose la suivit en trébuchant, la pelle sur les tablettes égyptiennes auxquelles leur ancienneté semble donner le droit de parler le jour même, j'ai seulement des cocottes dans le ventre, jusqu'à minuit ? Discuter un ordre, que le pourpre sombre de la cabine de pilotage ! Étant près de la rive. Existait-il un autre moyen, pour le dire en passant, mille questions, en remuant les lèvres. Observez de plus qu'autrefois ce qu'elle désirait savoir. Donnant le bras à sa mère qui était toujours à sec, ne pouvaient que lui faire grand plaisir, répliqua le capitaine. Favorisé par sa proximité de deux ou trois dénouements également logiques...

    ©
    Fait par Killae Adams
    Merci de demander si vous voulez prendre.




    Tu peux nous expliquez deux trois trucs bizarres ?
    .... L'origine de ce halo si ''puissant'' vient du fait que j'ai demandé à ma mère si elle trouvait ça bien, or le halo n'était pas assez puissant pour ses lunettes, donc oui il est ''un peu'' augmenté. 8)Mais quoi ? C'est beau... non ? .-. De plus, non madame ça ne fait pas moche R.E.S.P.E.C.T. en majuscule et avec des points, puis va te documenter, tous les titres sont des chanson é_e Et sinon, les couleurs sont faites pour aller avec ce thème hitskin.
    Ca fait trois trucs 8D Voici le code.




    Fait pour Mozilla
    avatar
    You.Fool
    FémininAge : 21Messages : 39

    le Sam 4 Jan 2014 - 22:28

    Coucou !
    Je me lance pour mon premier essai en code j'espère qu'il n'y a pas de soucis :

    Règlement du forum


    Introduction
    Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.


    Partie 1
    Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.


    Partie 2
    Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.


    Code pour Never Utopia


    Code:
    <div style=" margin-top: 40px;"/><span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Règlement du forum </span><div style="background-color: #000F12; width: 500px; margin: auto; margin-top: 20px; border-bottom: 3px solid #004751;"/><br><br><span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center; "> Introduction </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.</div>

    <span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Partie 1 </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.</div>

    <span style="display: block; font-size: 36px; font-family: trebuchet; color: #759A9F; text-align: center;"> Partie 2 </span><div style="width: 400px; border: 4px solid #004751; text-align: justify; letter-spacing: -0.5px; background-color: #000F12; margin: auto; padding: 20px; font-family: verdana; color: #9F9F9F; margin-top: -5px;">Cum autem commodis intervallata temporibus convivia longa et noxia coeperint apparari vel distributio sollemnium sportularum, anxia deliberatione tractatur an exceptis his quibus vicissitudo debetur, peregrinum invitari conveniet, et si digesto plene consilio id placuerit fieri, is adhibetur qui pro domibus excubat aurigarum aut artem tesserariam profitetur aut secretiora quaedam se nosse confingit.</div>

    </div><span style="display: block; font-family: arial black; color: #999999; font-size: 10px; text-shadow: #00000; text-align: center; margin-top: -30px; ">Code pour <a href="http://www.never-utopia.com/forum style="color: #86D3DF;> Never Utopia </a> </span></div>



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 6 Jan 2014 - 9:10

    Ton code est superbe je trouve ! Merci pour ton essai, il est très réussi x) Si j'ai juste une petite chose à redire c'est l'ombre blanche qui est restée sur le lien "Never-Utopia" en bas de code. Mon css configure les liens avec cette ombre et une couleur précise, si tu souhaites passer par dessus mon css il te faut ajouter un "!important" (pour la couleur par exemple) et penser à enlever l'ombre (text-shadow: none;).
    Valà^^

    Bravo à tous ! Je clôture ainsi cette mission et je vous encourage à aller poster vos jolies fiches dans le Libre Service (si vous le souhaitez bien sûr) dans la section Règlements, que je viens d'ajouter pour l'occasion Very Happy



    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 9:56