Fiche de présentation baroque bleue

Bonjour bonjour n'utopiens !

Je vous présente cette fois une fiche de présentation élégante dans un style plutôt baroque. Vous pouvez avoir un aperçu ici

Tout les éléments sont bien entendu modifiables dans les deux codes (c'est peut être plus facile dans celui comportant du CSS)
Le "vous" du second cadre est un peu plus petit que sut l'aperçu et le fond marron au delà de la frise est celui du forum sur lequel elle a été postée.


Un merci suffit à voir le code et l'utilisation est libre à la seule condition de ne pas enlever ni mon crédit à la fin ni celui de Never Utopia. j'en profite au passage pour remercier tout ceux ayant participé au cursus codage mais aussi posté des tutos ou répondu à mes question ; c'est grâce à vous si je progresse et ai pu faire ce petit LS !  

thank's

L'idée est sympathique !

Merci !^^

Hey !

J'adore le rendu *-* Cependant j'aurai bien vu un CSS intégré au code, pour faciliter l'adaptation du texte par les membres qui s'y connaissent moins :/ Ce n'est pas bien compliqué et c'est du C/C, mais c'est toi qui vois ^^

Petites choses cependant : attention pour les br, ils se font de cette manière :

Code:

<br />

Et la balise center ne se fait plus comme je te l'ai expliqué ici. Et pour ma part, le texte de "Vous" est très gros, c'est volontaire ? Ca rend moins bien celà dit :O

Encore merci du partage Nephi' et bravo pour ta persévérance, tes idées sont géniales donc continues *-*

Mh, pour le center j'avais complètement oublié tu as raison ! Mais dans ce cas comment est-ce que je peux conserver cet alignement sans augmenter mes marges intérieures qui élargiraient mon soulignement en pointillé ? :o

Pour le "br" je change ça aussi demain mais si tu pouvais m'expliquer ce que ça change ce serait top ! (au pire je verrais bien en repostant ! ) et en effet le "Vous" est gros, j'éditerai ça aussi !

Et pour la feuille css je t'aurais volontiers dis oui mais actuellement je suis juste incapable d'en faire, je ne comprends pas comment ça marche ni où l'intégrer >.>

Salut ^^

Pour le "br", si tu ne le mets pas comme Halloween, c'est comme si tu ouvrais une balise sans la fermer. Je pense que cela fonctionne quand même, mais c'est tout de même une erreur. En mettant un espace et un "/" après le "br", cela ferme la balise.


Pour le CSS, je vais te montrer un exmple.
Disons que j'ai ce carré :

Code:

<div style="background: darkred; border: 2px dashed #3C0000; padding: 5px; width: 200px; height: 80px; color: white; text-shadow: 1px 1px 2px #000000; margin: auto;">Je suis un carré!</div>

Ce code est lourd et je veux l'alléger au maximum pour mes membres. Alors je vais le réduire. Pour cela, je vais donner une "class" à ma balise "div" et je vais aller mettre le CSS dans une feuille de CSS.

Cela donnera le code suivant :

Code:

<div class="nom_de_la_class">Je suis un carré!</div>

Et le CSS suivant, à mettre dans la feuille de style CSS dans les couleurs de l'onglet affichage du panneau d'administration :

Code:

.nom_de_la_class {
  background: darkred;
  border: 2px solid #3C0000;
  padding: 5px;
  width: 200px;
  height: 80px;
  color: white;
  text-shadow: 1px 1px 2px #000000;
  margin: auto;
}

Ok, je crois que j'ai pigé le truc, merci Onyx
Par contre il va falloir m'accorder un moment pour que je puisse faire ça parce qu'il va me falloir pas mal d'essais pour avancer autrement que tout doucement !

PS : attendez vous à me retrouver dans les problèmes en codage dans les prochains jours XD

Ce n'est pas vraiment de la feuille de CSS que je parlais Onyx x)

En fait tu peux procéder de cette manière, mais du coup seuls les Admin pourront l'utiliser. L'idéal serait d'intégrer le CSS dans le message par le biais des balises :

Code:

<style></style>

Tu as un exemple ici. En gros, tu ajoutes le CSS en début de message, et tu utilises les class comme si le CSS était externe. Comme ça tu embrouilles moins les gens et tout le monde peut s'en servir :)

Si tu as besoin d'un coup de main n'hésites pas hein

S.O.S, S.O.S, la section codage veut ma peau XD

Mais OK, je vais essayer, ça a l'air casse-tête mais pas insurmontable !

Hello très jolie fiche bravo et merci du partage.

C'est édité Hallo, finalement ce n'était pas si compliqué que ça :o
J'ai donc mis les deux codes pour que les gens puissent sélectionner celui avec lequel ils sont le plus à l'aise !

Le center a été viré et les "br" modifiés !

Nephilime a écrit:S.O.S, S.O.S, la section codage veut ma peau XD

En même temps tu le sais maintenant, donc soit tu dois être maso, soit je suis pas si chiante que ça hein x)

Merci pour les modifications ! Il reste cependant quelques coquilles : attention à tes espaces et à tes points virgules. Une div (ou un span) se construit de cette façon :

Code:

<span style="display: block; width: 370px; [...] padding-bottom: 8px;">

Pas d'espace après le premier guillemet, un point virgule à la fin de chaque caractéristique y compris à la toute fin, avant le dernier guillemet. Et pas de "/" à la fin d'une div. Je t'ai relevé quelques exemples, mais il y en a plusieurs à modifier.

Manque un point virgule :

Code:

