Améliorer l'alignement de trois blocs

Bonjour !

Voilà, je n'ai pas suivi un tutoriel en particulier, j'ai pioché un peu de ci de là, afin de réaliser une fiche présentation pour forum RPG, dont on puisse mettre les couleurs à jour en fonction du thème. Marre des éditions multiples et des fiches dépareillées !

J'ai songé à l'option formulaire mais je n'ai pas passé le cap : trop long, trop compliqué, j'ai pas le niveau.

Du coup j'en suis restée à l'option "class" qui me semble plus simple et presque aussi pratique.

Après l'historique,le problème :
- J'ai voulu placer trois blocs côte à côte : 1- Votre héros 2- Avatar 3- Un peu de Vous.

J'ai tenté différentes méthodes, torturé le code, et finalement je n'ai réussi à bien aligner tout ce beau monde qu'en jouant avec les marges et la position absolute.

Du coup, pour la suite de la fiche (descriptions, histoire etc), j'ai dû placer un petit paquet de

Code:

<br />

.

Dans l'absolu, le résultat est le même, c'est vrai. Mais en pratique, je n'aime pas du tout voir tous ces br !

J'ai tenté d'utiliser dsiplay: inline-block dans le CSS, mais ça ne fonctionne pas. Peut-être parce que mes trois blocs n'ont pas la même "class", ni la même taille ?

Requête :
Ce que j'aimerai, c'est trouver un moyen que mes trois blocs s'alignent gentiment, et que les descriptions se placent d'elles-même à la suite, sans avoir à utiliser 36 "br /".

Ci-dessous le CSS suivi de la fiche html :

Code:

/*FICHE PRESENTATION*/

.contour_cadre {
width: 100%;
 margin: auto;
  border-bottom: solid 15px #977A50;
  border-right: solid 2px #977A50;
  border-left: solid 2px #977A50;
  border-top: solid 30px #977A50;
    border-radius: 30px 30px 30px 30px;
background-color: #CDB986;
  padding-bottom: 10px;
}

.contour_cadre_deux {
  border-top: solid 20px #e3ce8c;
    margin-top: -20px;
}

.pseudo_perso {
  width: 100%;
  margin-top: -35px;
    text-align: center;
text-shadow: 0px 0px 1px black;
font-family: Tangerine;
font-size: 50px;
font-color: #e3ce8c;
}


.prez_gauche {
  position: absolute;
  margin-left: 5px;
  padding-right: 3px;
  padding-left: 3px;
    background-color: #CDB986;
  border: solid 1px #e3ce8c;
     width: 230px;
  min-height: 400px;
  max-height: 500px;
font-family: Verdana;
color: #fbf7ed;
  text-align: justify;
  }

.prez_centre {
  position: absolute;
  margin-left: 250px;
  margin-top: -36px;
      background-color: #CDB986;
           width: 250px;
  height: 400px;

  }

.prez_droite {
  position: absolute;
  padding-right: 3px;
  padding-left: 3px;
  margin-left: 507px;
  margin-top: -72px;
  background-color: #CDB986;
  border: solid 1px #e3ce8c;
  width: 230px;
  min-height: 400px;
  max-height: 500px;
font-family: Verdana;
color: #fbf7ed;
  text-align: justify;
 }


.contenu_col {
  width: 750px;
  margin: auto;
 }


.description_personnage {
  width: 100%;
  background-color: #e3ce8c;
font-family: Fredericka the Great;
font-size: 22px;
color: #544515;
text-align: center;
}

.police_style_predef1 {
font-family: Fredericka the Great;
font-size: 14px;
  font-weight: lighter;
color: #544515;
}

.bloc_texte {
  text-align: justify;
  padding: 10px;
}

.deco_fond {
  width: 100%;
  height: 30px;
  backround-color: #e3ce8c;
  }

Code:

<div class="contour_cadre">
<div class="contour_cadre_deux">
<div class="pseudo_perso">Votre Personnage</div>

<div class="contenu_col">
<div class="prez_gauche"><p class="description_personnage"> Votre Heros</p>
<span class="police_style_predef1">Nom :</span> Écrire ici
<span class="police_style_predef1">Prénom :</span> Écrire ici
<span class="police_style_predef1">Surnom :</span> Écrire ici
<span class="police_style_predef1">Sexe :</span> Écrire ici
<span class="police_style_predef1">Âge :</span> Écrire ici
<span class="police_style_predef1">Guilde :</span> Écrire ici
<span class="police_style_predef1">Rang :</span> Écrire ici
<span class="police_style_predef1">Maître/Apprenti :</span> Écrire ici
<span class="police_style_predef1">Objectif(s) :</span> Écrire ici
</div>

<div class="prez_centre"><div style="width: 250px; height: 400px; background: url(http://img15.hostingpics.net/pics/766952sansavatar6.png) center center no-repeat;"></div></div>

<div class="prez_droite"><p class="description_personnage">Un peu de Vous</p>
<span class="police_style_predef1">Prénom/surnom :</span> Écrire ici
<span class="police_style_predef1">Âge :</span> Écrire ici
<span class="police_style_predef1">Goûts :</span> Écrire ici
<span class="police_style_predef1">Comment avez-vous connu le forum ?</span> Écrire ici
<span class="police_style_predef1">Avez-vous de l'expérience en RPG ?</span> Écrire ici
<span class="police_style_predef1">Votre activité sur le forum ?</span> Écrire ici (x Jours/7)
<span class="police_style_predef1">Est-ce un double compte ?</span> Écrire ici
<span class="police_style_predef1">Votre première impression sur le forum ?</span> Écrire ici
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="description_personnage">Capacités</p>
<div class="bloc_texte">ÉCRIRE ICI LES CAPACITES DE VOTRE PERSONNAGE (5 lignes complètes minimum)
</div>
<p class="description_personnage">Description Mentale</p>
<div class="bloc_texte">ÉCRIRE ICI LES CAPACITES DE VOTRE PERSONNAGE (10 lignes complètes minimum)
</div>
<p class="description_personnage">Description Physique</p>
<div class="bloc_texte">ÉCRIRE ICI LES CAPACITES DE VOTRE PERSONNAGE (5 lignes complètes minimum)
</div>
<p class="description_personnage">Histoire</p>
<div class="bloc_texte">ÉCRIRE ICI LES CAPACITES DE VOTRE PERSONNAGE (20 lignes complètes minimum)
</div></div></div>

Voilà, je crois que vous savez tout ! Si quelqu'un a une solution je suis preneuse :)
D'avance un grand merci !!

Salut,

Personnellement, j'aurais utiliser des float pour aligner les divs. Le capitaine en a parlé dans le cursus ici. J'ai pas des connaissances étendues en codage donc je suis pas sûre que ce soit THE solution mais ça marche dans ma méthode de bidouillage en tout cas :)

Bonjour !
Merci Neva, il me semble que j'avais essayé et... que j'avais planté. Mais je vais retenter l'expérience dès que possible. Je pars en vacances une grosse semaine d'ici ce soir, alors est-il possible de ne pas archiver ma demande avant le 31 août s'il vous plaît ? Car je n'aurais pas le temps de tester avant...

D'avance merci ! A très bientôt :)

Pas de problème, je mets en pause !
Même si float ne marche pas tout de suite, montre-nous le code. Là, avec ton code et le position:absolute, ça me semble normal que ce soit indépendant et donc que tu aies cet espace. Cela dit, maintenant que j'y penses si tu veux un bidouillage plus propre que les br je propose une div vide de la hauteur nécessaire :)

Bonjour !

Je suis de retour de vacances, merci d'avoir estampillé ma fiche "en pause" pendant mon absence =D

J'ai enfin pu tester cette histoire de float en suivant le tuto du capitaine proposé par Neva... et essuyé un nouvel échec Je ne sais pas où j'ai foiré ou si c'est tout simplement dû à la mise en page souhaitée, mais je vous donne les codes :

Le CSS :

Code:

/*FICHE PRESENTATION*/

.contour_cadre {
width: 100%;
 margin: auto;
  border-bottom: solid 15px #977A50;
  border-right: solid 2px #977A50;
  border-left: solid 2px #977A50;
  border-top: solid 30px #977A50;
    border-radius: 30px 30px 30px 30px;
background-color: #CDB986;
  padding-bottom: 10px;
}

.contour_cadre_deux {
  border-top: solid 20px #e3ce8c;
    margin-top: -20px;
}

.pseudo_perso {
  width: 100%;
  margin-top: -35px;
    text-align: center;
text-shadow: 0px 0px 1px black;
font-family: Tangerine;
font-size: 50px;
font-color: #e3ce8c;
}


