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

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

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

Message par Ombeline30 le Lun 3 Oct 2016 - 13:41

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.


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:14, édité 2 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Lun 3 Oct 2016 - 16:49

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. Wink

Crdialement.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 10:12

Bonjour Jay,

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

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

Thanks

Belle journée,

Ombeline flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 13:26

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

Bien cordialement.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 13:30

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 Embarassed


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:08, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 13:33

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

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 16:09

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 Rolling Eyes

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 scratch

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

Merci flower


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:08, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 18:26

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



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 18:29

Oui bien sûr Jay :



Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:09, édité 2 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 18:32

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



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 18:35

Merci beaucoup flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 20:37

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;}



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 20:44

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 flower


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:11, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 20:46

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



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 20:53

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
}



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 21:00

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, ...


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:12, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mar 4 Oct 2016 - 22:14

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 flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 22:24

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.


Dernière édition par ◦Jay◦ le Mar 4 Oct 2016 - 22:53, édité 1 fois



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mar 4 Oct 2016 - 22:28

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;}



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mer 5 Oct 2016 - 8:21

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 thumright


Ombeline flower


Dernière édition par Ombeline30 le Mer 5 Oct 2016 - 9:12, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mer 5 Oct 2016 - 8:29

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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mer 5 Oct 2016 - 9:06

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 flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par ◦Jay◦ le Mer 5 Oct 2016 - 9:09

Tout le plaisir est pour moi. Wink

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



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2513
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar derniers messages aligné + colonnes réponses et vues

Message par Ombeline30 le Mer 5 Oct 2016 - 9:10

Je vous remercie, au plaisir également flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 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