Problème de mise en forme d'en-tête et de pied du forum [Réglé]
djikstra Membre non connecté
-
Booster Fronde
- Voir le profil du membre djikstra
- Inscrit le : 22/09/2008
J'ai un petit soucis de mise en forme avec le template de base sur la partie forum. J'ai changé certaines couleurs et images, mais je n'ai pas touché au reste du css, et donc rien changé dans le positionnement.
Pour résumer, le soucis se trouve à la fois en tête du forum, et en pied de forum, dans la partie où s'affiche le titre du sujet et sa description. Lorsque titre+description+liens vers les pages est trop grand, on a un décalage. En soit il ne serait pas gênant mais le soucis vient du conteneur qui ne s'ajuste pas en hauteur, créant un bug graphique. Mais comme des images sont plus parlantes, voici mon soucis:
Avec un sondage
Haut du forum
Bas du forum
Sans sondage
Haut du forum
le bas est identique au cas avec sondage.
Vous voyez que j'ai pu tricher un peu lorsqu'il n'y a pas de sondage, et supprimer le vide, en assignant la couleur adéquate au
<div> qui vient juste après. Mais pas lorsqu'il y a un sondage. Et cette solution n'est pas possible pour le pied de forum.Bref, j'imagine que le soucis vient du positionnement en
float: left;et
float: right;dans la div parent, mais je ne trouve pas de solution propre pour le moment
Édité par djikstra Le 30/09/2009 à 11h33
djikstra Membre non connecté
-
Booster Fronde
- Voir le profil du membre djikstra
- Inscrit le : 22/09/2008
Pour le pied de forum, il faut modifier le fichier forumtemplatesforum_topic.tpl
le code original, ligne 310
Code TPL :
<div class="msg_position"> <div class="msg_bottom_l"></div> <div class="msg_bottom_r"></div> <div class="msg_bottom" style="text-align:left;"> <span> <a href="{PATH_TO_ROOT}/syndication.php?m=forum&cat={ID}" title="Rss"><img class="valign_middle" src="../templates/{THEME}/images/rss.png" alt="Rss" title="Rss" /></a> • {U_FORUM_CAT} <a href="{U_TITLE_T}"><span id="display_msg_title2">{DISPLAY_MSG}</span>{TITLE_T}</a> <span style="font-weight:normal"><em>{DESC}</em></span> </span> <span style="float:right;"> {PAGINATION} # IF C_FORUM_MODERATOR # # IF C_FORUM_LOCK_TOPIC # <a href="action{U_TOPIC_LOCK}" onclick="javascript:return Confirm_lock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/lock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a> # ELSE # <a href="action{U_TOPIC_UNLOCK}" onclick="javascript:return Confirm_unlock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/unlock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a> # ENDIF # <a href="move{U_TOPIC_MOVE}" onclick="javascript:return Confirm_move_topic();" title="{L_TOPIC_MOVE}"><img src="{MODULE_DATA_PATH}/images/move.png" alt="{L_TOPIC_MOVE}" title="{L_TOPIC_MOVE}" class="valign_middle" /></a> # ENDIF # </span> </div> </div>
est remplacé par
Code TPL :
<div class="msg_position"> <div class="msg_bottom_l"></div> <div class="msg_bottom_r"></div> <div class="msg_bottom" style="text-align:left;"> <span style="float:right; margin-left:5px;"> {PAGINATION} # IF C_FORUM_MODERATOR # # IF C_FORUM_LOCK_TOPIC # <a href="action{U_TOPIC_LOCK}" onclick="javascript:return Confirm_lock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/lock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a> # ELSE # <a href="action{U_TOPIC_UNLOCK}" onclick="javascript:return Confirm_unlock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/unlock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a> # ENDIF # <a href="move{U_TOPIC_MOVE}" onclick="javascript:return Confirm_move_topic();" title="{L_TOPIC_MOVE}"><img src="{MODULE_DATA_PATH}/images/move.png" alt="{L_TOPIC_MOVE}" title="{L_TOPIC_MOVE}" class="valign_middle" /></a> # ENDIF # </span> <span> <a href="{PATH_TO_ROOT}/syndication.php?m=forum&cat={ID}" title="Rss"><img class="valign_middle" src="../templates/{THEME}/images/rss.png" alt="Rss" title="Rss" /></a> • {U_FORUM_CAT} <a href="{U_TITLE_T}"><span id="display_msg_title2">{DISPLAY_MSG}</span>{TITLE_T}</a> <span style="font-weight:normal"><em>{DESC}</em></span> </span> </div> </div>
J'ai seulement interverti les deux balises
<span>. Ainsi, le <span> faisant la liste des pages du sujet reste en flottant, à droite. Ce span flottant est défini avant l'autre, celui qui écrit le chemin vers le sujet. Ce dernier perd sa caractéristique flottante, pour que le conteneur père ajuste sa hauteur à sa taille. Cet ajustement est obtenu en enlevant la propriété height:23px;dans le fichier templatebasethemecontent.css pour la classe
.msg_bottom:
Code CSS :
.msg_bottom { /*height:23px;*/ background:#FFFFFF; padding-top:6px; padding-left:6px; border:1px solid #FFFFFF; border-top:1px dotted #C4CED6; }
Je pense qu'en procédant de la même manière pour le haut du forum, j'aurais un affichage correct, avec ou sans sondage
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie