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.


    Liens Simples, Gris et Epurés

    Partagez
    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Mer 10 Sep 2014 - 10:48

    Liens Simples, Gris et Epurés



    Bonjour !

    Je continue sur ma lancée avec une fiche de liens ce coup-ci, inspirée du travail de Halloween et de Sparrow Style. Enjoy !

    Parce qu'il s'agit d'un travail regroupant plusieurs éléments, vous pouvez aller voir la Fiche de Présentation et le Journal de Bord que j'ai codés dans le même genre.

    N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et à confectionner un superbe QEEL qui s'inscrit dans le même design.


    Aperçu:
    Cliquez ici


    J'ai choisi de ne pas mettre le code sous hide, mais un petit mot gentil, des encouragements ou des critiques constructives seront très appréciées ! N'hésitez surtout pas à me donner votre avis !
    Cela m'aidera à m'améliorer, alors un grand merci à ceux qui prendront le temps de le faire Very Happy !





    Version brute de décoffrage



    Code Brut :




    Code:
    <div style="background-color: #E4E4E4; width: 530px ; margin: auto; padding-bottom: 10px; box-shadow: 3px 3px 5px #000000; color: #353535; font-family: 'Verdana'; font-size: 11px;"><img src="http://38.media.tumblr.com/5a95208db6bdbc9b447419e30f0cb7e4/tumblr_mfc7ekAafn1r6zkm3o1_500.gif" style="width: 100%; heigh: 280px;"/><div style="background-color: #F0F0F0; border-top: 4px solid #B0C3AB; border-bottom: 2px solid #BEBEBE; height: 40px; width: 100%;"><div style="text-align: center; margin-top: 10px; font-family: georgia; font-size: 36px; text-shadow: 1px 1px 2px #1A1A1A; color: #353535;"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Interesting...</span></div></div><div style="margin: -3px 0 0 10px; color: #BEBEBE; font-size: 10px; font-family: arial narrow;">feat Personnalité choisie</div><div style="text-align: right; margin: -18px 10px 0 0; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div>

    <div style="background-color: #8C8C8C; margin: auto; padding: 1px; width: 245px; height: 40px;"><div style="background-color: #E6E6E6; width: 245px; height: 20px; border-top: 1px solid #FEFEFE;"></div><div style="background-color: #B1B1B1; border-bottom: 2px solid #9B9B9B; width: 245px; height: 18px;"></div></div>
    <div style="background-color: #EFF5FF; margin: -56px auto 0 auto; width: 227px; height: 22px; border: 1px solid #384B69; padding: 5px; color: #483047; font-size: 15px; font-family: calibri; font-variant: small-caps;"><marquee scrollamount="3">Age • Situation • Métier • Donnée</marquee></div>


    <div style="font-family: georgia; margin: 0 0 -18px 315px; font-size: 24px; color: #B0C3AB;">So you are</div><div style="font-family: georgia; margin: 0 0 -22px 80px; font-size: 24px; color: #B0C3AB;">I think</div>
    <div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;"><table><td>
    <div style="background-color: #8D838D; height: 1px; margin: -7px 0 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin-left: 30px;"></div></div>
    <div style="background-color: #ffffff; width: 190px; height: 300px; margin-left : 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- caractère -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.

    <span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- histoire -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></td><td>
    <div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 18px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 18px;"></div></div>
    <div style="background-color: #ffffff; height: 300px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 16px; font-family: impact; color: #DF2626;">{busy}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.

    <span style="font-size: 16px; font-family: impact; color: #6AD030;">{free!}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.

    <span style="font-size: 16px; font-family: impact; color: #A530D0;">{reserved}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.</div></td></table></div>

    <div style="margin: 0 0 -22px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">I know</div>
    <div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
    <div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
    <table><tr><td><img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin-left: 30px;"></td><td><div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr><tr><td>

    <img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin-left: 30px;"></td><td><br /><div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr></table></div><a style="display: block; margin-top: -3px; text-align: center; color: #BEBEBE; font-size: 10px; font-family: arial narrow;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>



    Code brut pour rajouter un lien :



    N'oubliez surtout pas que ce code est à placer devant le < / table > final ! Sinon vous allez vous retrouver avec des éléments dispatchés un peu partout.



    Code:
    <tr><td>

    <img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin-left: 30px;"></td><td><br /><div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr>


    Version Simplifiée



    Code simplifié fiche :



    Attention, pour ceux qui ont déjà installé le CSS de la fiche de présentation, certains codes sont répétés !



    Code:
    <div class="fond_1;"><img src="http://38.media.tumblr.com/5a95208db6bdbc9b447419e30f0cb7e4/tumblr_mfc7ekAafn1r6zkm3o1_500.gif" style="width: 100%; heigh: 280px;"/><div class="fond_6;"><div class="bloc_guillemet"; text-align: center; margin-top: 10px;"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Interesting...</span></div></div><div class="credits"; margin: -3px 0 0 10px;">feat Personnalité choisie</div><div class="soustitre"; margin: -18px 10px 0 0;">Prénom Nom</div>

    <div class="fond_scroll_1;"><div class="fond_scroll_2;"></div><div class="fond_scroll_3;"></div></div><br /><div class="fond_scroll_4;"><marquee scrollamount="3">Age • Situation • Métier • Donnée</marquee></div>


    <div class="titre_1"; margin: 0 0 -18px 315px;">So you are</div><div style="titre_1"; margin: 0 0 -22px 80px;">I think</div>
    <div class="fond_2;"><table><td>
    <div class="style_2;"></div><div class="style_4;"></div></div>
    <div class="fond_7;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- caractère -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.

    <span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- histoire -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></td><td>
    <div class="style_5;"></div><div class="style_6;"></div></div>
    <div class="fond_7;"><span style="font-size: 16px; font-family: impact; color: #DF2626;">{busy}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.

    <span style="font-size: 16px; font-family: impact; color: #6AD030;">{free!}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.

    <span style="font-size: 16px; font-family: impact; color: #A530D0;">{reserved}</span><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- type de relation -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat.</div></td></table></div>

    <div class="titre_1"; margin: 0 0 -22px 80px;">I know</div>
    <div class="fond_2;">
    <div class="style_2;"></div><div class="style_3;"></div>
    <table><tr><td><img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" class="bloc_image_2;"></td><td><div class="soustitre"; margin-right: 40px;">Prénom Nom</div><div class="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr><tr><td>

    <img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" class="bloc_image_2;"></td><td><div class="soustitre"; margin-right: 40px;">Prénom Nom</div><div class="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr></table></div><a class="credits"; margin-top: -3px; text-align: center;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>



    Pour rajouter un lien :



    Ici aussi, soyez vigilant en replaçant le lien ajouté juste avant le < / table >.



    Code:
    <tr><td>

    <img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" class="bloc_image_2;"></td><td><div class="soustitre"; margin-right: 40px;">Prénom Nom</div><div class="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr>



    Code feuille CSS :



    Code:
    /* --------------------------------- Liens --------------------------------- */
    .fond_1
    {
    background-color: #E4E4E4;
    width: 530px;
    margin: auto;
    padding-bottom: 10px;
    box-shadow: 3px 3px 5px #000000;
    color: #353535;
    font-family: 'Verdana';
    font-size: 11px;
    }
    .fond_2
    {
    background-color: #DFDFDF;
    margin: 0 10px 0 10px;
    padding-bottom: 20px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    }
    .fond_6
    {
    background-color: #F0F0F0;
    border-top: 4px solid #B0C3AB;
    border-bottom: 2px solid #BEBEBE;
    height: 40px;
    width: 100%;
    }
    .fond_7
    {
    background-color: #ffffff;
    width: 190px;
    height: 300px;
    margin-left : 30px;
    padding: 10px;
    text-align: justify;
    overflow: auto
    }
    .fond_8
    {
    background-color: #ffffff;
    height: 120px;
    margin: 0 30px 0 18px;
    padding: 10px;
    text-align: justify;
    overflow: auto;
    }
    .fond_scroll_1
    {
    background-color: #8C8C8C;
    margin: auto;
    padding: 1px;
    width: 245px;
    height: 40px;
    }
    .fond_scroll_2
    {
    background-color: #E6E6E6;
    width: 245px;
    height: 20px;
    border-top: 1px solid #FEFEFE;
    }
    .fond_scroll_3
    {
    background-color: #B1B1B1;
    border-bottom: 2px solid #9B9B9B;
    width: 245px;
    height: 18px;
    }
    .fond_scroll_4
    {
    background-color: #EFF5FF;
    width: 227px;
    height: 22px;
    margin: -56px auto 0 auto;
    border: 1px solid #384B69;
    padding: 5px;
    color: #483047;
    font-size: 15px;
    font-family: calibri;
    font-variant: small-caps;
    }
    .style_2
    {
    background-color: #8D838D;
    height: 1px;
    margin: -7px 0 0 30px;
    }
    .style_3
    {
    background-color: #B0C3AB;
    height: 2px;
    margin-left: 30px;
    margin-right: 30px;
    }
    .style_4
    {
    background-color: #B0C3AB;
    height: 2px;
    margin-left: 30px;
    }
    .style_5
    {
    background-color: #8D838D;
    height: 1px;
    margin: -7px 30px 0 18px;
    }
    .style_6
    {
    background-color: #B0C3AB;
    height: 2px;
    margin: 0 30px 0 18px;

    .titre_1
    {
    font-family: georgia;
    font-size: 24px;
    color: #B0C3AB;
    }
    .bloc_guillemet
    {
    font-family: georgia;
    font-size: 36px;
    text-shadow: 1px 1px 2px #1A1A1A;
    color: #353535;
    }
    .soustitre
    {
    text-align: right;
    font-family: georgia;
    font-variant: small-caps;
    font-size: 14px;
    font-style: italic;
    letter-spacing : 2px;
    color: #879E9B;
    }
    .bloc_image_2
    {
    border: 2px solid #BEBEBE;
    width: 100px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-left: 30px;
    }
    .credits
    {
    margin-top: -3px;
    margin-left: 10px;
    color: #BEBEBE;
    font-size: 10px;
    font-family: arial narrow;
    }
    /* --------------------------------- FIN Liens --------------------------------- */


    Dernière édition par Kanae le Mer 21 Déc 2016 - 16:47, édité 10 fois
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Mer 10 Sep 2014 - 12:26

    Hello !

    Super fiche, j'aime beaucoup ! Merci de ce partage^^

    Juste une remarque également, on le voit beaucoup mais la balise "center" est à éviter car elle tend à disparaitre... Il y a une autre méthode pour centrer un bloc. Tu utilises la balise center ici par exemple :

    Code:
    <center><div style="background-color: #EFF5FF; width: 227px; height: 22px; margin-top: -56px; border: 1px solid #384B69; padding: 5px; color: #483047; font-size: 15px; font-family: calibri; font-variant: small-caps;"><marquee scrollamount="3">Age • Situation • Métier • Donnée</marquee></div></center>

    Ce qui donne :

    Age • Situation • Métier • Donnée

    (en sachant que là c'est centré par rapport à la page entière et non à un autre bloc plus petit bien sûr, mais ce n'est pas important^^)

    A la place des balises "center", il suffit de mettre un "margin: auto" pour que le bloc soit automatiquement centré par rapport à la largeur totale du bloc dans lequel il est contenu. Tu me diras que tu as déjà un margin-top et que ça va faire conflit. Si on met "margin: auto" tel quel oui en effet. Mais il suffit alors de mettre de façon développée :
    Code:
    margin-top: -56px
    margin-left: auto
    margin-right: auto
    Ou de façon plus juste et plus rapide ceci :
    Code:
    margin: -56px auto 0 auto;
    Ce qui signifie dans l'ordre la même chose. L'ordre des informations c'est "top - right - bottom - left". En fait on part du haut et on tourne dans le sens des aiguilles d'une montre pour indiquer la marge de chaque côté^^

    Ton code sera plus juste si les blocs sont centrés de cette manière^^

    Si tu n'as pas compris quelque chose n'hésite pas à le dire, je réexpliquerais ou je détaillerais ce qui cloche x).

    Sinon, peux-tu éditer ton code en changeant juste cela ? Ou bien je le fais si tu préfères^^



    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Mer 10 Sep 2014 - 15:23

    Je l'éditerais ce soir en revenant des cours !
    Ou bien tu peux l'éditer si tu vois que ce n'est toujours pas fait lorsque tu passes.
    Je n'avais pas compris qu'on pouvait combiner margin : -56px 0 auto. J'ai encore de vieux réflexes de BBcode.

    Merci pour cette correction.

    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Mer 10 Sep 2014 - 18:11

    Pas de souci prends ton temps^^

    Si t'as besoin d'explications là-dessus je t'en donnerais avec plaisir. D'ailleurs je pense qu'il faudra que je fasse un tuto' sur ce point... Ca aiderait peut-être x)



    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Ven 12 Sep 2014 - 15:05

    Fiche corrigée !
    Du moins pour autant que j'étais capable de le faire ^^.

    avatar
    Abysse
    FémininAge : 24Messages : 31

    le Dim 19 Oct 2014 - 22:45

    J'adoooore *O*
    Merci du partage ♥
    avatar
    Sha'næ
    FémininAge : 24Messages : 14

    le Lun 20 Oct 2014 - 22:58

    Invocation vaudoooooouuuuuuue. :die
    Merci ♥
    avatar
    RainbowPanda
    FémininAge : 24Messages : 52

    le Dim 26 Oct 2014 - 2:45

    merci !
    avatar
    Sandankhr.
    FémininAge : 22Messages : 12

    le Mar 28 Oct 2014 - 18:33

    Merci! **
    avatar
    Latica
    FémininAge : 21Messages : 39

    le Mar 28 Oct 2014 - 18:36

    Merciii Very Happy
    avatar
    Nut's
    FémininAge : 30Messages : 4

    le Jeu 30 Oct 2014 - 14:05

    Je prends l'invocation vaudou !!!!! *fait une danse* et merci pour ce code =)
    avatar
    Nemelise
    FémininAge : 17Messages : 50

    le Lun 3 Nov 2014 - 22:05

    Merci !
    avatar
    Ashley Nitsu
    FémininAge : 22Messages : 16

    le Mar 4 Nov 2014 - 17:59

    Merci, très belle fiche. ♥
    avatar
    Amber's
    FémininAge : 18Messages : 158

    le Mer 5 Nov 2014 - 23:05

    Mercii ♥ *3*
    Spartfly
    MasculinAge : 23Messages : 27

    le Jeu 6 Nov 2014 - 16:34

    merci ! =)
    avatar
    Neko-Rika
    FémininAge : 19Messages : 115

    le Jeu 6 Nov 2014 - 22:08

    Merci ^^
    avatar
    vaas.
    MasculinAge : 21Messages : 56

    le Lun 17 Nov 2014 - 19:28

    Merci ! *-*
    Shinju.dot
    FémininAge : 28Messages : 88

    le Mar 18 Nov 2014 - 20:34

    merci
    avatar
    Loony
    FémininAge : 25Messages : 7

    le Jeu 20 Nov 2014 - 17:49

    Superbe, comme la fiche de présentation ! *-* Mercii !
    avatar
    W.
    FémininAge : 20Messages : 127

    le Ven 21 Nov 2014 - 22:04

    merci



    Je suis Charlie.
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Mar 9 Déc 2014 - 10:26

    Merci du partage
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Jeu 11 Déc 2014 - 18:07

    Je te le prends j'adore <3
    avatar
    Little angel
    FémininAge : 26Messages : 45

    le Dim 14 Déc 2014 - 17:11

    Merci pour le partage :)
    avatar
    Akiyuki
    MasculinAge : 20Messages : 89

    le Lun 15 Déc 2014 - 21:37

    Magnifique ! J'aime beaucoup ! ♥
    Loki Lecter
    MasculinAge : 19Messages : 6

    le Jeu 18 Déc 2014 - 0:21

    Merci! =)



    "Death has no mercy 'cause it is universal
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Sep 2018 - 9:11