[FAQ] Personnaliser sa description

Forum Hors Jeu dédié aux questions des nouveaux joueurs (plus d'infos)

Modérateurs : MJs, MJs Baie

Répondre
Avatar du membre
Béryl Jaspenimbes
Messages : 63
Enregistré le : 14 nov. 2018, 20:27

Re: [FAQ] Personnaliser sa description

Message par Béryl Jaspenimbes »

Plop à toi aussi du coup. :D

Les arrondis sont donnés par l'attribut "border" parfois suivit de chose comme "-top-left" ou "-bottom-right" (s'il est nécessaire de spécifier le coin concerné) puis terminé par "-radius : *valeur*px;" où *valeur* est un chiffre qui correspond à l'amplitude de l'arrondi.

Exemple :

Code : Tout sélectionner

border-top-left-radius: 26px;
En ce qui concerne la position de l'image j'ai du mal à voir ce que tu veux dire. Te serait-il possible de poster le code dysfonctionnel (avec la description du personnage en elle-même remplacée par un texte lambda) pour que l'on puisse voire ce qui cloche ?
"Ne me réveillez en aucun cas, même pour la fin du monde, sauf si les effets spéciaux sont vraiment réussis." - R.Zelazny
Rium
MJ Technique
Messages : 1813
Enregistré le : 20 juin 2009, 17:34

Re: [FAQ] Personnaliser sa description

Message par Rium »

Kiera Sorcha a écrit : Plop, j'ai tenté une personnalisation de ma fiche de perso, mais j'ai un peu de mal avec le positionnement de l'image (dès que j'adapte à la taille de mon image, elle change de place ^^) et les arrondis de la bordure que je voudrais enlever.

Un petit coup de main, siouplait. ?
Tu peux m'envoyer un email sinon (rium@jdr-odyssee.net) si tu veux que je t'aide (en me disant ce que tu souhaites exactement).
Avatar du membre
Kiera Sorcha
Messages : 11
Enregistré le : 24 janv. 2020, 14:19
Localisation : Graz, Autriche
Contact :

Re: [FAQ] Personnaliser sa description

Message par Kiera Sorcha »

Je vous remercie pour vos conseils, votre attention et votre temps...

mais finalement, j'ai trouvé le temps de faire mon propre code (avec bien plus de CSS que je maitrise finalement mieux).
Je vous mets le code, pour satisfaire votre curiosité :

Code : Tout sélectionner

 <!DOCTYPE html>
 <html>
<head>
<style>

div.background {
	opacity : 0,5;
	background: url(http://fredetsev.eu/galeriesLR/weekend_07_2014_konigsee/content/images/large/IMG_3577.jpg);
	width : 1024px;
	height : 683px;
	border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

div.imgperso {
	margin:30px;
	background: url(http://fredetsev.eu/Kiera/kiera_sorcha.jpg);
	border : 2px solid grey;
	width : 288px;
	height : 181px;
	position: relative;
	top: -550px;
	right: -100px;
	box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index :2;
}

div.description {
	margin:30px;
	border : 2px solid grey;
	width : 590px;
	height : 350px;
	position: relative;
	top: -750px;
	right: -250px;
	z-index : 1;
}


h1 {
	font-family:palatino linotype;
	font-size :20px;
	text-align :center;
}

h2 {
	font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
	font-size : 14px;
	text-align : justify;
	line-height: 20px;
	margin : 50px;
}


</style>
</head>
<body>


<!-- 
3.NOM DU PERSONNAGE
-->
<div class="background">
  <div class="transbox">
    <p><h1>Kiera Sorcha</h1></p>
  </div>
</div>

<!-- Image perso
-->
<div class="imgperso";>
</div>

<div class="description transbox";>
<h1> - Race du perso- </h1>
<h2> description du perso avec inclusion de balises br pour la mise en forme des différents paragraphes.</h2>
</div>



</body>
</html> 



</body>

</html> 






--------------------------------------------
La vie est une bougie dans le vent.
Avatar du membre
Joana-lyne Vendunor
Messages : 3
Enregistré le : 03 avr. 2020, 09:56

Re: [FAQ] Personnaliser sa description

Message par Joana-lyne Vendunor »

Mélendis Oximort a écrit : 13 nov. 2019, 22:10
Béryl Jaspenimbes a écrit : 03 mars 2019, 23:50 Bonjour tout le monde,

Je me permet de partager avec vous ma dernière tentative de page de description. C'est un modèle de description sans prétention mais ça peut intéresser du monde. Je me suis pas mal inspiré de ce que j'ai vu de plus joli à droite à gauches sur les descriptions des copains donc si ça ressemble à quelque chose que vous avez déjà vu, c'est normal ! Le code (à personnaliser) ressemble à ça :

Béryl Jaspenimbes

J'ai utilisé ton code, que j'ai légèrement réadapté à ma sauce.
Merci.
Je suis trop mauvais en CSS et j'ai aucun goût. Mais grâce à toi, ceci ne se verra pas sur mon perso. ;)

Image

Bonjour à tous :)

Melendis, dis moi, comment as tu changé le code pour rendre le cadre carré et non semi arrondi ? Tu peux nous envoyer un extrait du code ?

J'ai une grande description et comme la forme du texte est carrée, elle déborde des endroits arrondis ^^

Merci d'avance,
Jyk'O
Messages : 8
Enregistré le : 07 juin 2019, 13:33

Re: [FAQ] Personnaliser sa description

Message par Jyk'O »

Joana-lyne Vendunor a écrit : 03 avr. 2020, 10:41 Bonjour à tous :)

Melendis, dis moi, comment as tu changé le code pour rendre le cadre carré et non semi arrondi ? Tu peux nous envoyer un extrait du code ?

J'ai une grande description et comme la forme du texte est carrée, elle déborde des endroits arrondis ^^

Merci d'avance,
Pour jouer avec les arrondis des coins de la description du perso, faut regarder le paragraphe 4 du code de Béryl et jouer avec les paramètres border-radius:xxpx et border-top-right-radius: 100px; border-bottom-right-radius: 100px
Si tu veux que ça soit un angle droit, tu peux laisser que le premier et mettre 0 ;)

