Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer une fiche de présentation dont les informations principales du personnage se trouve dans un bandeau à gauche, ce qui permet d'alléger la structure et de faire moins gros patté à la lecture. :)

Les Codes :

Code HTML à placer dans votre message:

Code CSS, à placer dans le feuille de style de votre forum:

Explications et décorticages de la fiche :

La partie gauche : Le bandeau.

C'est toute cette partie sur le code HTML:

Si vous souhaitez y faire des modifications, elle est liée au CSS suivant :

Code:

.presentation_gauche {
background: #aa8e65;
border-top: 8px solid #266d5e;
border-bottom: 8px solid #266d5e;
width: 230px;
height: 975px;
padding: 5px; }


L'image :

Code:

<div class="presentation_image"><img src="http://img11.hostingpics.net/pics/736400imagrpresentation.png" /></div>

J'ai ajouté une image d'illustration pour que cela soit plus visuel. Vous pouvez choisir de la garder ou d'enlever cette partie. Pour éviter que mes membres ne mettent des images disproportionné et déforme la fiche, j'ai mis une largeur et une hauteur.

Code:

.presentation_image img {
width: 190px;
 height: 150px;
margin: 5px 0px 0px 17px; }

- width: 190px; C'est la largeur.
- height: 150px; C'est la hauteur.

A vous de jouer avec les valeurs pour donner la taille que vous souhaitez à l'image.

Les Titres :

Code:

<div class="titre_gauche">Mon Titre</div>

Ceci est la balise html du titre de la partie, elle est reliée au CSS suivant :

Code:

.titre_gauche {
background: #266d5e;
width: 230px;
color: #a0ebc4;
text-align: center;
font-size: 20px;
margin-left: -5px;
margin-bottom: -15px;
padding: 5px; }

Overflow

Pour les deux parties "Magie" et "Inventaire", j'ai mis un overflow, si vous souhaitez en ajouter à d'autres partie, c'est le morceau de code html suivant :

Code:

<div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>

Qui est liée au CSS suivant :

Code:

.description_gauche {
width: 230px;
height: 100px;
overflow: auto;
text-align: justify; }

La partie de droite : le corps de la présentation.

C'est toute cette partie sur le code HTML:

Si vous souhaitez y apporter des modification, il faudra toucher au CSS suivant :

Code:

.presentation_droite {
background: #c6a97e;
border-top: 8px solid #266d5e;
border-bottom: 8px solid #266d5e;
width: 445px;
height: 975px;
padding: 5px;
margin-left: -4px; }

Le Pseudo :

Le code HTML :

Code:

<div class="presentation_pseudo">Prénom P. Nom</div>

Le Css lié :

Code:

.presentation_pseudo {
 width: 445px;
text-align: center ;
font-size: 45px;
color: #266d5e;
font-variant: small-caps; }

La Citation :

Le code HTML :

Code:

<div class="presentation_citation">« Citation du personnage qui peut être petite, moyenne, longue, voir même très très longue. C’est au choix du joueur. »</div>

CSS lié :

Code:

.presentation_citation {
 width: 445px;
text-align: center ;
font-style: italic;}

Les Titres :

Le code HTML :

Code:

<div class="titre_droite">Physique</div>

CSS lié :

Code:

.titre_droite {
background: #266d5e;
width: 230px;
color: #a0ebc4 ;
text-align: center ;
font-size: 20px;
padding: 5px; }

Les Descriptions :

Le code HTML :

Code:

<div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>

CSS lié :

Code:

.description-droite {
background: #aa8e65;
margin-top: -18px;
width: 435px;
height: 240px;
overflow: auto;
text-align: justify;
padding: 5px; }

Coucou Rozenbrez ! Je te remercie du partage de ton code, il est franchement sympathique en plus :3

J'aimerai cependant te faire remarquer quelques petites choses afin de rendre tes codes plus court, si tu n'y vois pas d'inconvénient.

Dans un premier temps, j'ai remarqué que tu utilisais le système de tableau pour la mise en forme de ton code afin de mettre les deux éléments de la fiche côte à côte. C'est bien, mais tu aurais pu te simplifier la vie et alléger ton CSS en utilisant un autre système de mise en page.
Il y a une propriété CSS qui se nomme display. Il y en a une attribuée dès le départ pour toute balise HTML. Par exemple, la valeur display de la balise span est inline. Cela veut dire qu'elle ne va pas faire de retour à la ligne comme un bloc le ferait quand elle se termine, mais qu'elle va pouvoir s'aligner avec une autre balise si c'est possible.
Ici nous pouvons, par exemple, modifier la valeur de la propriété display par défaut de tes deux div contenant les blocs à gauche et à droite pour les aligner.

De cette manière, en enlevant tes tableaux tu peux ajouter ceci à ton CSS

Code:

.presentation_gauche,
.presentation_droite{
display:inline-block;
vertical-align:top;
}

Tu noteras que grâce à une virgule, on peut attribuer le même CSS à deux classes différentes sans se répéter !

Par ailleurs, j'ai noté l'utilisation de ces balises

Code:

<center></center>

Tu peux l'utiliser en soit, mais je ne pense pas qu'il soit judicieux de garder comme habitude celle d'utiliser des balises obsolètes. Bien qu'elle soit généralement supportée par les navigateurs et encore très utilisée, il est préférable d'utiliser plutôt cette propriété si tu veux centrer un texte ou une image.

Code:

text-align:center;

De même, si d'aventure tu veux centrer un bloc (je ne sais pas si tu le sais, auquel cas désolée même si un rappel ne fais jamais de mal), tu peux aussi utiliser cette propriété avec la valeur suivante

Code:

margin:auto;

J'ai également noté le fait que, lorsqu'on installe la fiche dans un message, il y a un saut de ligne dans les blocs de gauche. Du coup il faudrait retirer le saut de ligne juste après tes blocs pour ceux qui concernent les blocs de gauche (c'est pas très clair comme explications, je l'admet xD)

Aussi j'ai pu remarquer que sur ton screen, il y avait une police spécifique pour les titres qui n'est pas présente dans le code. Ca peut tromper les utilisateurs et ils peuvent penser que c'est un bug si jamais la police n'est pas la même sur leur forum et sur le screen. Serait-il possible de l'ajouter du coup ? :)

En tout cas c'est génial toutes ces explications, ça va vraiment faciliter la personnalisation pour les membres !

Voilà j'ai fini

EDIT : Comme on a vu ça par MP du coup c'est bon ! Je déplace ça en section.
Encore merci de ton partage

jolie merciii

Merci pour le partage !

Merci.

Merci pour ce partage

Merceee

Merceee

M e r c i b e a u c o u p s

Très beau travail
Merci de le partager avec nous :)

Très beau travail
Merci de le partager avec nous :)