<span style="display: block; width: 370px; font-family: 'Merienda One', cursive; font-size: 24px; color: #625656; letter-spacing: 3px; border-bottom: 5px dotted #342c2c; text-align: right; margin-left: auto; margin-right: auto; margin-top: 2px;  padding-bottom: 8px">

Pas de slash :

Code:

<div style="height: 150px; width: 150px; margin-left: 37px; margin-top: 6px; font-weight: lighter; font-size: 11px; transform: rotate(-45deg);"/>

Pas d'espace après un premier guillemet :

Code:

<span style=" color: #5d83b1; padding-top: -40px; padding-left: 200px; font-size: 10px;">

Et comme pour tous les codes, il faut un lien vers NU (j'avais oublié de le préciser dans mon premier message, désolée).



• Pour ton intégration du CSS :

La plus grosse erreur : jamais de gros espaces entre les nom de class ! Jamais. Là tu as de la chance, ça fonctionne (va savoir pourquoi d'ailleurs ) mais normalement elles doivent être séparées par un unique espace pour que ça fonctionne, donc :

Code:

.bloc_pcp {width: 500px; height: 905px; margin: auto; background: url(http://img15.hostingpics.net/pics/855310fond.jpg) center; overflow: hidden; text-align: left; border-radius: 30px 0 30px 0; border-top: 7px solid #3a6077; border-left: 2px solid #3a6077; border-right: 2px solid #3a6077;  border-bottom: 7px solid #3a6077;} .entete {display: block; width: 370px; font-family: 'Merienda One', cursive; font-size: 24px; color: #625656; letter-spacing: 3px; border-bottom: 5px dotted #342c2c; text-align: right; margin-left: auto; margin-right: auto; margin-top: 2px;  padding-bottom: 8px;} .losange_fond {height: 150px; width: 150px; float: left; background-color: #342c2c; border: 12px solid #3b5d78; margin-left: -30px; margin-top: 30px; transform: rotate(45deg);} .losange_txt {height: 150px; width: 150px; margin-left: 37px; margin-top: 6px; font-family: 'Merienda One', cursive; font-weight: lighter; font-size: 11px; transform: rotate(-45deg);} .eventail_bas {width: 170px; height: 240px; background-color: #342c2c; margin-left: 242px; margin-top; -7px; transform: rotate(-18deg);} .eventail_med {width: 170px; height: 240px; background-color: #625656; margin-left: 10px; transform: rotate(12deg);} .avatar { width: 150px; height: 240px; margin-left: 10px; background: url(http://img11.hostingpics.net/pics/50432862839110.jpg) top no-repeat; transform: rotate(8deg)} .monde {font-family: 'Merienda One', cursive; font-size: 15px; color: #625656; font-weight: lighter; letter-spacing: 2px; padding-left: 60px ; margin-top: 3px;} .citation {font-family: 'Merienda One', cursive; font-size: 11px; color: #625656; font-weight: lighter; letter-spacing: 2px; padding-left: 85px ; margin-top: -3px;} .hide {height: 460px; width: 444px; overflow: scroll; overflow-x: hidden} .cat_droite {font-family: 'Merienda One', cursive; font-size: 20px; color: #625656; text-shadow: 0 2px 0 2px #342c2c; letter-spacing: 3px; padding-left: 300px;}

Par exemple. Je n'ai pas tout fait, c'était pour te donner une idée de l'animal. Comme tu le vois, ça fait pâté mais c'est comme ça que ça marche :/ De plus, toutes les caractéristiques doivent être réunies en début de message, dans le même "style", c'est une norme.

Il te manque un point virgule à :

Code:

 .hide {height: 460px; width: 444px; overflow: scroll; overflow-x: hidden}

Je crois aussi qu'il y a quelques beugs : chez moi, il y a un unique ascenseur pour l'histoire, le caractère et le physique, c'est normal ? Ou du moins voulu ? Et le texte dépasse sur le fond en plume, tu as besoin d'aide pour mieux le placer ? De plus, le cadre "vous" sort de la présentation (cf si tu veux un aperçu) et le crédit se place sous le caractère :$

Petite question : ici le texte du cadre "vous" est de taille normale, mais pas sur la fiche en HTML, c'est normal ?

Merci pour tes premières modifications donc, mais il reste quelques petites choses à revoir (pour l'HTML ça devrait aller vite, et les beugs de ta fiche avec CSS viennent peut-être des espaces dans le "style").

Si besoin n'hésites pas à demander de l'aide, je suis aussi là pour ça.

Courage !

Nephi ? Toujours là ? :3

Après un temps infini, vraiment désolée Hallo, je pense que tout est bon !
J'ai travaillé les codes sur un autre forum que NU pour dissocier ce qui était de l'affichage automatique et ce qui ne l'était pas, en espérant que cela convienne une bonne fois pour toute et merci pour tout

B'jour.

Alors pour la fiche avec le CSS et le HTML séparés, c'est quasiment bon, il manque juste le lien pour le crédit. Tu as mis un span alors que pour le lien c'est cette balise :

Code:

<a href="Lien ici">Never-Utopia</a>

En revanche pour le HTML seul, tu as fermé 2 balises div en trop. Une après le caractère, et une après le crédit (qui doit aussi changer de balise).

Je te laisse modifier ça encore et après ce sera bon (:

En attente de nouvelles.

Merci beaucoup du partage! C'est une jolie fiche.

Merci beaucoup du partage ^^

Merci pour le partage :)

merci!

Merci !!! :3

Merci !!! :3

Merci ♥

fabuleux merci :)