Codage Party Time !

Depuis le temps que j'en rêvais *^*.

Alors avant toute chose, il y aura deux types de commande.
Celles réservées pour ici, que je ne veux donc pas voir ailleurs. Celles là sont illimités, j'en fais autant que vous voulez.
Celles pour ailleurs, dans l’inconnue x.X. Je n'en ferais qu'une par personne. J'aime bien revoir mes fiches après tout ^^'.

Merci de remplir entièrement le formulaire, sinon je ne saurais pas quoi vous coder ^^'.

Code:

[b]Type de codage: [/b]Fiche rp, Fiche de lien (complète, c'est à dire petite présentation, liste rp et liens de personnages), fiche de présentation (interdite pour ce forum, je sais que Tom ne veut pas ;)).

[b]Schéma:[/b] Obligatoire, sinon, je ne code pas sans savoir. Et merci de ne pas me montrer des fiches déjà existantes, j'aime pas copier ^^'.

[b]Couleurs et images:[/b] Il me faut bien les couleurs pour faire un truc joli. Pour les images, ça peut être des images de fond (des motifs en gros), et des images de votre perso. Elles seront bien sur échangeable par la suite, mais c'est pour me faire une idée de la taille.

[b]Police d'écriture:[/b] Merci d'utiliser google-font pour des polices d'écritures particulières. Envoyez moi le lien, cela sera plus rapide pour moi ;).

[b]Pour:[/b] Là où vous comptez l'utiliser. Rappelez vous bien ce que j'ai dit plus haut ;).

Pour des exemples... Regardez Eliott, je viens de lui refaire une beauté *^*. Je dois avoir codé la fiche de lien de Gaëlien aussi je crois... Bref, à vous de jouer !

Prochain post: un tuto pour apprendre la base !

Bien, vous avez envie d'apprendre par vous même, je vous félicite !
Nous allons donc apprendre la base, fin, ce qui d'après moi est la base /PAN/

Nous allons coder une fiche ensemble du coup.

1/ Faire un schéma.
Je fais toujours un schéma avant de commencer, afin de savoir où aller. C'est un plan en gros. Bon, je ne le suis pas toujours jusqu'au bout, mais ça me permet d'avoir une idée.

En général, je le fais à la main, car c'est bien plus rapide que par ordinateur. Mais je vais essayer de faire un effort pour vous (z'avez vu, je suis gentille !)

magnifique schéma !:

Un truc basique, on ne va pas se casser la tête tout de suite hein =D.

2/ C'est parti !
Pour coder, j'utilise en général un forum test, mon bazar sans nom, comme je l'appelle. Mais il est tout à fait possible de coder directement là où on veut poster. Mais cela ne fait pas très propre si l'on veut faire une pause :p.
Alors avant tout, je centre toujours mes codes, car je trouve ça plus joli. Ça a l'air idiot, mais c'est bon à savoir =).

Code:

<center>   </center>

Un petit center, et voilà =D.

Et maintenant, on attaque la partie difficile !

pour coder, on utilise la div, cet animal avec tant de particularité qu'on en apprend tous les jours !

Code:

<div> </div>

Il s'agit donc d'un bloc, qui peut servir un peu à tout et n'importe quoi. attention à ne pas oublier de la fermer ! Ici, nous allons commencer par le fond de notre codage.
Ainsi, nous allons régler sa largeur, sa couleur et ses bords.

Pour cela, on écrit tout simplement ça:

Code:

<center><div style="width:480px; background:#ffffff; border:2px solid black;">

</div></center>

Et maintenant j'explique !
style="   " : on mets toutes les caractéristiques de la div à l'intérieur. attention à bien la refermée avec ses "", sinon, plus de code. Chaque caractéristique est séparée par un ; sans ça, une partie des caractéristiques ne marcheront tout simplement pas.
width:480px;: la largeur, on peut changer le 480 par n'importe quelle taille. Ici on ne peut faire plus large, car sinon on dépasse :p. On peut aussi le remplacer par des %, par exemple 80%, pour avoir un cadre proportionnel à la page. Je n'aime pas trop utiliser les %, car selon la taille de l'écran, cela peut partir en live x.X.
background:#ffffff;: la couleur de fond, tout simplement. On peut ici utiliser aussi bien le code couleur comme #ffffff; mais attention de ne pas oublier le #. On peut aussi bien le marquer de cette façon: background: white; cela marche aussi.

border:2px solid black;: Il s'agit des bordures. 2px indique la largeur de la bordure, black en est la couleur. On peut aussi utiliser le code couleur comme #000000; Solid, c'est le genre de la bordure. Ici, elle sera pleine. Mais on peut très bien la faire d'une toute autre manière:
dotted; Elle sera en pontillées.
dashed; Elle sera en tirées.
double; elle sera double =D.
Il en existe d'autres, mais je ne vais mettre que les principales. Il suffit de cherche un peu sur internet pour connaitre les autres ;) (ouais, je suis une flemmarde aussi !).

Nous avons donc une jolie div ! Mais ça ne ressemble pas vraiment à notre schéma... Alors on continue !

3/ Base du codage
Avant de colorer tout ça, je préfère faire ce que j'appelle la base du codage, afin de pouvoir tout mettre en harmonie d'un coup.
Pour cela, nous allons mettre des div dans div ! ouais, c'est l'inception des div !!

Commençons par la plus grosse, là où ira mon joli petit rp ! Une div dans une div, hop !

Code:

<center><div style="width:480px; background:#ffffff; border:2px solid black;">
<div style="width:400px; background:#ffffff; border:2px solid black;">

</div>
</div></center>

Et voilà ce que ça donne !

C'est beau hein   
J'ai ici réduit la largeur de la deuxième div, afin qu'elle ne déborde pas.

Nous avons donc une petite base. Mais nous voyons qu'il y a deux blocs au dessus de notre rp, un pour une image, le deuxième pour le titre de notre rp. Cela poserait problème de le mettre dans notre première div. Que faisons nous donc ? On les met au dessus, tout simplement !!
(En général, je commence par celles du haut, mais en voulant vous apprendre, j'ai préféré inverser ;))

Code:

<center><div style="width:480px; background:#ffffff; border:2px solid black; height:200px;"></div><div style="width:480px; background:#ffffff; border:2px solid black; height:50px;"></div><div style="width:480px; background:#ffffff; border:2px solid black;">
<div style="width:400px; background:#ffffff; border:2px solid black;">

</div>
</div></center>

Une nouvelle variable c'est rajoutée dans les div du haut ! Il s’agit de height:50px; et height:200px;
Elle permet de régler la hauteur de la div. tout comme sa copine width, elle peut aussi se régler en %.

On approche un peu plus de notre objectif. On peut dire que nous avons notre base !

/4 Color Time !
Il est temps de décorer tout ça, car bon, le noir et blanc, c'est pas beau !
Pour pas me perdre, je vais indiquer là où il y aura du texte !

Code:

<center><div style="width:480px; background:#ffffff; border:2px solid black; height:200px;"></div><div style="width:480px; background:#ffffff; border:2px solid black; height:50px;">Titre RP</div><div style="width:480px; background:#ffffff; border:2px solid black;">
<div style="width:400px; background:#ffffff; border:2px solid black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>To be continued...
</div></center>

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

Cela ressemble déjà un peu plus à un post pour rp ! Le to be continued... c'est un petit plus =3
Il ne sert à rien du tout sinon >.>
Alors pour les couleurs, comme je suis à fond sur mon petit Eliott, je vais utiliser ses couleurs pour ma petite fiche !
La couleur des gryffondors : #B7452E; Donc ce sera la couleur de fond de la grande div. Je remplace le blanc pas beau par ça ! Je décide aussi de mettre les bords en blanc.
Il est aussi temps de mettre l'image d'Eliott dans la fiche (car on qait tous qu'il est trop chou ). Pour cela, nous allons remplacer le background:#ffffff; par un background-image:url(adresse de l'image);
Il suffit plus qu'à mettre l'adresse de notre image. attention à ce qu'elle soit bien à la taille de votre div !

Code:

<center><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/rp_tut11.png); border:2px solid white; height:200px;"></div><div style="width:480px; background:#ffffff; border:2px solid white; height:50px;">Titre RP</div><div style="width:480px; background:#B7452E; border:2px solid white;">
<div style="width:400px; background:#ffffff; border:2px solid black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>To be continued...
</div></center>

Voilà ce que ça nous donne:

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

On avance, mine de rien !
Maintenant, dans les div avec fond blanc, j'ai envie de mettre un motif. Nous allons donc encore utiliser le background-image:url(adresse image); Il suffit de chercher un peu pour en trouver facilement. Certains sites en propose gratuitement. Le mien sera celui là :

image de fond trop classe:

Un gris beige fera l'affaire.

Code:

<center><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/rp_tut11.png); border:2px solid white; height:200px;"></div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:50px;">Titre RP</div><div style="width:480px; background:#B7452E; border:2px solid white;">
<div style="width:400px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>To be continued...
</div></center>

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

Zut, on ne voit plus le texte ! Et bien on en change la couleur ! Il suffit de rajouter un color:#000000; pour qu'elle change. Bien sur on on peut la remplacer aussi bien par un code couleur que par son nom. La couleur que j'utilise: #AA472F;

Par la même occasion, nous allons nous attaquer à la police qu'écriture du titre ! Pour cela, je vais sur google-font, et je me cherche une jolie police d'écriture De là, j'aurais deux code. Un pour que la police marche, à mettre tout en haut de votre page. Il ne se verra pas, ne vous inquiétez pas. Le mien:

Code:

<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>

Et le second, à mettre sur la div qui contient le texte.

Code:

font-family: 'Satisfy', cursive;

avec cela, on en change la taille, tant qu'à faire !
font-size:40px;

A vous de le régler à votre taille !
Et là je vois que cela sort du cadre. Et bien juste avant "Titre Rp", je place un petit

Code:

<br>

qui équivaut à un saut à la ligne.

Code:

<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'><center><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/rp_tut11.png); border:2px solid white; height:200px;"></div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:50px;font-family: 'Satisfy', cursive;color:#AA472F;font-size:40px;"><br>Titre RP</div><div style="width:480px; background:#B7452E; border:2px solid white;">
<div style="width:400px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid black;color:black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>To be continued...
</div></center>

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

J'ai bien dit que je changer souvent d'idée par rapport à mon schéma d'origine. Et bien ce tuto ne fera pas exception !
J'ai envie de donner au "to be continued" la même mise en page que le titre, en à peine plus petit.
Je décide aussi d'enlever les bords de la partie rp.
Je vais aussi réduire certains bords des autres parties. Je vais donc toucher à chaque bord différemment.
Pour cela, nous allons utiliser le border-top: 1px solid white; Utilisable aussi bien avec left, bottom et right, il permet d'avoir chaque bord différent de l'autre. Mettez le après le border: 2px solid white; sinon il ne fonctionnera pas. Donc dans cet ordre: border: 2px solid white; border-top: 1px solid white;

Code:

<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'><center><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/rp_tut11.png); border:2px solid white;border-bottom: 1px solid white; height:200px;"></div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:50px;font-family: 'Satisfy', cursive;color:#AA472F;font-size:40px;border-top: 1px solid white;border-bottom:1px solid white;"><br>Titre RP</div><div style="width:480px; background:#B7452E; border:2px solid white;border-top:1px solid white;border-bottom:1px solid white;">
<div style="width:400px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); color:black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>
</div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:45px;font-family: 'Satisfy', cursive;color:#AA472F;font-size:35px;border-top:1px solid white;"><br>To be continued...</div></center>

Et voilà :

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

On peut dire que nous avons presque terminé ! Mais j'aime les bords arrondis... Donc nous allons en rajouter !
Pour cela nous avons la propriété border-radius:20px;. Plus le nombre de px sera grand, plus la courbe sera grande. Il en existe une légère variante: border-radius: 20px 10px 5px 40px;. Elle permet de changer la courbure de chaque coin indépendamment.

Code:

<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'><center><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/rp_tut11.png); border:2px solid white;border-bottom: 1px solid white; height:200px;border-radius:75px 75px 0px 0px;"></div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:50px;font-family: 'Satisfy', cursive;color:#AA472F;font-size:40px;border-top: 1px solid white;border-bottom:1px solid white;"><br>Titre RP</div><div style="width:480px; background:#B7452E; border:2px solid white;border-top:1px solid white;border-bottom:1px solid white;">
<div style="width:400px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); color:black;">
Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

</div>
</div><div style="width:480px; background-image:url(http://i55.servimg.com/u/f55/18/79/18/92/bedge_10.png); border:2px solid white; height:45px;font-family: 'Satisfy', cursive;color:#AA472F;font-size:35px;border-top:1px solid white;border-radius: 0px 0px 70px 70px;"><br>To be continued...</div></center>

Titre RP

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.

Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

To be continued...

Et voilà, notre fiche est terminée !!! A vous de vous amusez avec.

Mais il existe bien d'autres choses à ajouter, si nous le souhaitons

Soyons fous, je veux mettre un éclairage derrière mes divs, ou bien une ombre, cela marche pour les deux ! Pour cela, nous utilisons box-shadow: 0px 0px 5px white;
Les deux premiers px permettent de changer la position de l'ombre, le dernier est sa largeur. Mais attention, à éviter sur les divs collées les unes autres autres, comme sur notre fiche actuelle, sinon cela débordera.

Il y a aussi l'overflow ! Il permet de mettre une barre de défilement, si vous souhaitez garder votre partie texte à taille fixe. overflow:auto;

Ensuite, pour faire plus complexe, on peut utiliser des tableau, ou encore les margins, mais c'est déjà une autre histoire. J'en parlerais peut être une prochaine fois, mais là je fatigue x.X.

Bon codage à vous
Et si vous avez la moindre question, demandez ici ou par mp (voir sur la box si j'y suis), je serais ravie d'aider.

Une petite commande de fiche rp

Type de codage: Fiche rp

Schéma: https://2img.net/image.noelshack.com/fichiers/2014/43/1414055211-schema.png (au cas où qu'on voit pas, tout les rectangles sont arrondis)

Couleurs et images: Couleur: bleu à l'extérieur, le reste blanc ou beige, en fonction de ce qui crève le mien les yeux. Pour l'image, ce sera une image de mona ou en lien avec le rp.

Police d'écriture:Homard pour le titre ()
Rokkit pour texte (
)

Pour: ici

Voilà ce que ça donne pour le moment, Isobel. J'ai mit une image que j'avais, vu que tu ne m'en as pas donné. A toi de voir ce qu'il faut changer maintenant, car avec ton schéma, je n'ai pas pu aller plus loin.

Titre rp

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.

Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.

Ollie, je l'avais vu et j'ai oubleir de te dire que cela me convenais. C'est cela que je me faisais dans mon esprit, merci