Déplacer les champs du profil et le pseudo Bouton_activeDéplacer les champs du profil et le pseudo Bouton_hoverDéplacer les champs du profil et le pseudo Fb-hoverDéplacer les champs du profil et le pseudo Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Déplacer les champs du profil et le pseudo EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Déplacer les champs du profil et le pseudo EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Déplacer les champs du profil et le pseudo EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Déplacer les champs du profil et le pseudo EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Déplacer les champs du profil et le pseudo EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Déplacer les champs du profil et le pseudo EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Déplacer les champs du profil et le pseudo EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Déplacer les champs du profil et le pseudo EmptySam 11 Fév 2023, 06:04 par Krager

-48%
Le deal à ne pas rater :
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ampoules E27 X2 + ...
119 € 229 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Déplacer les champs du profil et le pseudo

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
Bonjour/bonsoir,

J'aimerais déplacer les champs du profil et le pseudo afin qu'ils soient sur mon pattern :
https://2img.net/image.noelshack.com/fichiers/2012/41/1350226297-caopt.png

Comment dois-je faire ?
MessageSujet: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyDim 14 Oct 2012, 11:53
Revenir en haut Aller en bas
http://hogwarts-chronicles.bbactif.com
LASTBREATH.
LASTBREATH.
{ Membre }
{ Membre }

Féminin Messages : 92



Déplacer les champs du profil et le pseudo Empty
Bonjour !

Il nous faudrait la partie de ton css et de ton templates concernés par ta demande pour que l'on puisse t'aider Smile
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyDim 14 Oct 2012, 11:59
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
Le css

Code:
.post .name
        {
          font-family:'Cookie', cursive;
        }
        .ombre
        {text-shadow: #90674D 1px 1px 1px;}
        .profil_avatar
 {
    background-image: url("http://image.noelshack.com/fichiers/2012/41/1349947235-fd.png");
    border-radius: 10px 10px 10px 10px;
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 2px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  padding-bottom: 10px;
    text-align: justify;
  height: 400px;
}
        .bouton-profil {
            cursor: pointer; /* curseur au survol */
            margin: 2px 0; /* petite marge en haut et en bas */
            padding: 2px; /* espacement entre le texte et la bordure */
     border-radius: 5px 5px 5px 5px;
            text-align: center; /* centrage du texte dans le bloc */
          /* -- mise en forme -- */
          background: #EBE1C3; /* couleur de fond */
            border: 1px solid #B78664; /* bordure */
            color: #B78664; /* couleur texte */
            font-size: 11px; /* taille du texte */
            font-variant: small-caps; /* effet petites majuscules */
            font-weight: bold; /* effet gras */
            letter-spacing: 2px; /* espace entre les lettres */
        }

        .profil-cache {
          border: 1px solid #B78664;
          background : #EBE1C3;
            margin: 2px 0;
            padding: 2px;
     border-radius: 5px 5px 5px 5px;
        }

.champsprofil {
            border: 1px solid #B78664;
          background : #EBE1C3;
       border-radius: 5px 5px 5px 5px;
}

Et le template (je sais pas cibler les bonnes parties donc je cible pas vraiment)

Code:

   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {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>
   <!-- BEGIN postrow -->
   <!-- BEGIN displayed -->
   <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <div class="profil"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_RANK}<br />
                          {postrow.displayed.RANK_IMAGE}<div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div><br><strong><div align="center"><font size="5,5"><span class="ombre">{postrow.displayed.POSTER_NAME}</span></div></font></strong></span><br />
            <div class="postdetails poster-profile">                   
               <div class="champsprofil"><!-- BEGIN profile_field -->
                                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div>
                                            <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>
                                  <div class="profil-cache" style="display: none">
            {postrow.displayed.POSTER_RPG}
         </div><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
      <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">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

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

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

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

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

                  <div class="postbody">

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

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                 <!-- BEGIN switch_dl_att -->
                                 <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}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {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}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

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

                     <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}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</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>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <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 noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<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">
         <!-- BEGIN link -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
   <tbody>
      <tr>
         <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td valign="top">
                        <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
      <tr>
         <td class="row1 clearfix">
            <table>
               <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                     <img src="{RULE_IMG_URL}" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                     {RULE_MSG}
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </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>
      <!-- BEGIN show_permissions -->
      <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>
      <!-- END show_permissions -->
      <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>
                  <!-- BEGIN show_permissions -->
                  <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>
                  <!-- END show_permissions -->
            
   
   
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyDim 14 Oct 2012, 14:15
Revenir en haut Aller en bas
http://hogwarts-chronicles.bbactif.com
LASTBREATH.
LASTBREATH.
{ Membre }
{ Membre }

Féminin Messages : 92



Déplacer les champs du profil et le pseudo Empty
Alors en fait, il y a plusieurs erreurs dans ton templates. Je vais tenter de te montrer ce que tu as de faux et te montrer comment tu dois modifier ^^ la partie concernée est celle-ci :

Code:
<div class="profil"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_RANK}<br />
                          {postrow.displayed.RANK_IMAGE}<div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div><br><strong><div align="center"><font size="5,5"><span class="ombre">{postrow.displayed.POSTER_NAME}</span></div></font></strong></span><br />
            <div class="postdetails poster-profile">                   
              <div class="champsprofil"><!-- BEGIN profile_field -->
                                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div>
                                            <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">En savoir plus</div>
                                  <div class="profil-cache" style="display: none">
            {postrow.displayed.POSTER_RPG}
        </div>

et en fait, tu as mal fermé la balise de ta classe " profil ", c'est pourquoi ça ne prend pas. Donc tu rajoutes une

Code:
</div>

à la fin du morceau que je t'ai montré et ça sera bon. Si ça ne marche pas, dis-le moi et je tenterais de t'expliquer mieux ! En attendant, essaie pour voir (j'ai essayer et chez moi, ça fonctionne ^^).

MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyDim 14 Oct 2012, 14:25
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
J'ai dû supprimé le
Code:
<span class="name">
pour ajouter le /div sans qu'il me le mette en rouge mais, ça va pas puisque le pseudo est devenu moche (gros et la police ne s'applique pu) et le rang est également devenu trop grand -__-

https://2img.net/image.noelshack.com/fichiers/2012/42/1350380861-oof.png
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyMar 16 Oct 2012, 06:46
Revenir en haut Aller en bas
http://lower-theory.teamconvention.com/index.htm
Nyo The Neko
Nyo The Neko
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Déplacer les champs du profil et le pseudo Empty
Normal, vu que la class="name" était ce qui donnait son apparence ^^" Il ne fallait pas l'enlever!

Edit: Voici l'indentation correcte:

Code:

<div class="profil">
   <span class="name">
      <a name="{postrow.displayed.U_POST_ID}">
      </a>
      {postrow.displayed.POSTER_RANK}
      <br />
           {postrow.displayed.RANK_IMAGE}
      <div class="profil_avatar">
         {postrow.displayed.POSTER_AVATAR}
      </div>
      <br />
      <strong>
         <div align="center">
            <font size="5,5">
               <span class="ombre">
                  {postrow.displayed.POSTER_NAME}
               </span>
            </font>
         </div>
      </strong>
   </span><br />
   <div class="postdetails poster-profile">                   
            <div class="champsprofil"><!-- BEGIN profile_field -->
               {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
               {postrow.displayed.profile_field.SEPARATOR}
                                   <!-- END profile_field -->
            </div>
            <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">
         En savoir plus
       </div>
           <div class="profil-cache" style="display: none">
            {postrow.displayed.POSTER_RPG}
           </div>
<!-- Tiens, postdetails poster-profile ne ferme pas! Tiens, profil non plus!  -->

De là, tu vois facilement qu'il manque deux /div Wink
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyMar 16 Oct 2012, 11:19
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
Ah j'ai fais n'importe quoi Arrow Mais j'ai mis la correction merci ^^

J'aimerais surtout savoir comment mettre les champs du profil sur mon pattern en dessous de l'avatar... Et la feuille de JDR aussi What a Face
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyMer 17 Oct 2012, 09:20
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



Déplacer les champs du profil et le pseudo Empty
Salut,

Alors c'est assez simple. Tu as une div à la quelle tu as appliqué le fond, la variable avatar s'y trouve :
Code:
<div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
Si tu veux mettre le pseudo est les informations sur le fond, il te suffit de chercher :
Code:
<strong><div align="center"><font size="5,5"><span class="ombre">{postrow.displayed.POSTER_NAME}</span></div></font></strong>
Et de le déplacer (en gros, tu le supprime pour le re-coller) juste entre
Code:
{postrow.displayed.POSTER_AVATAR} et </div>

C'est bon, le pseudo est déplacé. Maintenant les informations, c'est ce bout de code que tu déplace également juste après le strong (et avant le div)
Code:
              <div class="champsprofil"><!-- BEGIN profile_field -->
                                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div>

Tu vois ?
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyMer 17 Oct 2012, 12:03
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
Ah génial ça marche impec merci Very Happy

Il y a juste deux trois petits défauts, je sais pas si j'ai mal fermer un truc mais la police du pseudo se met aux champs du profil ainsi qu'au rang Arrow le pseudo est trop collé à l'avatar et aux champs donc ça rend pas très joli

https://2img.net/image.noelshack.com/fichiers/2012/42/1350498261-result.png

Étant donné que j'ai un peu modifié le css je le redonne :

Code:

body {
background-repeat: no-repeat;
background-position: top center;
}
 .post .name
        {
          font-family:'Cookie', cursive;
        }
        .ombre
        {text-shadow: #90674D 1px 1px 1px;}
        .profil_avatar
 {
    background-image: url("http://image.noelshack.com/fichiers/2012/41/1349947235-fd.png"); repeat-y transparent;
width: 203px;
    border-radius: 10px 10px 10px 10px;
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 2px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  padding-bottom: 10px;
    text-align: justify;
}
        .bouton-profil {
            cursor: pointer; /* curseur au survol */
            margin: 2px 0; /* petite marge en haut et en bas */
            padding: 2px; /* espacement entre le texte et la bordure */
     border-radius: 5px 5px 5px 5px;
            text-align: center; /* centrage du texte dans le bloc */
          /* -- mise en forme -- */
          background: #EBE1C3; /* couleur de fond */
            border: 1px solid #B78664; /* bordure */
            color: #B78664; /* couleur texte */
            font-size: 11px; /* taille du texte */
            font-variant: small-caps; /* effet petites majuscules */
            font-weight: bold; /* effet gras */
            letter-spacing: 2px; /* espace entre les lettres */
        }

        .profil-cache {
          border: 1px solid #B78664;
          background : #EBE1C3;
            margin: 2px 0;
            padding: 2px;
     border-radius: 5px 5px 5px 5px;
        }

.champsprofil {
            border: 1px solid #B78664;
          background : #EBE1C3;
       border-radius: 5px 5px 5px 5px;
}

Voilà la partie du template overall_header que j'ai modifié :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

Et à quoi ressemblance viewtopic_body avec toutes les modifs :

Code:
<!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
  <div class="profil">
  <span class="name">
      <a name="{postrow.displayed.U_POST_ID}">
      </a>
    <span style="font-weight: normal; font-size: 20px;"></span>
        {postrow.displayed.POSTER_RANK}
    <br />
    {postrow.displayed.RANK_IMAGE}
      <div class="profil_avatar">
        {postrow.displayed.POSTER_AVATAR}
        <strong>
        <div align="center">
            <font size="5,5">
              <span class="ombre">
                  {postrow.displayed.POSTER_NAME}
              </span>
          </font></div>
             
          <div class="champsprofil"><!-- BEGIN profile_field -->
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
              {postrow.displayed.profile_field.SEPARATOR}
                                    <!-- END profile_field -->
            </div>
      </div>
      <br />
        </div>
      </strong>
  <br />
  <div class="postdetails poster-profile">                   
            <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">
        En savoir plus
      </div>
            <div class="profil-cache" style="display: none">
            {postrow.displayed.POSTER_RPG}
            </div>
    <br />
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyMer 17 Oct 2012, 15:28
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



Déplacer les champs du profil et le pseudo Empty
Bon, dans ton template déjà je vois un truc bizarre.
T'as un span qui renferme rien du tout... Il sert à quoi exactement ? Déplacer les champs du profil et le pseudo 523658

Code:
    <span style="font-weight: normal; font-size: 20px;"></span>

Pour ce qui est de la police, je vois que tu l'as placé non pas dans ombre mais dans d'autres {}
Code:
 .post .name
        {
          font-family:'Cookie', cursive;
        }

Ce que je te conseille c'est de supprimé ça et de rajouter à ta propriété ombre ceci :
Code:
          font-family:'Cookie', cursive;

En gros ça te donne :

Code:
        .ombre
        {text-shadow: #90674D 1px 1px 1px;
          font-family:'Cookie', cursive}

Et pour l'espace entre l'avatar et le pseudo, rajoute un
Code:
</br>
Juste avant
Code:
                  {postrow.displayed.POSTER_NAME}
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyJeu 18 Oct 2012, 13:19
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Déplacer les champs du profil et le pseudo Empty
Je me rappelle même pas d'avoir mis ce spam Arrow

Maintenant que tout est corrigé mon profil est parfait merci beaucoup I love you
On peut archiver What a Face
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyJeu 18 Oct 2012, 15:32
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Déplacer les champs du profil et le pseudo Empty
Hello (:
Je vois que le problème est résolu, donc je déplace !
Merci de l'avoir signalé Déplacer les champs du profil et le pseudo 926145 Cependant la prochaine fois, si tu pouvais l'indiquer en éditant le titre de ton sujet, ça serait parfait Déplacer les champs du profil et le pseudo 926145 Merci d'avance !
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo EmptyJeu 18 Oct 2012, 16:15
Revenir en haut Aller en bas
Contenu sponsorisé




Déplacer les champs du profil et le pseudo Empty
MessageSujet: Re: Déplacer les champs du profil et le pseudo   Déplacer les champs du profil et le pseudo Empty
Revenir en haut Aller en bas
 

Déplacer les champs du profil et le pseudo

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Personnalisation du profil : « profil personnalisé » & « champs de contact »
» Décalage des champs du profil
» Cadre pour les champs du profil.
» [résolu] Décoration sur les champs du profil
» Problème de valeurs des champs du profil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit