index box soucis pour placer correctement les intitulés sujets et réponses

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu index box soucis pour placer correctement les intitulés sujets et réponses

Message par demeter1 le Mar 20 Mai 2014 - 17:23

Bonjour à tous,
Je travaille actuellement sur un nouveau forum et, je rencontre quelques petits soucis pour modifier l'index box.

Je souhaiterai :
1/placer à droite comme sur la 2 eme capture la variables des sujet et celle des réponses à droite et,
2 /faire un petit encadrement qui englobe l'avatar et les éléments du dernier sujet (titre, date, nom du membre).

Voici ce que j'obtiens pour l'instant


Vous pourrez avoir un visu ici : http://floratropica.forumactif.org/  (version du forum Punbb).

et ce que "j'aimerai obtenir"  Embarassed 


Pour l'encadrement qui englobe l'avatar et les éléments du dernier sujet, j'ai travaillé un css mais bizarrement dés que je place la div, elle prend toute la largeur de la cellule (avec la fatigue, une chose plus qu'évidente doit m'échapper).
Le css de cette div
Code:
 .last {
background: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-radius: 3px 0px 0px 3px;
border-right: medium none currentColor;
border-top: 1px solid #DDDDDD;
height: 50px;
padding-bottom: 10px;
padding-left: 10px;
}

et enfin mon template index box
Spoiler:

Code:
<div class="pun-crumbs">
</div>
<div class="main">

<!-- BEGIN catrow -->
  

  <!-- BEGIN tablehead -->
  <div class="tcat tcat2"><div class="tcatLeft"><div class="tcatRight foruminfo L1 collapse"><h2><span class="forumtitle">{catrow.tablehead.L_FORUM}</span></h2></div></div></div>
  

  <div class="forumbitBody">
<div class="thead_bar">
  <div class="theadrow table">
      <div class="foruminfo td">
        <div class="forumdata">

            <div class="datacontainer">
            Sujets
            </div>
        </div>
      </div>
      <div class="forumactionlinks td">
          
      </div>
      <div class="forumstats td" align="center">

          
      </div>
      <div class="forumlastpost td">
        <p align="right">Dernier Message</p>
      </div>

  </div>
</div>
  <div class="main-content"><table class="table" cellspacing="1" cellpadding="5" border="0"><tbody class="statused">
                  <!-- END tablehead -->
 

   <!-- BEGIN forumrow -->
                  <tr>
 <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: 62px;">
                    <span class="status" style="margin-right: -42px; margin-left: -52px ">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>





  
                                      

                     <h{catrow.forumrow.LEVEL} class="hierarchy">    <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.TOPICS}                                    <strong> Sujets</strong>
                      <p>{catrow.forumrow.POSTS}<strong> Réponses</strong></p>
  
  
   </h{catrow.forumrow.LEVEL}>
                     <br />
<!-- BEGIN switch_moderators_links -->
                    

                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->

 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                <span style="float: left; margin: 5px 0px 0px 10px; width: 71%;text-align : justify; ">
                  
  {catrow.forumrow.FORUM_DESC}  

</span>



<!-- BEGIN switch_moderators_links -->
                     <br />

                     <!-- END switch_moderators_links -->
                    

                                                            


                                                                                      

                    
                     <span>
                                                                              <div id="forums-stats">
                     <!-- BEGIN avatar -->
                                                                               <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
 
<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
                                                                                                                            
                  </td>
              
               </tr>
   <!-- END forumrow -->
   <!-- BEGIN tablefoot -->
         </tbody>                                          </table> </div>
  <div class="bottomBar"><div class="bottomBarLeft"><div class="bottomBarRight"> </div></div></div>
  </div>
  <!-- END tablefoot -->
<!-- END catrow -->

</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">

  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
 
   <!-- BEGIN switch_delete_cookies -->
   <p class="left"> 
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">   {switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
                                          
                                          
                                          
                                      
  
                                          <script type="text/javascript">
$(".subforumFMvi a").each(function () {
  $(this).replaceWith('<option value="' + $(this).attr("href") + '">|-- ' + $(this).text() + '</option>');
});
$(".subforumFMvi option").each(function () {
  $(this).appendTo($(this).parent().prev())
});
$(".subforumFMvi").each(function () {
  if ($(this).text() == "") {
      $(this).prev().remove();
      $(this).remove();
  } else {
      $(this).prev().show()
  }
});
</script>
              <style>



/* b?ng th?ng kê vbb */
.wgo_block {
margin: 0;
}
.wgo_block {
display: block;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
-moz-box-shadow: -2px 0px 2px #C8C8C8;
box-shadow: -2px 0px 2px #C8C8C8;
margin-bottom: 0px;
}
.block {
background: transparent none;
clear: both;
padding: 0;
color: ;
font: ;
}
#forums *, #wgo *, #forumbits * {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
.wgo_block .blockbody {
border: 1px solid #C4C4C4;
background: #FDFEFF url(http://forum.vipautopro.com/images/gradients/gradient-greytowhite.png) repeat-x;
_background-image: none;
    width: 100%;
}
.formcontrols {
border-right: 1px solid #B9C4CD;
border-left: 1px solid #B9C4CD;
border-bottom: 1px solid #B9C4CD;
}
.wgo_block .section {
display: block;
padding: 0 0 0.5em;
font: 12px;
color: #3E3E3E;
clear: both;
width: 100%;
background: #FDFEFF url(http://forum.vipautopro.com/images/styles/ShinyBlue/style/forumRowBG.gif) repeat-x left bottom;
font-size: 9pt;
}
.formcontrols > :first-child, .formcontrols .blocksubhead + .blockrow, .formcontrols .section .blockrow:first-child {
border-top: none;
}
.wgo_block .section div, .wgo_block .section ol {
padding-left: 20px;
}
.blocksubhead {
font: normal 12px;
color: #3E3E3E;
background: #E9E9E9 none repeat-x;
padding: 4px 10px 4px 10px;
border-top: 1px solid #CECECE;
}
.wgo_block .blocksubhead {
font: normal 13px;
color: #3E3E3E;
background: transparent;
}

.floatcontainer::after, .formcontrols .blockrow::after, dl.stats::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
    }
 .last {
background: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-radius: 3px 0px 0px 3px;
border-right: medium none currentColor;
border-top: 1px solid #DDDDDD;
height: 50px;
padding-bottom: 10px;
padding-left: 10px;
}
 .pun .main-content {
background: -o-linear-gradient(top, #FFFFFF 0px, #F4F4F4 100%) transparent !important;
border-bottom: 1px solid #EBEBEB;
border-left: medium none currentColor; }
#category td, .statused tr, .statused tr td {
background: -o-linear-gradient(top, #FFFFFF 0px, #F4F4F4 100%) transparent !important;
border-bottom: 1px solid #EBEBEB;
border-left: medium none currentColor;
line-height: 130%;
padding: 0.2em 0px;
}                
                
    </style>

Un grand merci par avance  à l'âme charitable qui me donnera un coup de main.
Bonne fin de soirée à tous.


Dernière édition par demeter1 le Mar 20 Mai 2014 - 23:05, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8105
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: index box soucis pour placer correctement les intitulés sujets et réponses

Message par Self le Mar 20 Mai 2014 - 20:17

Hello Demeter1.

Tu peux utiliser la ligne suivante dans ton CSS pour l'afficher à la taille du contenu :
Code:
display:table-cell;

Bonne soirée Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: index box soucis pour placer correctement les intitulés sujets et réponses

Message par demeter1 le Mar 20 Mai 2014 - 22:34

Merci SeLfde4Th7, je vais tenter la manip sur la div last.

Ne me reste plus qu'à trouver un moyen de mettre "sujets" et "réponses " sur une seule ligne tout en l'alignant à gauche de la dernière cellule.

demeter1
+ Hyperactif +

Masculin
Messages : 8105
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: index box soucis pour placer correctement les intitulés sujets et réponses

Message par Self le Mar 20 Mai 2014 - 22:53

Re,

En remplaçant dans ton template, le contenu entre les balises :
Code:
<!-- BEGIN forumrow -->

<!-- END forumrow -->

Par :
Code:
<tr>
               <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: 62px;">
                  <span class="status" style="margin-right: -42px; margin-left: -52px ">
                     <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  </span>

                  <span style="float: left; margin: 5px 0px 0px 10px; width: 71%;text-align : justify; ">
                                                <h{catrow.forumrow.LEVEL} class="hierarchy">
                     <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <span class="how">{catrow.forumrow.TOPICS}<strong> Sujets</strong> {catrow.forumrow.POSTS}<strong> Réponses</strong></span>
                    </h{catrow.forumrow.LEVEL}><br />
                  <!-- BEGIN switch_moderators_links -->
                                                  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}<br />
                  <!-- END switch_moderators_links -->

                                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<br />
                                                {catrow.forumrow.FORUM_DESC}</span>
                  <div id="forums-stats">
                     <!-- BEGIN avatar -->
                     <div class="last">
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->
                        <span>
                           <!-- BEGIN switch_topic_title -->
                           <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                           <!-- END switch_topic_title -->
                           {catrow.forumrow.USER_LAST_POST}
                        </span>
                     </div>
                  </div>
               </td>
            </tr>

Puis en ajoutant ce petit bout de CSS :
Code:
.how{
    float:right;
    margin-right:55px;
}

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: index box soucis pour placer correctement les intitulés sujets et réponses

Message par demeter1 le Mar 20 Mai 2014 - 23:04

Que dire SeLfde4Th7 si ce n'est un grand merci. Vos modifications fonctionnent à merveille. ok 


demeter1
+ Hyperactif +

Masculin
Messages : 8105
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum