Retour à la ligne qui ne s'opère pas. [resolu] Bouton_activeRetour à la ligne qui ne s'opère pas. [resolu] Bouton_hoverRetour à la ligne qui ne s'opère pas. [resolu] Fb-hoverRetour à la ligne qui ne s'opère pas. [resolu] 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
Retour à la ligne qui ne s'opère pas. [resolu] EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Retour à la ligne qui ne s'opère pas. [resolu] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Retour à la ligne qui ne s'opère pas. [resolu] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Retour à la ligne qui ne s'opère pas. [resolu] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -33%
Trottinette électrique pliable Ninebot E2 E ...
Voir le deal
199 €

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

Retour à la ligne qui ne s'opère pas. [resolu]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://vogue.forums-actifs.com/
claaire
{ Membre }
{ Membre }

Féminin Messages : 44



Retour à la ligne qui ne s'opère pas. [resolu] Empty
Bonjour à tous et à toutes Retour à la ligne qui ne s'opère pas. [resolu] 73120010
Voilà, j'ai modifié la position de mon avatar et de ses infos de telles sortes à ce qu'il soit à droite et que les infos apparaissent au passage de la souris. Seulement, il me manque une partie des textes dans les infos. Par exemple la date je vois "date d'inscription: 14/08/2012" (en rouge ce qu'il me manque). J'ai en effet mis le code "hidden" pour ce qui dépasse de mon avatar mais j'aimerais que ce genre d'information opère un retour à la ligne automatique. J'ai tout testé, j'ai entouré mes infos d'une classe où j'ai mis un width comme préconisé un peu partout sur le forum mais ça ne marche pas. Retour à la ligne qui ne s'opère pas. [resolu] 2077966078 Voici mon css et mon template si nécessaire, merci d'avance à la personne qui m'aidera!

Code:
/* MESSAGE + AVATAR*/

.titre_sujet {
text-align: center;
display: block;
  text-shadow: 0px 0px 3px rgb(153, 111, 86);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold; }

.date {
text-align: center;
display: block;
  text-transform: uppercase;
  font-size: 13px;
}

.titresujet {
text-transform: uppercase;
letter-spacing: -3px;
font-weight: bold;
text-shadow: 0px 0px 3px rgb(153, 111, 86);
font-size: 22px;
text-align: center;
font-family: georgia;
  margin-left: -26%}
 
.post_message
{
  background-color: #FFFFFF;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius:  40px 40px 40px 40px;
  border-radius:  40px 40px 40px 40px;
  box-shadow:0px 0px 20px grey;
  padding: 5%;
  margin-bottom:5p%;}

.autour_avatar
{
  width: 140px; /* Mettre la largeur de votre avatar */
  height: 200px; /* Mettre la hauteur de votre avatar */
  position: relative; /* Ne pas modifier */
  overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
  margin-left:5px;
  box-shadow:0px 0px 20px grey;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius:  20px 20px 20px 20px;
  border-radius:  20px 20px 20px 20px;
border: 5px solid #FFFFFF;
-moz-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
padding: 5px 5px 5px 5px;
  background-color: #FFFFFF;
}

.avatar_image
{
  position: relative; /* Ne pas modifier */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
  width: 100%; /* Ne pas modifier */
  height: 100%; /* Ne pas modifier */
  z-index: 0; /* Ne pas modifier */
}

.vavapseudo{
color: rgb(255, 255, 255);
text-transform: uppercase;
letter-spacing: -3px;
font-weight: bold;
text-shadow: 0px 0px 3px rgb(153, 111, 86);
font-size: 22px;
text-align: center;
font-family: georgia;
}


.avatar_infos
{
  background-color: #FFFFFF /* Couleur du fond de la div */
  position: absolute; /* Ne pas modifier */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
  /* ATTENTION ! La somme des marges intérieures, extérieures et de la hauteur doit être égale à 100%. Comme la somme des marges avec la largeur ! */
  width: 130px; /* Largeur */
  padding-left: 2%; /* Marge intérieure gauche */
  padding-right: 2%; /* Marge intérieure droite */
  height: 100%; /* Hauteur */
  z-index: 100; /* Ne pas modifier */
  opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
  margin-top: 320px; /* La marge extérieure haute doit être de la même taille que la hauteur de l'avatar. Cela permet de placer cette div juste au-dessous de l'avatar. */
  /* Pour les transitions. Faites des tests pour le temps ! (1s, 0.1s...) */
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.autour_avatar:hover > .avatar_infos
{
  /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  margin-top: 0px; /* Ne pas modifier. Cela permet de supprimer la marge au-dessus de la div et ainsi, elle ira se placer sur l'avatar ! */
}

.autour_message
{
  width: 100%; /* Ne pas modifier */
  height: 69px; /* Mettre la hauteur de votre image */
  overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
  position: relative; /* Ne pas modifier */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
}

.message_image
{
  position: relative; /* Ne pas modifier */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
  width: 100%; /* Ne pas modifier */
  height: 100%; /* Ne pas modifier */
  z-index: 0; /* Ne pas modifier */
  text-align: right;
}

.message_infos
{
  background-color: #ffffff; /* Couleur du fond de la div */
  position: absolute; /* Ne pas modifier */
  top: 0; /* Ne pas modifier */
  left: 0; /* Ne pas modifier */
  /* ATTENTION ! La somme des marges intérieures, extérieures et de la hauteur doit être égale à 100%. Comme la somme des marges avec la largeur ! */
  width: 96%; /* Largeur */
  padding-left: 2%; /* Marge intérieure gauche */
  padding-right: 2%; /* Marge intérieure droite */
  height: 100%; /* Hauteur */
  z-index: 100; /* Ne pas modifier */
  opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
  margin-left: 100%; /* La marge extérieure gauche doit être de la même taille que la division, soit 100%. Cela permet de placer cette div juste à droite de l'image. */
  /* Pour les transitions. Faites des tests pour le temps ! (1s, 0.1s...) */
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.autour_message:hover > .message_infos
{
  /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  margin-left: 0px; /* Ne pas modifier. Cela permet de supprimer la marge à gauche de la div et ainsi, elle ira se placer sur l'avatar ! */
}

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">
         <!-- BEGIN switch_user_authpost -->
         <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>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>
      <td align="left" valign="middle" nowrap="nowrap">
         
      </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>
      
   </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
  <tr align="right">
      <td 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"> <div class="titresujet">{TOPIC_TITLE}</div></h1>
               </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <tr class="post">
      <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="post_message">
                  <tr>
                          <td colspan="2">
                                    <div class="autour_message">
                                   
                                            <div class="message_image">
                                                      <img src="http://www.vogue.fr/images/socialbar/abonnements.png" />
                                            </div>
                                            <div class="message_infos">
<table><tr><td width="50%"><span class="postdetails"><span class="titre_sujet"> {postrow.displayed.POST_SUBJECT}</span>  <span class="date">{postrow.displayed.POST_DATE}</span></span></td>
              <td valign="top" nowrap="nowrap" class="post-options" width="50%"  align="right">
                  {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></table>
                                            </div>
                                    </div>
                          </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>
        <td {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <a name="{postrow.displayed.U_POST_ID}"></a>
        <div class="autour_avatar">
                            <div class="avatar_image">
              <!-- ICI SERA L'AVATAR -->
                                    {postrow.displayed.POSTER_AVATAR}
                            </div>
                          <div class="avatar_infos">
              <!-- VOUS METTREZ ICI CE QUE VOUS VOULEZ VOIR APPARAÎTRE -->
              <!-- class="name" permet à la police d'avoir une taille normale -->
                                    <span class="name">
                                              <!-- IMAGE EN LIGNE -->
                                            <center>
                                                    <div class="vavapseudo"><strong>{postrow.displayed.POSTER_NAME}</strong></div> <!-- NOM DU POSTEUR -->
                                          <br />
                                              {postrow.displayed.RANK_IMAGE} </center>
                                           
             
                                      <center>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.ONLINE_IMG} {postrow.displayed.contact_field.CONTENT}</center>
                                      <br></br>
                                     
                                                        <!-- BEGIN profile_field -->
                    <center> <div class="infovava">{postrow.displayed.profile_field.LABEL}
                    {postrow.displayed.profile_field.CONTENT}
                      {postrow.displayed.profile_field.SEPARATOR}</div></center>
                  <!-- END profile_field -->
                                    </span>
                                </div>
                    </div>
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
         

      </td>
  </tr>
  <!-- BEGIN first_post_br -->
</table>
<br />
<table width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- 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 colspan="3" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
 
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
  <tr>
     
      <!-- BEGIN topicpagination -->
      <td align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td 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>

               </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">
            <!-- BEGIN switch_user_authpost -->
            <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>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

<!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
      
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<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="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<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>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Dernière édition par claaire le Dim 26 Aoû 2012, 17:50, édité 1 fois
MessageSujet: Retour à la ligne qui ne s'opère pas. [resolu]   Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 25 Aoû 2012, 04:14
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Retour à la ligne qui ne s'opère pas. [resolu] Empty
Bonjour !

La partie qui affiche ton profil est la suivante :

Code:
        <div class="autour_avatar">
                            <div class="avatar_image">
              <!-- ICI SERA L'AVATAR -->
                                    {postrow.displayed.POSTER_AVATAR}
                            </div>
                          <div class="avatar_infos">
              <!-- VOUS METTREZ ICI CE QUE VOUS VOULEZ VOIR APPARAÎTRE -->
              <!-- class="name" permet à la police d'avoir une taille normale -->
                                    <span class="name">
                                              <!-- IMAGE EN LIGNE -->
                                            <center>
                                                    <div class="vavapseudo"><strong>{postrow.displayed.POSTER_NAME}</strong></div> <!-- NOM DU POSTEUR -->
                                          <br />
                                              {postrow.displayed.RANK_IMAGE} </center>
                                           
             
                                      <center>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.ONLINE_IMG} {postrow.displayed.contact_field.CONTENT}</center>
                                      <br></br>
                                     
                                                        <!-- BEGIN profile_field -->
                    <center> <div class="infovava">{postrow.displayed.profile_field.LABEL}
                    {postrow.displayed.profile_field.CONTENT}
                      {postrow.displayed.profile_field.SEPARATOR}</div></center>
                  <!-- END profile_field -->
                                    </span>
                                </div>
                    </div>
Première erreur, le <span class="name"> devrait être un div puisque on ne doit jamais mettre d'élément bloc (div) dans un élément en ligne (span). Et de même, le tout dernier </span> doit être un </div>

Toutes les balises center sont aussi inutiles. Vu que tu veux centrer tout ce qu'il y a dans le profil, il te suffit juste de rajouter dans ton CSS de quoi centrer le tout.

Et en fait, pour tout simplifier, tu peux retirer le span (balise ouvrante et balise fermante) que j'ai mentionné plus haut et rajouter la classe .name après .avatar_infos en ajoutant un espace, comme ça :
Code:
<div class="avatar_infos name"> (contenu) </div>

En retirant tous les <(/)center> (il y a trois paires, donc six balises) et les deux <(/)span>, tu simplifieras considérablement ton code.

Pour ton problème, c'est parce qu'il y a un foutu white-space:nowrap; ajouté par ForumActif directement dans le code source (sur ce coup ce sont de gros boulets). Du coup il faut gruger.

Tu vois cette partie de ton code ? :
Code:
                         <!-- BEGIN profile_field -->
         <center> <div class="infovava">{postrow.displayed.profile_field.LABEL}
         {postrow.displayed.profile_field.CONTENT}
         {postrow.displayed.profile_field.SEPARATOR}</div></center>
         <!-- END profile_field -->
Si tu as suivi ce que j'ai écrit plus haut, tu as retiré les center, ce qui nous donne ça :
Code:
            <!-- BEGIN profile_field -->
               <div class="infovava">
                  {postrow.displayed.profile_field.LABEL}
                  {postrow.displayed.profile_field.CONTENT}
                  {postrow.displayed.profile_field.SEPARATOR}
               </div>
            <!-- END profile_field -->
Le div est aussi placé de façon illogique (et la classe n'est d'ailleurs pas définie), à moins que tu n'aies un objectif bien précis en le plaçant là, il vaut mieux le mettre autour des deux commentaires, pour qu'il englobe TOUS les champs et pas chaque ligne, ce qui donne ça :
Code:
            <div class="infovava">
            <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL}
                  {postrow.displayed.profile_field.CONTENT}
                  {postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            </div>
Partant de là, il ne te reste plus qu'à ajouter ceci dans ton CSS :
Code:
.infovava > span {
    white-space : normal !important;
}
Le !important place ce code en priorité par rapport aux propriétés définies, même si celles ci ont été définies après lui (en CSS, le dernier arrivé est celui qui a raison). Dans le cas présent, il va donc forcer le navigateur à prendre la valeur "normal" pour la propriété white-space, et du coup les dépassements ne devraient plus poser problème (le souci c'est que pendant que je parle, là, j'ai un gros doute qui émerge... parce que normalement c'est le texte "date d'inscription" qui est concerné et pas la date.)

Fais déjà ce que je t'ai indiqué, à mon avis ça ne règlera pas tout (mais ça rendra ton code plus propre). Il me faudrait avoir l'adresse de ton forum pour voir de visu ce qui cloche Wink
MessageSujet: Re: Retour à la ligne qui ne s'opère pas. [resolu]   Retour à la ligne qui ne s'opère pas. [resolu] EmptySam 25 Aoû 2012, 12:10
Revenir en haut Aller en bas
http://vogue.forums-actifs.com/
claaire
{ Membre }
{ Membre }

Féminin Messages : 44



Retour à la ligne qui ne s'opère pas. [resolu] Empty
Merci beaucoup pour ta réponse! J'ai tout suivis et c'est vrai que c'est plus propre maintenant. Et ca marche parfaitement bien! Un grand merci, mon problème est résolu !

(ps: tu es très pédagogue!)
MessageSujet: Re: Retour à la ligne qui ne s'opère pas. [resolu]   Retour à la ligne qui ne s'opère pas. [resolu] EmptyDim 26 Aoû 2012, 17:50
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Retour à la ligne qui ne s'opère pas. [resolu] Empty
Hello (:
Je vois que le problème est résolu, par conséquent je classe (:
Merci de l'avoir signalé Retour à la ligne qui ne s'opère pas. [resolu] 926145
MessageSujet: Re: Retour à la ligne qui ne s'opère pas. [resolu]   Retour à la ligne qui ne s'opère pas. [resolu] EmptyDim 26 Aoû 2012, 17:57
Revenir en haut Aller en bas
Contenu sponsorisé




Retour à la ligne qui ne s'opère pas. [resolu] Empty
MessageSujet: Re: Retour à la ligne qui ne s'opère pas. [resolu]   Retour à la ligne qui ne s'opère pas. [resolu] Empty
Revenir en haut Aller en bas
 

Retour à la ligne qui ne s'opère pas. [resolu]

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

 Sujets similaires

-
» Question sur le tuto "des sous forums en retour à la ligne" (résolu!!)
» Problème image "en ligne" et "hors ligne" [Résolu]
» Empêcher le retour à la ligne.
» Retour à la ligne automatique dans une infobulle
» avoir les groupes en retour a la ligne

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