Fiche présentation décalage - center

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Fiche présentation décalage - center

Message par Oz-Chan le Mer 19 Mar 2014 - 16:13

Bonjour la compagnie !
Je viens demander un peu d'aide au sujet de ma présentation. Alors, le code va nickel sur firefox, mais sur chrome... Le cadre s'amuse à se décaler sur la droite. Super hein...? Je vous laisse voir :
firefox :

Chrome :

Voilà le HTML et CSS !

CSS
Code:
/* --- PRESENTATIONS RPG --- */

.presbox {
   width: 650px;
   margin-top: 100px;
   padding-bottom: 30px;
   background-color: #0C1342;
   border: 1px solid #00003B;
   border-radius: 30px;
   -webkit-border-radius: 30px;
   border-radius: 30px;
}

.prespix {
   float: left;
   margin: -80px 10px 0 30px;
   padding: 7px;
   background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/anoi0i10.jpg");
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 1px 1px 6px black;
   -webkit-box-shadow: 1px 1px 6px black;
   box-shadow: 1px 1px 6px black;
}

.pressurname {
   display: block;
   text-align: left;
   margin-left: 270px;
   color: #bacfff;
   font-family: georgia;
   font-size: 42px;
   font-style: italic;
   letter-spacing: -2px;
   opacity: 0.6;
   text-shadow: 1px 1px 6px #FFEF9C;
}

.presname {
   display: block;
   text-align: left;
   margin-left: 300px;
   margin-top: -10px;
   color: #FFFFFF;
   font-family: georgia;
   font-size: 42px;
   letter-spacing: -2px;
   font-style: italic;
   text-shadow: 1px 1px 6px #FFEF9C;
}

.presprofile {
   height: 221px;
   overflow: auto;
   margin: 0 10px 0 255px;
   padding: 7px;
   text-align: justify;
   font-size: 11px;
   background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/prout10.jpg");
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}

.prestitre {
   color: #bacfff;
   font-family: georgia;
   font-size: 28px;
   font-style: italic;
   letter-spacing: -1px;
   height: 14px;
     text-shadow: 1px 1px 6px #000000;
   background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/anoi0i10.jpg");
}

.presdesc {
   margin: 0 20px 0 20px;
   padding: 7px;
   text-align: justify;
   font-size: 11px;
   background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/prout10.jpg");
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}
HTML
Code:
<center><div class="presbox"><div class="prespix"><img src="http://i20.servimg.com/u/f20/12/80/18/70/2010.png"/>
[size=10]feat. Personnage | Série[/size]</div> <span class="pressurname">Nom</span>
<span class="presname">Prénom</span>

[size=11][i]« Citation représentant votre personnage. »[/i][/size]

<div class="presprofile"><span class="b1">Nom ▬</span> Nom de famille de votre personnage.
<span class="b1">Prénom(s) ▬</span> Le ou les prénoms de votre personnage.
<span class="b1">Surnom ▬</span> Le petit surnom de votre personnage, s'il en a un. Sinon, supprimez cette ligne.
<span class="b1">Âge ▬</span> L'âge réel de votre personnage. (S'il est un Contractant, indiquez celui d'apparence aussi.)
<span class="b1">Orientation Sexuelle ▬</span> Hétérosexuelle/Bisexuelle/Homosexuelle/Métrosexuelle/ etc... on ne dépasse pas les limites de la décence, siou'plait!
<span class="b1">Nationalité ▬</span> Précisez seulement si votre personnage vient du pays où Pandora et l'Abysse se tiennent ([i]locale[/i]), ou s'il vient d'un pays voisin tout comme les Barma ([i]étrangère[/i]).
<span class="b1">Rang Social/Métier ▬</span> Duc ou héritier, étudiant à Lutwidge ou simple civil, indiquez la place que tient votre personnage dans la société. (Un simple civil, Contractant ou pas, doit forcément posséder un métier afin de subvenir à ses besoins.)
<span class="b1">Famille ▬</span> Les membres importants dans la famille de votre personnage. (Obligatoire pour les membres d'une des Quatres Grandes Familles Ducales.)
<span class="b1">Tatouage ▬</span> L'emplacement de votre tatouage. [b]Supprimez cette ligne si vous n'êtes pas un Baskerville.[/b]
<span class="b1">Contrat ▬</span> Le nom de votre Chain/Contractant. Précisez s'il s'agit d'un contrat légal fait par Pandora, ou d'un contrat illégal. [b]Supprimez cette ligne si vous n'avez aucun contrat.[/b]
<span class="b1">Pouvoir(s) ▬</span> Décrivez les pouvoirs de votre Chain, ou de votre personnage s'il est lui-même un monstre de l'Abysse. Soyez précis, et n'abusez pas ! Les administrateurs se réservent le droit de refuser un pouvoir s'ils le juge trop puissant/inapproprié. Pour les Sorciers, n'oubliez pas de décrire les "rapports" du personnage avec ses pouvoirs (maîtrise et tout ce qui s'en suit). ([b]Supprimez cette ligne si vous n'avez aucun contrat, si vous n'êtes pas un Chain ou si vous n'êtes pas un Sorcier.[/b])</div>

<div class="prestitre">Caractère ;</div>
[size=11][i]« Citation, jukebox ou autre. »[/i][/size]

<div class="presdesc">Décrivez-nous la manière de penser de votre personnage. Comment il réagirait dans telle ou telle situation. Est-il un grand romantique, quelqu'un de posé, de travailleur ? Ou à l'inverse, il ne sait pas tenir en place, un homme de terrain qui doit absolument éviscérer ses adversaires. Eh oui, il faut de tout pour faire un monde, c'est bien connu ! Alors n'hésitez pas à nous donnez quelques détails inintéressants, on en raffole. ♥ N'oubliez pas de mentionner ses principales qualités, et ses principaux défauts. Et dites-nous ce qu'il aime, et ce qu'il déteste. Non, ce n'est pas une option, vous êtes o-bli-gés~

[center][b]Une quinzaine de lignes est requise pour cette partie.[/b][/center]</div>

<div class="prestitre">Physique ;</div>
[size=11][i]« Citation, jukebox ou autre. »[/i][/size]

<div class="presdesc">Tout le monde est différent, et chacun a ses complexes. Décrivez votre personnage, histoire qu'on puisse se l'imaginer. C'est toujours bien de savoir à qui on parle, hein~ Parlez-nous de son visage, ses cheveux, la couleurs de ses yeux. S'il est grand ou petit, et s'il a des problèmes de poids. Il doit sûrement avoir des goûts en matière de vêtements aussi, alors ne vous gênez pas pour les citer ici. ♪ Vous savez, il va falloir la remplir cette partie, alors autant trouver de quoi écrire.

[center][b]Une quinzaine de lignes est requise pour cette partie.[/b][/center]</div>

<div class="prestitre">Histoire ;</div>
[size=11][i]« Citation, jukebox ou autre. »[/i][/size]

<div class="presdesc">Once upon a time... c'est généralement ainsi que tout conte commence. Mais est-ce que l'histoire de votre personnage se terminera aussi par une [i]happy end[/i] ? Je doute que tout ait été rose, mais je ne pense pas non plus qu'il ait eu la vie la plus atroce au monde. Enfin, racontez-nous tout, nous sommes curieux, et nous voulons tout savoir~ Aussi, cette partie est la seule où aucune limite ne vous est imposée (contrairement au caractère et au physique, où on vous priera de ne pas nous faire des romans non plus). Laissez libre cours à votre imagination, narrez l'enfance de votre personnage, si certains évènements traumatisants sont intervenus, ou si au contraire il a vécu normalement entouré de gens aimants. Est-il allé étudier à Lutwidge, ou y est-il encore ? N'oubliez pas non plus les rencontres importantes qu'il a fait par le passé, et qui ont très certainement influencées sa vie.

[center][b]Une vingtaine de lignes est requise pour cette partie.[/b][/center]</div>

<div class="prestitre">Test RP ;</div>
[spoiler][left]Le test RP est un passage obligatoire, est peut-être la partie la plus importante de cette fiche. En ce qui concerne les O.C. (Original Characters, personnages inventés) un simple ancien rp de votre cru fera parfaitement l'affaire. Mais nos chers petits prédéfinis vont devoir improviser, histoire de nous prouver qu'ils sont bien dans la peau de leur personnage ! ♥[/left]

[center][b]Une vingtaine de lignes est requise pour cette partie.[/b][/center][/spoiler]</div></center>
Je vous remercie de votre aide en avance. ;w;


Dernière édition par Oz-Chan le Mer 19 Mar 2014 - 19:23, édité 1 fois

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Fiche présentation décalage - center

Message par MlleAlys le Mer 19 Mar 2014 - 18:35

Bonjour,
dans le bloc css
Code:
.presprofile {
  height: 221px;
  overflow: auto;
  margin: 0 10px 0 255px;
  padding: 7px;
  text-align: justify;
  font-size: 11px;
  background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/prout10.jpg");
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

retirez la marge de 255px à gauche ^^
Ce qui donne :
Code:
.presprofile {
  height: 221px;
  overflow: auto;
  margin: 0 10px 0 0px;
  padding: 7px;
  text-align: justify;
  font-size: 11px;
  background-image: url("http://i78.servimg.com/u/f78/12/80/18/70/prout10.jpg");
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fiche présentation décalage - center

Message par Oz-Chan le Mer 19 Mar 2014 - 19:22

Bonsoir et merci pour votre aide !
Han, c'était ce petit coquin qui embêtait alors ! XD Tout est bon cette fois-ci. Je vous remercie pour votre rapidité ♥
je clos ^^

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum