Problème de code pour un cadre entrecoupé d'écriture dans un topic.

[Mohnn]

Bonjour bonjour,

Je viens vous voir car je suis actuellement en train de coder un topic contenant le trombinoscope racial de mon forum (nous avons un forum rpg fantastique entre autre). Donc j'ai un 'plan' de rendu  que voici :

Je n'ai pas terminé de le coder toute fois je rencontre un soucis pour l'encadrement d'une classe. Vous avez dans un 'cadre' trois races : Humains, Illusionnistes et Sorciers. Au dessus vous avez le nom de la classe : Humanoïdes. Ce qui me pose problème c'est qu'il faudrait que le nom de la classe coupe le cadre.

Exemple que nous avons réalisé avec les catégories du forum :


Voici mon code dans le css :

Code:

/* trombinoscope */
.cssactif_trombinoscope {
height: auto ;
border: 1px ;
background-color: #DEE3E7 ;
margin: 5% ;
-webkit-border-radius: 20px ;
-moz-border-radius: 20px ;
border-radius: 20px ;
cellspacing: 20px ;
padding : 5%;
-webkit-box-shadow: 0px 0px 10px 0px #000000 ;
-moz-box-shadow: 0px 0px 10px 0px #000000 ;
box-shadow: 0px 0px 10px 0px #000000 ;
text-align: justify;
font: Verdana, Arial, Helvetica, sans-serif;
font-color: #1a293b;
}
.cssactif_trombinoscope_titre {
position: relative;
font-family: Parisienne;
top: -55px;
text-align: center;
padding-right: 20px;  
color:#000000;
font-size: 45px;
  }
.cssactif_trombinoscope ab {
  text-align: right;
}
.cssactif_trombinoscope_race {
height: auto ;
border: 1px solid #000000 ;
-webkit-border-radius: 20px ;
-moz-border-radius: 20px ;
border-radius: 20px ;
cellspacing: 20px ;
padding : 5%;
text-align: justify;
font: Verdana, Arial, Helvetica, sans-serif;
}
.cssactif_trombinoscope_race_titre {
position: relative;
top: -49px;
text-align: left;
color:#000000;
font-size: 30px;
}
/* FIN trombinoscope */

Mon code dans le topic du trombi :

Code:

<div class="cssactif_trombinoscope"><div class="cssactif_trombinoscope_titre">TROMBINOSCOPE RACIAL</div>

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

<div class="cssactif_trombinoscope_race"><div class="cssactif_trombinoscope_race_titre">Les humanoïdes :</div>
Les humanoïdes sont une race mortelle dont la forme de vie principale est humaine c’est à dire qu’en les croisant dans la rue, ils vous apparaissent normaux et sans pouvoirs particuliers (exception pour certains humas aux oreilles et queues apparentes par exemple).

<ab>Les humains :</ab>
Les humains sont des êtres vivants etc...

<ab>Les sorciers :</ab>
Se sont des êtres humains etc... </div>

</div>

Merci d'avance.

Mohnn.

[Scoubifitz]

bonsoir,

rajout d'un "span" pour le titre des races
mise en conformité des balises "ab" qui n'existent pas , par des balises "h4"

Code:

<div class="cssactif_trombinoscope"><div class="cssactif_trombinoscope_titre">TROMBINOSCOPE RACIAL</div>

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

<div class="cssactif_trombinoscope_race"><div class="cssactif_trombinoscope_race_titre"><span>Les humanoïdes :</span></div>
Les humanoïdes sont une race mortelle dont la forme de vie principale est humaine c’est à dire qu’en les croisant dans la rue, ils vous apparaissent normaux et sans pouvoirs particuliers (exception pour certains humas aux oreilles et queues apparentes par exemple).

<h4>Les humains :</h4>
Les humains sont des êtres vivants etc...

<h4>Les sorciers :</h4>
Se sont des êtres humains etc... </div>

</div>

Modification du CSS :

Code:

/*DEBUT trombinoscope */

.cssactif_trombinoscope {
border: 1px ;
background-color: #DEE3E7 ;
margin: 5% ;
-webkit-border-radius: 20px ;
-moz-border-radius: 20px ;
border-radius: 20px ;
padding : 20px;
-webkit-box-shadow: 0px 0px 10px 0px #000000 ;
-moz-box-shadow: 0px 0px 10px 0px #000000 ;
box-shadow: 0px 0px 10px 0px #000000 ;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #1a293b;
}
.cssactif_trombinoscope_titre {
font-family: Parisienne;
margin-top: -50px;
text-align: center;
color:#000000;
font-size: 45px;
}
.cssactif_trombinoscope h4 {
text-align: right;
font-size: 20px;
}
.cssactif_trombinoscope_race {
border: 1px solid #000000 ;
-webkit-border-radius: 20px ;
-moz-border-radius: 20px ;
border-radius: 20px ;
padding : 10px;
margin-top : 25px;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.cssactif_trombinoscope_race_titre {
margin-top: -30px;
text-align: left;
}
.cssactif_trombinoscope_race_titre span{
background-color: #DEE3E7 ;
padding :0 10px;
color:#000000;
font-size: 30px;
}
/* FIN trombinoscope */

[Mohnn]

Merci beaucoup ! C'est parfait ^^.