J'en profite pour remercier moi aussi Béryl car j'utilise aussi sa base de code \o/
[11:52] <Gigot> je peux faire connaissance avec ton manche
Avatar du membre
Joana-lyne Vendunor
Messages : 3
Enregistré le : 03 avr. 2020, 09:56

Re: [FAQ] Personnaliser sa description

Message par Joana-lyne Vendunor »

Tout à fait, un grand merci :) J'ai réussi !

Je jongle avec ce code aussi, ce qui n'est pas évident, mais sacrément utile d'avoir une base !!

Je me trouve confrontée à un nouveau questionnement :

1- comment réduire la marge entre le bord du cadre et le nom du personnage ?
2- comment agrandir la largeur du bloc flottant où l'on met la description du personnage ? Je voudrais qu'il soit plus "collé" au cartouche de l'image du perso mais rien n'y fait :(
Jyk'O
Messages : 8
Enregistré le : 07 juin 2019, 13:33

Re: [FAQ] Personnaliser sa description

Message par Jyk'O »

Euh bah dans ce cas, je te propose que je t'aide en message privé. J'ai déjà joué un peu avec, en ce moment j'ai du temps et je pense que je peux t'aider pour tout ce que tu veux faire et ça évitera de spammer ici ;)
[11:52] <Gigot> je peux faire connaissance avec ton manche
Avatar du membre
Joana-lyne Vendunor
Messages : 3
Enregistré le : 03 avr. 2020, 09:56

Re: [FAQ] Personnaliser sa description

Message par Joana-lyne Vendunor »

Dac super !!
Avatar du membre
Khelsiin
Messages : 7
Enregistré le : 02 déc. 2019, 19:47

Re: [FAQ] Personnaliser sa description

Message par Khelsiin »

Bonjour,

Voulant me lancer dans l'aventure de la personnalisation de description mais n'y connaissant pas grand chose en html et css, je me suis dit que je ferai apparaitre une image (qui est trop grosse pour être directement uploader évidemment ^^). Je vous ai lu, j'ai pas tout compris, j'ai cherché sur le net et j'ai abouti à cela qui ne fonctionne pas.

Code : Tout sélectionner

<!DOCTYPE html>
<html>
    <head>
           <title>description</title>
    </head>
    <body>
          <img src="url de mon image" width="960" height="540" />
    </body>
</html>
Toutes les balises m'ont l'air fermé. Du coup, je ne sais pas trop. Si vous aviez une aide a me donner. J'ai peut être mal écrit un truc. Pourtant, ça m'avait l'air simple. Peut être que cela vient de mon image que j'ai uploadé. J'ai essayé en jpeg et en png. Je me suis dit cela pouvait venir de là mais pas de différence.

Je vous remercie d'avance.

Je suis preneur également d'une critique sur la taille de l'image. Si elle vous parait trop grosse, trop petite, pour un affichage agréable sur l'écran, je vous remercie de me le dire. Parce que je fais ça pour que les autres joueurs soient contents de voir une belle description (et un peu pour moi aussi ^^)
Rium
MJ Technique
Messages : 1813
Enregistré le : 20 juin 2009, 17:34

Re: [FAQ] Personnaliser sa description

Message par Rium »

Khelsiin a écrit : 04 avr. 2020, 04:32 Bonjour,

Voulant me lancer dans l'aventure de la personnalisation de description mais n'y connaissant pas grand chose en html et css, je me suis dit que je ferai apparaitre une image (qui est trop grosse pour être directement uploader évidemment ^^). Je vous ai lu, j'ai pas tout compris, j'ai cherché sur le net et j'ai abouti à cela qui ne fonctionne pas.

Code : Tout sélectionner

<!DOCTYPE html>
<html>
    <head>
           <title>description</title>
    </head>
    <body>
          <img src="url de mon image" width="960" height="540" />
    </body>
</html>
Toutes les balises m'ont l'air fermé. Du coup, je ne sais pas trop. Si vous aviez une aide a me donner. J'ai peut être mal écrit un truc. Pourtant, ça m'avait l'air simple. Peut être que cela vient de mon image que j'ai uploadé. J'ai essayé en jpeg et en png. Je me suis dit cela pouvait venir de là mais pas de différence.

Je vous remercie d'avance.

Je suis preneur également d'une critique sur la taille de l'image. Si elle vous parait trop grosse, trop petite, pour un affichage agréable sur l'écran, je vous remercie de me le dire. Parce que je fais ça pour que les autres joueurs soient contents de voir une belle description (et un peu pour moi aussi ^^)
Il ne faut pas mettre toutes les balises d'une page HTML ! Seulement celles de ton contenu. Je t'invite à me contacter par email sur rium@jdr-odyssee.net avec ton code complet et ton image en pièce jointe afin que je puisse t'aider au mieux.
Répondre