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.


    RPG - 5 Cadre avec Overflow Brown

    Partagez
    avatar
    Offrande
    FémininAge : 26Messages : 193

    le Lun 21 Nov 2016 - 1:03



    Bonjour tout le monde :heart:

    Cela fait un certain temps que je me suis inscrite sur ce forum et comme je me suis amélioré en CSS je vous propose l'une de mes créations qui, je pense pourrait servir a pas mal de chose :heart: Cette petite créations peut servir surtout pour les RPG mais vous pouvez bien sur l'utiliser pour autre chose. Cette fiche comporte une grande CSS mais n'est pas a ajouter dans la feuille de style, tout ce trouve dans le sujet lui-même. Pour ce qui est des polices, si vous souhaitez utiliser les même que celle présenter sur la fiche, une explications est conter en bas du sujet pour installer celle-ci.

    Aperçus Normal :

    En ce qui concerne l'image : Vous pouvez la remplacer par n'importe qu'elle image de 500px de largeur sur 200px de hauteur.

    Le Code de la Fiche :heart:
    Code:
    <link href='http://fonts.googleapis.com/css?family=Pacifico|UnifrakturMaguntia' rel='stylesheet' type='text/css' /><!--------------------------------------CADRE GENERALE--------------------------->
    <div style="margin: auto; min-height: 1300px; max-height: 1300px; width: 500px; background-color: #89725B; box-shadow: 10px 10px 10px #000; border-radius: 0px 0px 40px 0px;"><!--IMAGE--><div style="width: 500px"><!--IMAGE 500 PX DE LARGEUR SUR 200 PX DE HAUTEUR--><img src="https://i37.servimg.com/u/f37/19/54/37/96/blog_h10.png" /> </div><!--NOM--><span style="color: #000; font-size: 35px; margin-left: 150px; font-family: Pacifico; text-shadow: 3px 3px 3px #ffffff;"> Le Nom du Blog </span><!--CITATION-->
    <span style="color: #ffffff; font-size: 11px; text-transform; uppercase; margin-left: 180px;"> Je suis une petite Citation ... </span><br/><br/><!--TITRE STATISTIQUE--><div style="font-size: 20px; margin-bottom: -5px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Statistique</div><!--STATISTIQUE CADRE--><div style="height: 100px; overflow: auto; border: 1px solid #ffffff; width: 400px; padding: 10px; margin-left: 50px; border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DES STATISTIQUE--><span style="color: #000!important;">✽ Blog de :
    ✽ Date de Création :
    ✽ Tags :
    ✽ Mes Trophées:
    </span></div><!--FIN CADRE STATISTIQUE--><br/><br/><!--TITRE DESCRIPTION--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Description</div>
    <!--CADRE DESCRIPTION--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DESCRIPTION--><span style="color: #000;">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</span></div><!--FIN CADRE DESCRIPTION--><br/><br/><!--TITRE ARTICLE ET AMI--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Mes Ami(e)s .... & Mes Articles :</div><br/><br/><!--DEBUT CADRE AMI et ARTICLE--><div style="margin-left: 50px;"><table><tr><td width="200px" valign="top"><!--DEBUT DIV A GAUCHE--><div style="height: 200px; overflow: auto; margin-left:5px; border: 1px solid #ffffff; padding: 0px 2px 2px 5px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><span style="color: #000;">[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
    [img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
    </span><br /></div><!--FIN DIV A GAUCHE--></td><td width="200px" valign="top"><!--DEBUT DIV A DROITE--><div style="height: 200px;overflow: auto;border: 1px solid #ffffff;padding: 0px 2px 2px 5px;border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B; "><span style="color: #000;">[x] Nom de l'Article ─ Poster le :
    [x] Nom de l'Article ─ Poster le :
    [x] Nom de l'Article ─ Poster le :
    [x] Nom de l'Article ─ Poster le :
    [x] Nom de l'Article ─ Poster le :
    [x] Nom de l'Article ─ Poster le : </span><br />
    </div><!--FIN DIV A DROITE--></td></tr></table></div><!--FIN CADRE AMIS ET ARTICLE--><br /><br/><!--TITRE COMMENTAIRE--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Commentaires</div><br/><!--CADRE COMMENTAIRE--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU COMMENTAIRE--><span style="color: #000;">Contenus du Cadre ici. Contenus du Cadre ici</span></div>

    </div>
    <!------------------------------------FIN CADRE GENERALE------------------------->

    Pour ce qui concerne les Polices utiliser ce sont les Police :
    - UnifrakturMaguntia (en noir)
    - Pacifico (en blanc)
    avatar
    Onyx
    FémininAge : 24Messages : 3050

    le Mer 21 Déc 2016 - 6:24

    Salut!

    J'ai effectué quelques corrections à ta fiche, à savoir qu'on dans une balise < br >, on doit mettre le / après le br comme ceci : < br/ > et non comme cela < /br >. Aussi, tu peux mettre les balises links directement dans le message sans avoir besoin de passer par les templates. Enfin, le "!important" ne s'utilise jamais directement dans les balises, mais seulement entre des balises < style > ou dans la feuille de CSS.

    Ce n'étaient pas des grosses erreurs et c'est corrigé, donc je valide ta fiche. Elle sera bientôt déplacée dans la section appropriée Wink

    Merci de ton partage!




      La date/heure actuelle est Jeu 14 Déc 2017 - 21:59