.prez_gauche {
  float: left;
  padding-right: 3px;
  padding-left: 3px;
    background-color: #CDB986;
  border: solid 1px #e3ce8c;
     width: 230px;
  height: 400px;
  overflow: auto;
font-family: Verdana;
color: #fbf7ed;
  text-align: justify;
  }

.prez_centre {

      background-color: #CDB986;
           width: 250px;
  height: 400px;

  }

.prez_droite {
    padding-right: 3px;
  padding-left: 3px;
     background-color: #CDB986;
  border: solid 1px #e3ce8c;
  width: 230px;
  height: 400px;
 overflow: auto;
font-family: Verdana;
color: #fbf7ed;
  text-align: justify;
 }


.contenu_col {
  width: 750px;
  margin: auto;
 }


.description_personnage {
  width: 100%;
  background-color: #e3ce8c;
font-family: Fredericka the Great;
font-size: 22px;
color: #544515;
text-align: center;
}

.police_style_predef1 {
font-family: Fredericka the Great;
font-size: 14px;
  font-weight: lighter;
color: #544515;
}

.bloc_texte {
  text-align: justify;
  padding: 10px;
}

.deco_fond {
  width: 100%;
  height: 30px;
  backround-color: #e3ce8c;
  }

Et ce brave html :

Code:

<div class="contour_cadre">
<div class="contour_cadre_deux">
<div class="pseudo_perso">Votre Personnage</div>

<div class="contenu_col">
<div class="prez_gauche"><p class="description_personnage"> Votre Heros</p>
<span class="police_style_predef1">Nom :</span> Écrire ici
<span class="police_style_predef1">Prénom :</span> Écrire ici
<span class="police_style_predef1">Surnom :</span> Écrire ici
<span class="police_style_predef1">Sexe :</span> Écrire ici
<span class="police_style_predef1">Âge :</span> Écrire ici
<span class="police_style_predef1">Guilde :</span> Écrire ici
<span class="police_style_predef1">Rang :</span> Écrire ici
<span class="police_style_predef1">Maître/Apprenti :</span> Écrire ici
<span class="police_style_predef1">Objectif(s) :</span> Écrire ici
</div>

<div class="prez_centre"><div style="width: 250px; height: 400px; background: url(http://img15.hostingpics.net/pics/766952sansavatar6.png) center no-repeat;"></div></div>

<div class="prez_droite"><p class="description_personnage">Un peu de Vous</p>
<span class="police_style_predef1">Prénom/surnom :</span> Écrire ici
<span class="police_style_predef1">Âge :</span> Écrire ici
<span class="police_style_predef1">Goûts :</span> Écrire ici
<span class="police_style_predef1">Comment avez-vous connu le forum ?</span> Écrire ici
<span class="police_style_predef1">Avez-vous de l'expérience en RPG ?</span> Écrire ici
<span class="police_style_predef1">Votre activité sur le forum ?</span> Écrire ici (x Jours/7)
<span class="police_style_predef1">Est-ce un double compte ?</span> Écrire ici
<span class="police_style_predef1">Votre première impression sur le forum ?</span> Écrire ici
<span class="police_style_predef1">Mot de passe :</span> Un mot de passe est dissimulé dans le règlement du forum ! Vous devez lire les Décrets Impériaux et trouver le mot de passe pour pouvoir être validé. Veillez à l'inscrire entre les balises "hide" (inscrites dans le code plus bas)
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p class="description_personnage">Capacités</p>
<div class="bloc_texte">ÉCRIRE ICI LES CAPACITÉS DE VOTRE PERSONNAGE (5 lignes complètes minimum)
</div>
<p class="description_personnage">Description Mentale</p>
<div class="bloc_texte">ÉCRIRE ICI LES QUALITÉS ET DÉFAUTS DE VOTRE PERSONNAGE (10 lignes complètes minimum)
</div>
<p class="description_personnage">Description Physique</p>
<div class="bloc_texte">DÉCRIRE ICI VOTRE PERSONNAGE (5 lignes complètes minimum)
</div>
<p class="description_personnage">Histoire</p>
<div class="bloc_texte">RACONTER ICI L'HISTOIRE DE VOTRE PERSONNAGE (20 lignes complètes minimum)
</div></div></div>


Et cela donne (attention les yeux x'D) :

Spoiler:

Si vous voyez où j'ai bourdé...

Sinon j'aime bien ta technique bidouillage avec la div vide haha ! Je pense que je vais l'adopter au moins provisoirement, histoire de ne plus voir tous ces br, merci !

Un petit up en passant Rien d'urgent, juste pour éviter l'archivage.
J'ai utilisé l'astuce de Neva avec une div vide de la taille voulut en attendant, ça fonctionne bien, plus de br !
Mais si à l'avenir je peux utiliser le float sans que ça s'empile n'importe comment, ce serait parfait.

Up :)
Toujours pas urgent, mais autant éviter l'archivage ^^

Coucou Elwing :)

Effectivement, quand tu utilises position: absolute, c'est exactement comme si les éléments prenaient une taille de 0px.
En général, on met une div autour (dans ton code c'est .contenu_col je crois) et on lui définis une hauteur correspondant à l'espace que cela doit prendre :)

Au passage je te conseille de lire le cursus codage sur les position absolute et relative par Scavenger. En effet là tu utilises margin-left et margin-top pour positionner les éléments, alors que cela serait mieux de jouer avec top / left / right, etc... (simple petit conseil ♥)

____

Ensuite pour ta tentative avec les float, il te faut mettre un float left sur .prez_centre aussi, tout comme sur .prez_droite

Ensuite attention, à chaque fois que tu fais un retour à la ligne dans l'éditeur de texte de Forumactif, ça crée une balise br

Ce qui va causer ce genre de décalage :

Pour enlever ces br là, on peut utiliser ce bout de code CSS :

Code:

.contenu_col > br {
    display: none;
}

Cela signifie "Cache tous les br qui directement à l'intérieur de .contenu_col". Il y a dans la partie tutoriel en codage un tuto (que de répétitions) sur les sélecteurs en CSS, fait par Manumanu, très intéressant .

Enfin, il faut penser à rajouter quelque chose pour clear le float. Dans le cursus codage, NyoTheNeko a fait une partie dessus je crois :)

Effectivement, quand tu utilises position: absolute, c'est exactement comme si les éléments prenaient une taille de 0px.

Ça explique beaucoup de chose !!

Ensuite attention, à chaque fois que tu fais un retour à la ligne dans l'éditeur de texte de Forumactif, ça crée une balise br Wink

Le monde s'éclaire *.*


Des float partout donc... je croyais qu'il n'en fallait qu'un sur le premier ^^" *Elwing à côté de la plaque*

J'ai lu une grosse partie du cursus codage pourtant, mais j'ai dû louper un morceau (et je n'ai pas encore fini)


Je te remercie beaucoup de ces précisions, ça répond à bien des interrogations sur mes tests foireux =) Les suivants seront éclairés d'une lumière nouvelle ^^
Encore merci ! Je garde ce post sous le coude pour le reprendre à tête reposée, mais j'édite en résolu !

Encore merci !

Contente d'avoir pu aider (^-^)

Au pire, si tu veux continuer sur le même sujet, je pense que tu peux demander à le mettre en pause si tu vas bientôt te replonger dedans.

Enfin bon, peu importe le choix, bon courage, hésite pas si tu as des questions.

Des float partout donc... je croyais qu'il n'en fallait qu'un sur le premier ^^" *Elwing à côté de la plaque*

En fait, si tu veux mettre plusieurs blocs à côté il faut faire comme ça.
Si c'est juste mettre un élément à gauche (avec un float), et du contenu (texte / image) à droite là tu peux le mettre seulement sur l'image. Mais si ce sont des blocs, il faut les mettre en float ^^

Dac, merci !
Blocs = total float.
Élément tout seul = un float. Celui-là je le connaissais, merci les tutos :p

Je retiens !

Rien que le absolute et sa considération 0px déjà, je comprends mieux le comportement de la bestiole qui s'éparpillait joyeusement.
Et les br qui s'ajoutent au retour à la ligne aussi ! Combien de fois j'ai du éditer parce que des espaces apparaissaient de leur seul chef ? pppfffft ! Je retiens vraiment l'astuce de planquer les br, je ne connaissais pas encore cette "forme" de code CSS (avec le ">").

Tu as raison, je vais mettre en pause le temps de m'y replonger, comme ça si je cale à nouveau je reposte ici :)

Salut Elwing,
Ca fait un moment maintenant. Ca donne quoi ? Tu t'en sors ?