Avatar derniers messages aligné + colonnes réponses et vues

[Ombeline30]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://voyances-ombeline.forumgratuit.be/

Description du problème

Bonjour,

Donc voilà pour l'instant l'avatar du dernier posteur est placé au-dessus du texte hors ce que je souhaiterais c'est obtenir ceci :

Et faire en sorte d'avoir les "réponses et vues" en flottant comme ceci :


Je vous remercie beaucoup pour votre aide,

Ombeline.

[◦Jay◦]

Bonjour Ombeline30, essayez comme ceci :

Code:

td.row3Right span.lastpost-avatar img{float:left;
padding:5px;}

J'ai rajouté td.row3Right pour ne pas que votre page d'accueil soit impactée.

Crdialement.

[Ombeline30]

Bonjour Jay,

Un grand merci comme toujours vous m'avez encore été d'une grande aide

Pour les colonnes "réponses" et "vues" vous sauriez également m'aider s'il vous plaît ?

:thanks:

Belle journée,

Ombeline

[◦Jay◦]

Bonjour Ombeline, le résultat que vous souhaitez avec les réponses et vues aura vraisemblablement été fait avec ce tuto.

Bien cordialement.

[Ombeline30]

Re bonjour,

Me revoilà en fait avant d'aller plus loin j'aurais besoin de votre aide, en fait voilà j'ai voulu essayer de chipoter au topics_list_box pour modifier les "réponses" et "vues" et j'ai fait pire que mieux, pouvez-vous donc dans un premier temps m'aider à tout remettre à 0 merci

[Ombeline30]

Justement Jay c'est ce tuto que j'ai essayé et je me suis emmêlé les pinceaux

[Ombeline30]

Voilà Jay je suis repartie de 0 et j'ai donc retesté le tuto et voici ce que cela me donne chez moi.

À présent il y a plusieurs choses qui me tiltent c'est que j'aurais souhaité que "réponses et vues" soient serrés en haut du cadre dans l'angle de droite car quand les titres sont trop longs ça colle à "réponses/vues" ce qui n'est pas très esthétique ni clair donc faire en sorte que les réponses/vues ne soient plus alignées sur les titres

Ensuite j'ai pu remarquer que la largeur de la ligne de cellule tout à droite était plus large que les autres et je n'ai pas souvenir qu'avant ce fut le cas

Vous auriez une idée s'il vous plaît ?

Merci

[◦Jay◦]

Pourriez-vous me donner votre template modifié s'il vous plait ?

[Ombeline30]

Oui bien sûr Jay :

[◦Jay◦]

Merci, je reviendrai plus tard dans la soirée.

[Ombeline30]

Merci beaucoup

[◦Jay◦]

Re, essayez en changeant votre code par celui-ci :

Code:

.StatsTopics {
background-color: #2E1703;
border: 1px solid #c19161;
border-radius: 0 0 40px 40px;
text-align:center !important ;
width:55%;
margin-left: auto;
margin-top:-30px
}
.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right
{height:100px;}

C'est le mieux que j'arrive à faire pour le moment.

Pour le trait sur la droite :

Code:

td.row3Right{border-right:none;}

[Ombeline30]

Bonsoir Jay,

C'est déjà mieux en effet mais du coup il persiste un soucis entre la séparation des "notes et annonces" et les messages voyez :

Merci pour votre aide

[◦Jay◦]

En fait, le problème est lorsqu'il y a une ligne ou deux.

[◦Jay◦]

Essayez de changer simplement le code de StatsTopics par :

Code:

.StatsTopics {
 position:absolute;
background-color: #2E1703;
border: 1px solid #c19161;
border-radius: 0 0 40px 40px;
text-align:center !important ;
width:33%;
margin-left: auto;
margin-top:-30px
}

[Ombeline30]

Merci beaucoup en modifiant le margin-top par 24 j'obtiens ceci :

C'est déjà beaucoup mieux mais il reste une différence concernant les post annonces, ...

[Ombeline30]

Re bonsoir Jay,

Après mûre réflexion je pense que ce qui fait décaler les "réponses/vues" c'est le fait que certains sujet comportent le "aller à la page ......" et d'autres non, qu'en pensez-vous ?

Belle nuit,

Ombeline

[◦Jay◦]

Oui, du fait, les cellules s'agrandissent mais le contenu reste centré, donc ou il n'y a qu'une seule ligne, cela cause un espace sur le haut.

[◦Jay◦]

Essayez de remplacer votre template par :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
    var all_checked = true;
    for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
        }
    }
    document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
    for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
        if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
        }
    }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
        <th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
        <th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
        <!-- BEGIN multi_selection -->
        <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
    <!-- END multi_selection -->
    </tr>
    <!-- BEGIN pagination -->
    <tr>
        <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span>
      </td>
    </tr>
    <!-- END pagination -->
    <!-- END header_table --><!-- BEGIN header_row -->
    <tr>
        <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
    </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
    <tr>
        <!-- BEGIN single_selection -->
        <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
        <!-- END single_selection -->
        <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
        <!-- BEGIN icon -->
        <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
        <!-- END icon -->
        <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' valign="top"  width="100%">
        <div class="postdetails StatsTopics">Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}</div>
          <div class="topictitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                <h2 class="topic-title">
                    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </h2>
            </div>

            <!-- BEGIN switch_description -->
            <span class="genmed">
                <br />
                {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            </span>
            <!-- END switch_description -->
            <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>&nbsp;
            <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
        </td>

        <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
        <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar"><center>{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</center></span>
            <!-- END avatar -->

            <span class="postdetails">     
        {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
        <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
    <!-- END multi_selection -->
    </tr>
    <!-- END topic --><!-- BEGIN no_topics -->
    <tr>
        <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
    </tr>
    <!-- END no_topics --><!-- BEGIN bottom -->
    <tr>
        <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
                    <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Et remplacez le css par :

Code:

.StatsTopics {
background-color: #2E1703;
border: 1px solid #c19161;
border-radius: 0 0 40px 40px;
text-align:center;}

[Ombeline30]

Bonjour Jay,

Ahhhhhhh ben là clairement y a pas photo le rendu est nettement mieux :thanks: :thanks: :thanks:

Juste un tout dernier petit détail pouvez-vous m'expliquer la donnée à mettre pour faire remonter les données "réponses et vues" d'1px afin que l'encadré soit aligné sur la cellule du dessus j'ai essayé margin-top mais cela ne change rien encore merci pour votre précieuse aide


Ombeline

[◦Jay◦]

Bonjour Ombeline, Je ne suis pas sur de comprendre, pour remonter le bloc, vous pouvez ajouter : margin-top:-3px; donc, mettre le code comme ceci :

Code:

.StatsTopics {
background-color: #2E1703;
border: 1px solid #c19161;
border-radius: 0 0 40px 40px;
text-align:center;
margin-top:-3px;}

Mais personnellement, j'ajouterai un padding sous le texte, comme ceci :

Code:

.StatsTopics {
background-color: #2E1703;
border: 1px solid #c19161;
border-radius: 0 0 40px 40px;
text-align:center;
margin-top:-3px;
padding-bottom:2px;}

Bien à vous.

[Ombeline30]

J'ai pris le code que vous m'avez recommandé et c'est parfait je vous suis vraiment reconnaissante encore une fois pour le temps et l'aide que vous m'avez accordés, c'est toujours un réel plaisir :thanks:

Je vous souhaite une merveilleuse journée,

Ombeline

[◦Jay◦]

Tout le plaisir est pour moi.

Bonne journée à vous également, à bientôt.

[Ombeline30]

Je vous remercie, au plaisir également