Sujets similaires

Dernière édition par Swan. le Sam 03 Nov 2012, 03:35, édité 1 fois

Bonjour, bonsoir à tous !

Aujourd’hui j'arrive avec une petite demande particulière, je pense que ma demande est possible mais, je ne parviens pas à le faire correctement.

Je m'explique.

J'aimerai placer cette image :
https://2img.net/r/hpimg4/pics/264669pseudo.png
SOUS le pseudo.
L'image est là, mais découpée et en toute petite partie.
Or, le résultat que je voudrais ressemble à ça:

Spoiler:

( Ne pas prendrecompte de l'écriture, j'ai pris la première chose qui venait pour l'exemple.)

Et non à ça ... :

Spoiler:

En gardant juste en tête que si possible, l'image ne doit pas masquer les écritures.

De plus, je ne parviens pas à appliquer un cadre sous les descriptions ( La lecture ici est difficile à cause du fond. J'aimerais pouvoir y mettre une image en transparence.)

Je vous confie donc le CSS de ce profil (Si besoin du Templates, dites-le moi.):

CSS:

Code:: /*PROFIL FOND*/

.stafsprof { /* Les informations du profil */
padding-top: 5px;
width: 100px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
repeat: none;
align: center;
margin-left: 30px;
padding: 5px;
padding-bottom: 15px;
}

.rang{-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin: 5px;
width: 120px;
align: center;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
margin-left: 20px;
padding-top: 10px;
margin-top: -8px;
}

#profil_head /* L'encadrement général de ton profil et avatar */
{padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;

}

#name /* le pseudo */
{
text-decoration: none;
background-image: url(http://img4.hostingpics.net/pics/264669pseudo.png);
width: 100px;
-moz-border-radius: 90px;
border-radius: 90px;
padding-right: 90px;
padding-left: 90px;
-webkit-border-radius: 90px;
text-align:justify;
text-align:center;
font-size: 18px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;

}

.postdetails.poster-profile a img { /* L'avatar et son encadrement */
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
border: solid 1px #4b4747;
}

Merci d'avance à ceux et celles qui, si possible; m'aideront !

Bonjour,

Pour l'image en transparence, je te propose cette démarche :
Tu applique à ton image de fond une classe que tu nommes, par exemple image_transparence.

Ensuite, direction le css, on ajoute du css3. Tu ajoute donc ce code :

Code:: .image_transparence
{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

Là dedans, tu peux très bien modifier la valeur. Par contre, si tu la modifie dans opacity, n'oublie pas dans la parenthèses de filter !

Après, si tu souhaite plutôt faire un bloc transparent comme ici, c'est plus compliqué mais je t'expliquerais seulement si tu préfères ce rendu.

Sinon, pour le problème de l'image, tu dois avoir quelque chose comme ceci j'imagine :

Code:: <div style="background-image: url('tonlien');">LA BALISE PSEUDO</div>

Et bien, le mieux c'est de définir une taille à ta div telle que :

Code:: <div style="height: 0px; width: 0px; background-image: url('tonlien');">LA BALISE PSEUDO</div>

A toi de miser un peu sur les tailles pour trouver la bonne. Wink

Attention Melone, ne dis pas aux membres de mettre des styles dans leur HTML quand on se tue à leur dire de ne pas le faire XD

Bonjour Swan ! Le problème de ta banderole, c'est qu'elle dépasse du "conteneur" du profil.

J'aurais besoin du template pour en savoir plus, mais en attendant : Est-ce que ton pseudo est encadré par des balises div avec une classe ? Du genre <div class="LePseudo">PSEUDO</div> ?

Il faut que cette div soit de la taille EXACTE de ton image de fond, comme ça :

Code:: .LePseudo {
width:LARGEUR;
height:HAUTEUR;
}

Puis tu dois centrer le texte horizontalement (text-align:center). Pour le verticalement, malheureusement ça risque d'être chaud, mais on verra plus tard. Je voudrais voir ce qui se passe pour ces réglages là pour commencer, on verra ensuite ce qu'il faut faire pour que la banderole "dépasse".

Je tiens à préciser que d'après ton CSS tu as un identifiant #name, ce qui est formellement déconseillé puisqu'un identifiant est sensé être UNIQUE et que la structure de l'affichage des messages fait qu'on en a plusieurs à la suite, donc plusieurs fois ton identifiant #name. Bref, ce sont des classes que tu dois utiliser dans ce contexte, pas des identifiants.

Ah d'accord, je ferrais attention merci de l'information Christa. ^^

Alors,

Merci à vous deux pour vos réponses !

Ensuite, j'avoue être perdue.
Melone : Ce fameux bloque, Où dois-je le placer précisément dans mon CSS ?
Christa : Ok ... Je vais te montrer mon Templates alors.

Citation :: Le problème de ta banderole, c'est qu'elle dépasse du "conteneur" du profil.

Oui voilà, en effet. C'est ce que je me disais ..

Alors, en fait non, tout est comme ça, je te montre la partie qui me semble intéressante dans le Templates :

Code:: <tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="profil_head">
<span class="postdetails poster-profile">
<center><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div></center>
<center>{postrow.displayed.ONLINE_IMG}<span class="cadreavatar"></span>{postrow.displayed.POSTER_AVATAR}</center>

<div class="statsprof"><span class="name"><div id="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><div class="points"></div>
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<div class="points"></div></div>
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td><div>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>

C'est la partie de mon Profil, si je n'oublie rien.

Bon, si je reprends ce qui est dit ... Est-ce ceci par exemple ?

Code:: /*PROFIL FOND*/

.profil_head {
padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;

}

.LePseudo {
width:329;
height:91;
background-image: url(http://img4.hostingpics.net/pics/264669pseudo.png);
text-decoration: none;
}

.LePseudo {
-moz-border-radius: 90px;
border-radius: 90px;
padding-right: 90px;
padding-left: 90px;
-webkit-border-radius: 90px;
text-align:justify;
text-align:center;
font-size: 18px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;

}

Le tout adapté dans le templates ?

Mais enfaite, je parlais pas tellement de bloc ! ^^
Je disais juste que niveau apparence, si jamais tu préfère un "carré" en couleur transparente sous ton texte au lieu de l'image de fond en transparence, c'est possible. Smile

Sinon, le code css tu le place dans ton css (P.A > Affichage > Gestion des couleurs > Onglet "Feuille de style css") et tu le colle à la suite. N'oublie pas d'enregistrer.
Mais bon, comme j'ai vu dans ton css que profil_head correspond à ton image de fond, tu vas rajouter ceci entre "{}" de la part profil_head :

Code:: opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */

En gros, ça te donne pour la partie profil_head :

Code:: .profil_head {
padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

Compris ?

Bonsoir,

Merci pour ta réponse,

Bon, j'suis pas une As mais l'essentiel je sais comprendre.

Néanmoins, ici, le code met en transparence TOUT le profil, sans me faire le moindre cadre pour les descriptions. =s Car ce que je voulais, c'est effectivement un carré en fond juste pour les description, légèrement en transparence par rapport au profil.

Donc il me semble qu'il ne faut pas viser le Profil Head, mais plutôt le tout début du CSS, non ? Néanmoins j'ai beau tester des choses rien ne marche.

Bon alors le mieux, c'est d'appliqué deux classes à ton profil. (en gros, deux divs à tout ton code de profil. Tu applique à la deuxième, un classe.)L'une avec seulement la fonction background-image en css (donc tu supprime dans l'autre parti le background + le code de transparence) et l'autre avec ton css de base. Je ne vois pas trop d'autres solution pour l'instant, si jamais un codeur ou Christa en a une, je suis sûre qu'elle sera meilleure. Mais le temps de te dépanner, celle là fera l'affaire. Smile

Hello !
Je viens aux nouvelles : ton problème est-il toujours d'actualité ?
Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu !
Merci de ta compréhension Image sous le pseudo.+Cadre description.[Résolue] 926145

Image sous le pseudo.+Cadre description.[Résolue] 926145

Bonjour,

Oui c'est le cas, je m'excuse, je n'ai pas encore le temps de me pencher dessus, je devrais revenir dès demain pour tester tout ça !

Hello !
Ton problème est-il toujours d'actualité ? As-tu eu le temps d'effectuer quelques essais ?
Si nous n'avons pas de réponse dans 5 jours, il sera considéré comme résolu !
Merci de ta compréhension Image sous le pseudo.+Cadre description.[Résolue] 926145

Bonjour,

Bon, j'avoue être perdue. Je ne saisie pas du tout les méthodes proposées.

Bonjour,

Est-ce que je pourrais avoir ton template viewtopic_body actuel pour me faire une idée de ce qui a été fait ? Et des CSS associés tant qu'à faire.

Il serait également utile d'avoir un lien vers ton forum de test Wink

Bonjour ' Christa.

Alors :

CSS :

Code:: /*PROFIL FOND*/

.stafsprof { /* Les informations du profil */
padding-top: 5px;
width: 130px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
repeat: none;
align: center;
margin-left: 30px;
padding: 5px;
padding-bottom: 16px;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 300px;
Height: 300px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;
}

.rang{-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin: 5px;
width: 120px;
align: center;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
margin-left: 20px;
padding-top: 10px;
margin-top: -8px;

}

#profil_head /* L'encadrement général de ton profil et avatar */
{
padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
}

#name /* le pseudo */
{
text-decoration: none;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;

}

.postdetails.poster-profile a img { /* L'avatar et son encadrement */
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
border: solid 1px #4b4747;
}

Templates :

Code:: <script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
_atc.cwait = 0;
$('.addthis_button').mouseup(function(){
if ($('#at15s').css('display') == 'block') {
addthis_close();
addthis_close();
}
});
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>
<td align="left" valign="middle" nowrap="nowrap">

<span id="twitter_btn" style="margin-left: 6px; ">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>


<span id="fb_likebtn" style="margin-left: 6px; ">
<iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</span>

</td>
<td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
|
<script type="text/javascript">//<![CDATA[
var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
</span>
</td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title">
<h1 class="cattitle"> {TOPIC_TITLE}</h1>
</td>
<td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>

{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>


<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="profil_head">
<span class="postdetails poster-profile">
<center><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div></center>
<center>{postrow.displayed.ONLINE_IMG}<span class="cadreavatar"></span>{postrow.displayed.POSTER_AVATAR}</center>

<div class="statsprof"><span class="name"><div id="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><div class="points"></div>
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<div class="points"></div></div>
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td><div>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td colspan="2">

<div class="vote gensmall">

<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>



<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">

<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>



<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>

</div>



<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>



<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>

</div>


<div class="postbody">

<div>{postrow.displayed.MESSAGE}</div>


<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>

<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />


<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}



{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}

</dt>


<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>



<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>


<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>

</dd>
</dl>


<div class="clear"></div>
<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>

</div>
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}
</td>
</tr>
</table>
</td>
</tr>

</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>



<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
</tr>



<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>

<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>


<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row2 postbody" valign="top">

» <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />

</td>
</tr>
</table>


<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>

<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>

</tr>


<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>


<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">

<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />

</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>

<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>

<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>

</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>


<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>



<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>

</tr>
</table>
</form>


<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />


<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>



<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>

<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Pas de forum de test, je te laisse accès au forum directement : http://beaconshillchronicle.forumgratuit.be/

Voilà, en espérant que tout est bien là.

Bon alors, je vais commencer par te faire travailler sur la partie concernant le profil, parce que tu as moult choses à corriger avant de faire quoi que ce soit ^^'

C'est cette partie ci :

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="profil_head">
<span class="postdetails poster-profile">
<center><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div></center>
<center>{postrow.displayed.ONLINE_IMG}<span class="cadreavatar"></span>{postrow.displayed.POSTER_AVATAR}</center>

<div class="statsprof"><span class="name"><div id="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><div class="points"></div>
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<div class="points"></div></div>
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td><div>

Je vais récapituler les erreurs et tu devras les corriger par toi même (fais des recherches sur les bases du HTML & CSS si tu as besoin d'un complément d'informations), l'important ici est que tu voies où sont tes erreurs et que tu ne les reproduise pas.

Deuxième ligne, tu déclares un div de classe .profil_head, mais on ne trouve nulle par la balise </div> associée.
Troisième ligne, nous avons le span habituel du profil, MAIS, dans la suite, tu as des éléments de type bloc (center, div), or une des règles du HTML est qu'on ne met jamais d'élément bloc dans un élément en ligne, sachant que la balise span est un élément en ligne. Il te faut donc transformer ce span (et la balise fermante associée) en div.
Quatrième ligne, on voit une balise <center> suivie d'un div. En premier lieu la balise center est obsolète, tu ne dois JAMAIS l'utiliser. En second lieu, ton code revient à appliquer un centrage + la classe rang sur le rang, il serait donc plus logique de rajouter la propriété text-align:center sur la classe .rang, non ?
Cinquième ligne, nous retrouvons la balise <center>, remplace-la par un <div align="center"> si tu y tiens, ou mieux ajoute la propriété text-align:center; à la classe .poster-profile, comme ça tout le profil sera centré par défaut. On croise également un span de classe cadreavatar qui est vide : pourquoi ? Si c'est pour encadrer l'avatar, il faudrait plutôt que tu mettes la variable correspondante entre les balises, et d'ailleurs ce serait peut-être mieux de transformer ces span en div vu que l'image est probablement traitée comme un bloc.
Sixième ligne, c'est le début de la catastrophe x)
- En premier lieu, extrais la partie suivante :
  
  Code:
  
  <a name="{postrow.displayed.U_POST_ID}"></a>
  
  Et place là directement à la suite de la première ligne. C'est l'ancre qui identifie le message et qui fait qu'on arrive directement au dernier message posté par exemple quand on clique sur le lien adéquat.
- On voit un span de classe .name suivi d'un div de classe .name, tu auras probablement compris avec mes explications précédentes qu'il faut virer ce span (et le /span associé bien entendu)
- A quoi sert le <div class="points"></div> ?
- Fais un saut de ligne avant le commentaire , ce sera plus lisible.
Huitième ligne, fais un saut de ligne après le commentaire . On retrouve la div de classe "points", pourquoi ?
Dixième ligne, voir ma remarque sur la troisième ligne x)
Douzième ligne, que vient faire ce <div> à cet endroit ? Il ne peut PAS y avoir autre chose qu'un </tr> ou un <td> (ou <th>) à la suite d'une balise </td> è_é

Je te laisse nettoyer ton code (de préférence rapidement, passé mardi soir je ne serai plus dispo, donc il faut qu'on ait fini d'ici là) et me redonner la version propre, et je t'expliquerai comment faire la suite.

Bon, j'ai testé mais ... C'est un peu floue. J'espère avoir tout corrigé correctement. Pardon du temps, je ne pouvais pas m'en charger avant.

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="profil_head">
<div class="postdetails poster-profile">
<div align="center"><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div><div align="center">
<div align="center">{postrow.displayed.ONLINE_IMG}<div class="cadreavatar"></div>{postrow.displayed.POSTER_AVATAR}<div align="center">

<div class="statsprof"><div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="points"></div>

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

<div class="points"></div></div>
{postrow.displayed.POSTER_RPG}
</div><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td><td>

Code:: <div id="profil_head">

Citation :

A quoi sert le

Code:: <div class="points"></div>

?

Hello,

J'ose espérer que tu as des bases en HTML avant de toucher à tes templates o_O

Enfin, bref.

Pour tes deux "questions"

• Si tu as pensé à vérifier directement dans ton template, tu remarques que le <div> fantôme est immédiatement suivi d'une balise d'ouverture de cellule (un <td ...>), et donc qu'il n'a absolument rien à faire là et doit être supprimé. Retire donc ce "td" que tu as rajouté sans raison aucune O.o
Tu fais bien aussi de me pointer sur le <div id="profil_head">, je l'avais oublié. Non seulement tu ne dois PAS le supprimer (je ne comprends pas pourquoi tu veux le faire), mais en plus c'est une classe (attribut class) et pas un identifiant (attribut id) que tu dois utiliser !! Et effectivement, il faut que tu rajoutes une balise </div> avant la fermeture de cellule, donc avant le </td>.

• Pour les deux <div class="points"></div>, si tu ne sais pas à quoi ils servent, supprime les, évidemment.

Enfin, pour le reste de ton code, tu as réussi à l'aggraver au lieu de l'améliorer : quasiment toutes les balises div n'ont plus de fermeture ! Quand je dis d'encadrer par <div align="center">, c'est évidemment en mettant un <div align="center"> au début et un </div> à la fin !

Donc je réitère ma question : as-tu les connaissances HTML et CSS nécessaires ? Sais tu ce qu'est une balise de fermeture, ce qu'est un attribut, ce qu'est une classe, ce qu'est un identifiant ? Sinon, je te conseille vivement d'aller apprendre tout ça, parce que le coup des balises de fermeture c'est quand même le B.A.BA du codage O.o

Ma réponse habituelle serait un : Oui, bien-sûr, pardon !

Mais là, j'peux pas. Donc :

Soyons clairs : OUI. J'ai des bases. Je m'excuse, mais j'avoue être fortement agacée. L'erreur est humaine, je suis fatiguée, j'essaie de faire beaucoup de choses en même temps car je n'ai pas le choix - De plus tu n'es plus disponible à partir de ce soir et la fonda aimerait ouvrir dans la semaine. Merci d'éviter les allusions indécentes. O_O Après, si ce n'est pas le cas, autant pour moi, mais c'est là l'impression que tu me donnes et, c'est pas mal frustrant, voire carrément vexant. Oui, tu as un niveau hors pair et remarquable en CSS et HTML, non je suis pas ton égal sur le sujet. Mais je ne peux malheureusement rester muette face à tes propos, ce n'est pas dans ma nature - Même si généralement je fais tout pour être neutre sur le net. Bref, je vais simplement me calmer car, mon caractère de cochon ne doit pas envenimer la situation. Bien-entendue. J'ai fait la promesse de finir ce design. Je te remercie grandement pour ton aide, mais j'espère bien ne plus subir ce genre de remarque. >< Je veux bien comprendre que, bien souvent, tu te retrouves à corriger des erreurs abracadabrantes, sache-le. Mais même. Oui, j'ai oubliée de fermer la balise. Non, je n'ai rien aggravée car, suffit bien entendue de le corriger, c'est d'une aisance ridicule, quand même. Le B.A.BA du code est, je te rassure, bien dans mes cordes. Malheureusement bien moins en HTML. Mais c'est comme tout, on apprend.

Bref, passons, pas la peine de se disputer juste pour ça. ^^'

Soit, voici :

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="profil_head">
<div class="postdetails poster-profile">
<div align="center"><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div></div>
<div align="center">{postrow.displayed.ONLINE_IMG}<div class="cadreavatar"></div>{postrow.displayed.POSTER_AVATAR}</div>

<div class="statsprof"><div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

</div>
{postrow.displayed.POSTER_RPG}
</div><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div></td>

Est-ce correcte maintenant ? J'espère avoir fait moins d'erreurs.

Désolée que tu le prennes comme ça, je suis plus abrupte que d'ordinaire car je suis au taff et je ne suis pas supposée trainer sur un forum au lieu de bosser, et vu la quantité de texte que j'écris forcément j'ai pas le temps d'arrondir les angles U.U

Bref, le code est correct maintenant, sauf trois détails :
1 - Où est passé le lien (l'ancre) que je te mentionnais la dernière fois ? Celui que je t'avais dit de déplacer ?

2 -

Code:: <div align="center">{postrow.displayed.ONLINE_IMG}<div class="cadreavatar"></div>{postrow.displayed.POSTER_AVATAR}</div>

On a toujours ce <div class="cadreavatar"></div> vide (rien entre les deux balises), ne devrais tu pas placer la variable {postrow.displayed.POSTER_AVATAR} qui suit juste après à l'intérieur des balises ? Si tu ne sais pas à quoi sert cette partie, supprime la, ça ne sert à rien d’alourdir le code.

3 -

Code:: <div id="profil_head">

Tu dois remplacer par une classe :

Code:: <div class="profil_head">

Et évidemment remplacer dans le CSS si nécessaire (en CSS un identifiant est précédé d'un #, une classe est précédée d'un point)

Il doit y avoir quelque part sur le forum (dans les bases CSS) un sujet qui explique la différence entre les deux.

Pour ton problème, j'ai la solution chez moi mais pas ici, donc je développerai en rentrant (là je n'ai pas le temps), mais globalement tu vas devoir travailler sur cette partie :

Code:: <div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

Dans la théorie, tu as besoin :
- D'un conteneur qui servira de bloc de référence, il devra être à la hauteur de ton image de fond (la banderole) et être positionné en relatif
- D'un autre conteneur dont le fond sera ton image de banderole, qui devra être à ses dimensions EXACTES et être positionné en absolu, avec top et left pour faire le positionnement au pixel près.
- Et enfin le conteneur de classe .name que tu as déjà nous servira à positionner le nom de façon à ce qu'il occupe seulement la banderole sans dépasser de manière inesthétique.

Ce qui fait que tu auras 3 div imbriqués les uns dans les autres au total à ce niveau, si ma mémoire ne me trompe pas.

On verra la suite ce soir, corrige tout ça en attendant @_@

Pas de problème, ça devait juste être dit.

Bon alors, normalement, là c'est ok ! :

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <a name="{postrow.displayed.U_POST_ID}"></a>
<div class="profil_head">
<div class="postdetails poster-profile">
<div align="center"><div class="rang">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div></div>
<div align="center">{postrow.displayed.ONLINE_IMG}<div class="cadreavatar">{postrow.displayed.POSTER_AVATAR}</div></div>

<div class="statsprof"><div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

</div>
{postrow.displayed.POSTER_RPG}
</div><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div></td>

J'suis juste repaumée sur le CSS, je te montre donc un essaie : Je met donc .name ?

Code:: .stafsprof { /* Les informations du profil */
padding-top: 5px;
width: 130px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
repeat: none;
align: center;
margin-left: 30px;
padding: 5px;
padding-bottom: 16px;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 300px;
Height: 300px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;
}

.rang{-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin: 5px;
width: 120px;
align: center;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
margin-left: 20px;
padding-top: 10px;
margin-top: -8px;

}

.profil_head /* L'encadrement général de ton profil et avatar */
{
padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
}

.name /* le pseudo */
{
text-decoration: none;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;

}

.postdetails.poster-profile a img { /* L'avatar et son encadrement */
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
border: solid 1px #4b4747;
}

Dernière édition par 'Christa le Jeu 01 Nov 2012, 08:47, édité 1 fois

Bon, c'est pas tip top mais on va dire que ça va, je t'ai nettoyé le code pour ajouter les sauts de ligne et indentations (et des commentaires), ça le rendra plus facile à lire (en particulier sous notepad++ avec la coloration syntaxique)

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <a name="{postrow.displayed.U_POST_ID}"></a>
<div class="profil_head">
<div class="postdetails poster-profile">
<div class="rang" align="center">{postrow.displayed.RANK_IMAGE}<br />{postrow.displayed.POSTER_RANK}</div>
<div align="center">
{postrow.displayed.ONLINE_IMG}
<div class="cadreavatar">{postrow.displayed.POSTER_AVATAR}</div>
</div>

<div class="statsprof">
<div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

</div> 
{postrow.displayed.POSTER_RPG}
</div> 
<br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div>
</td>

Je me doutais que tu aurais du mal avec mes explications donc rien de grave, je vais juste détailler point par point comment faire.

Etape 0 • Je t'ai dit de placer ton pseudo dans un conteneur qui sera lui même dans un conteneur. La ligne correspondant au pseudo est la suivante

Code:: <div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

Et du dois la placer dans deux conteneurs (blocs, c'est à dire des div) :

Code:: <div>
<div>
<div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>
</div>
</div>

Il va falloir leur attribuer des classes bien sûr mais c'est à ta convenance.

Etape 1 • Je t'ai dit que tu allais avoir besoin d'un "conteneur qui servira de bloc de référence", visualise ça comme un tableau de liège sur lequel tu colleras un post-it à l'emplacement de ton choix.

J'ai appelé la classe attribuée à ce bloc .LePseudo, ça a le mérite d'être clair x)

On lui donnera une propriété de positionnement relatif (ça permet de déclarer le bloc comme élément de référence), et une hauteur fixe pour que tout l'espace soit bien occupé (je te conseille de tester avec différentes hauteurs pour voir ce qui se passe, tu comprendras mieux.)

Code:: .LePseudo {
height: HAUTEUR_IMAGE_BANDEROLLE;
position : relative;
}

Etape 2 • Maintenant, il faut que tu places la banderole. C'est le "post-it" que tu vas punaiser sur ton tableau. En utilisant le positionnement absolu, tu vas pouvoir placer ta banderole par rapport au bloc .LePseudo. Grosso modo, tu peux lui dire, "je veux que ma banderole soit à tant de pixels du bord gauche et tant de pixels du bord haut. Si tu n'avais pas mis de bloc "relatif", ce positionnement aurait été le même pour tous les profils (tous les membres ayant posté dans un message) et aurait été fait par rapport au corps du forum.

Par exemple si je fais ça ... [

Doink !

] Tu devrais trouver un bloc rouge en haut à droite de CSSActif x)

Par contre si je crée maintenant un bloc (un div) bleu positionné en relatif et que à l'intérieur, je réutilise le même code que celui plus haut, tu as ça :

Doink !

Bref, retour à nos moutons, on va mettre en pratique ce système et positionner la banderole de la même façon. Nommons cette classe, au hasard, .LaBanderole x)
Il faut qu'elle ait ton image de banderole en fond, mais aussi qu'elle soit EXACTEMENT de la même taille que l'image en question.

Ca te donne ça :

Code:: .LaBanderole {
position:absolute; /* positionnement absolu par rapport au conteneur */
top : 0; /* on la colle au haut du bloc conteneur, ya pas de raison de changer */
left: -62px; /* là il va falloir bidouiller pour que la bannière soit pile poil superposée aux bords du profil */
background:url('URL_IMAGE_FOND'); /* image de fond */
width:LARGEUR;
height:HAUTEUR;
}

Etape 3 • A ce stade, ta banderole devrait être positionnée et tout, mais le texte, comme dans mon exemple précédent, est collé aux bords et ce n'est pas forcément terrible.

C'est là qu'il va falloir que tu personnalises/corrige la classe .name qui est déjà dans ton CSS. Plusieurs méthodes possibles, soit tu joues sur la valeur des padding, c'est à dire les marges internes (dans mon exemple ci après on a un padding de 20px en haut, 50px sur les côtés et 30px en bas), en faisant gaffe au cas où tes pseudos, trop longs, prendraient 2 lignes. Soit tu donnes une dimension fixe au bloc et tu le centres en utilisant margin:0, puis tu mets des padding en haut et en bas pour régler la position. Les deux se valent, je te donne un exemple pour la première :

Code:: .name {
padding: 20px 50px 30px;
text-align: center;
}

Le reste relève de tes propres essais, ça donne ça sur mon forum de test :

Image sous le pseudo.+Cadre description.[Résolue] IzVvU

Bon courage !

Bon alors, j'ai bien testé mais ... Je vais m'énerver sur le codage. La banderole n'apparait pas du tout. Le pseudo redevient minuscule, non centré, le fond du rang, idem. J'ai ajouté un code entre deux, pour faire pivoter l'avatar. Pour le moment j'ai ça :

Code:: /*PROFIL*/

.LePseudo {
height: 91px;
position : relative;
}

.LaBanderole {
position:absolute; /* positionnement absolu par rapport au conteneur */
top : 0; /* on la colle au haut du bloc conteneur, ya pas de raison de changer */
left: -62px; /* là il va falloir bidouiller pour que la bannière soit pile poil superposée aux bords du profil */
background:url('http://img4.hostingpics.net/pics/264669pseudo.png'); /* image de fond */
width:329px;
height:91px;
}

.stafsprof { /* Les informations du profil */
padding-top: 5px;
width: 130px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
repeat: none;
align: center;
margin-left: 30px;
padding: 5px;
padding-bottom: 16px;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 300px;
Height: 300px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;
}

.rang{-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin: 5px;
width: 100px;
align: center;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
margin-left: 30px;
padding-top: 10px;
margin-top: -8px;

}

.profil_head /* L'encadrement général de ton profil et avatar */
{
padding-top: 5px;
background-image: url(http://img4.hostingpics.net/pics/545756profil.png);
width: 200px;
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align:justify;
padding-right: 8px;
padding-left: 8px;
}

.name {
padding: 20px 50px 30px;
text-align: center;
text-decoration: none;
background-image: url(http://img15.hostingpics.net/pics/524328Fondcatgodescription.png);
width: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-right: 50px;
padding-left: 50px;
-webkit-border-radius: 50px;
text-align:justify;
text-align:center;
font-size: 14px;
letter-spacing: 3px;
text-shadow: #2d2020 1px 1px 5px;

}

.postdetails.poster-profile a img:hover { /* faire pivoter l'avatar*/
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-moz-transition: all 10s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

.postdetails.poster-profile a img { /* L'avatar et son encadrement */
box-shadow: 2px 2px 4px black;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
border: solid 1px #4b4747;
}

Et j'obtiens ça :

Image sous le pseudo.+Cadre description.[Résolue] Test10

Alors que, je voudrais que le bloc de fond, derrière le rang soit au centre. Tout comme le rang.
Que le pseudo soit un peu plus gros, et centré. J'ai normalement réglé les tailles de la banderolle. ce sont les mêmes dimensions.

Pas de bloque présent sous les descriptions, je me suis perdue, complètement. J'avoue n'arriver à rien pour le coup.

Ah et, bon c'est un plus, mais j'aimerais que la feuille de personnage soit planquée.

Voilà, là, j'arrive à rien. =s
J'ai sûrement fait n’importe quoi dans mon CSS.

Je suis désolée, mais fondamentalement c'est à mon tour de m'énerver à ce stade. Je prends le temps de bien t'expliquer pour que tu ne fasses pas un bête copier-coller sans réfléchir, et au final, j'ai la nette impression que tu n'as pas accordé la moindre attention à ce que j'ai écrit.

C'est bien gentil de jouer les fiertés offensées quand je mets en doute tes compétences, mais là tu pousses ma patience un peu loin.

Autant pour le temps passé à t'expliquer alors que j'avais autre chose à faire, ça fait plaisir de rendre service =_=

La clef de ton problème se situe dans cette phrase, en souligné :

Citation :: Il va falloir leur attribuer des classes bien sûr mais c'est à ta convenance.

Ma seule erreur est de ne pas m'être rendue compte que tu utilises id dans la ligne

Code:: <div id="name"><strong>{postrow.displayed.POSTER_NAME}</strong></div>

C'est bien entendu class qu'il faut mettre à la place de id, mais fondamentalement si tu lisais ce que j'écris tu aurais dû t'en rendre compte toute seule.

Et ça donne ça pour le moment sur ton forum (en utilisant firebug évidemment)
Image sous le pseudo.+Cadre description.[Résolue] JqkHZ

Image sous le pseudo.+Cadre description.[Résolue] JqkHZ

J'estime que j'ai fait mon travail, je te laisse faire le reste seule. Bonne continuation.

Si un autre codeur veut prendre la relève, qu'il n'hésite pas.

Bien-sûr que je fais au mieux, que je copie/colle pas bêtement, et je tiens à signaler que chez moi, je n'ai absolument pas ce rendu. Le voilà le problème. Si on obtient pas les mêmes choses, certainement que ça ne marche pas...

Je n'entends pas ce que tu veux dire pas attribuer des classes.

http://www.css-actif.com/t8416-class-ou-id-lequel-choisir (tutoriel que je t'ai déjà dit d'aller lire)
http://www.siteduzero.com/tutoriel-3-13514-appliquer-un-style-class-et-id.html

Image sous le pseudo.+Cadre description.[Résolue]

Image sous le pseudo.+Cadre description.[Résolue]

Sujets similaires

Sujets similaires

Partenaires Or