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! |
| petit problème avec l'affichage des titres | |
| izzie-aaron
{ Membre }
Messages : 43
| Bonjour à tous, J'ai un petit problème avec l'affichage des mes titres des forums dans mes catégories et je ne sais pas comment résoudre mon problème alors je fais appel à vous parce que je suis en train de me prendre la tête avec les templates et le css et je m'y connais pas du tout en ça ...
Je ne sais pas trop comment expliquer mon problème alors je vous ai fais des screencaps de mon problème mais d'abord une petite explication.
Avant que je mette l'affiche des sujets et messages à coté du titre, la barre sous les titres allaient jusqu'a la fin de la colonne mais pas depuis que j'ai changé, or j'aimerai qu'elle aille jusqu'au bout de la colonne comme avant mais impossible de trouver comment faire. Voici ce que je veux :
- Spoiler:
Mon css est le suivant
- Spoiler:
- Code:
-
body { background-repeat: no-repeat; }
.forumline { border: 1px dotted dimgray; }
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; border-bottom: 4px double; display: block; text-align: center; font-size: 15px; letter-spacing: 0.5em; }
a:link,a:active,a:visited,a:hover { font-variant: small-caps; font-size: 10px; text-decoration: none; }
a.mainmenu{ font-size: 12px; color: silver; text-align: center; font-variant: small-caps; background-color: dimgray; text-decoration: none; border: 1px solid black; -moz-border-radius: 6px; } a.mainmenu:hover{ font-size: 12px; color: black; font-variant: small-caps; background-color: silver; text-decoration: none; border: 1px solid black; -moz-border-radius: 6px; }
.barre1{ background-color: dimgray; border: 1px silver solid; -moz-border-radius : 5px 5px 5px 5px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:15px;font-weight: bold;text-align:left; text-decoration: none !important; height:auto}
.statistiques{ border:0px; background-image: url("http://i50.tinypic.com/xoppjp.jpg"); background-repeat: no-repeat; background-color: black; background-position: center; height:270px;}
a.statistiques { font-size: 12px; }
.groupes{ background-color:dimgray; border: 1px black double; -moz-border-radius : 7px 7px 7px 7px; height:40px; padding-right:12px; padding-left:12px; padding-bottom:3px; font-size:15px; font-weight: bold; text-align:center; text-decoration: none !important;}
.coins { border:1px solid black; background-color: silver; -moz-border-radius:10px; -webkit-border-radius:10px; padding-left: 10px; }
.gensmall.statistiques { color: black; background-color: dimgray; -moz-background-opacity: 0.5; font-size: 13px; }
a.forumlink:hover { text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover{ text-decoration: none; }
a:hover{ text-decoration: none !important; }
.cattitle{ font-weight: bold; font-size: 15px ; letter-spacing: 1px; color: silver; } .topictitle,h1,h2{ font-weight: bold; font-size: 13px; color : silver; } .forumline { background-color: #444444; -moz-border-radius: 14px 14px 14px 14px ; border-bottom: 8px #444444 solid; border-top: 8px #444444 solid; border-right: 8px #444444 solid; border-left: 8px #444444 solid;}
QUEEL
.tableauqueel{ background-color : #COLOR ; border : solid Xpx #COLOR ; -moz-border-radius : Xpx Xpx Xpx Xpx}
.partiedroite { font-size : 12px ; border-left : Xpx dotted #COLOR ; padding-left : 10px }
.groupes{ background-color:#COLOR ; border: 1px color #COLOR ; -moz-border-radius : Xpx XpxXpxXpx; height:40px; padding-right:12px; padding-left:14px; padding-bottom:3px; font-size:14px ;font-weight: bold; text-align:center; font-color : #COLOR ; text-decoration: none !important; }
SOUS FORUM
#sousforum { width :70%; float : left ; -moz-border-radius:7px; background-color: #couleur ; }
et mon template index_box est le suivant
- Spoiler:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall"><b>Sujets :</b> {catrow.forumrow.TOPICS} | <b>Messages :</b> {catrow.forumrow.POSTS}</span></td></tr></table> </span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- 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> </td> <!-- BEGIN forum_link_no --> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
L'adresse de mon forum est : - Spoiler:
http://devil-in-angels-city.forumotion.com/index.htm Version du forum : phpBB2 Navigateur : Mozilla Firefox
Voila j'espère que c'est possible ce que je demande.
Merci d'avance Bonne journée
| | |
| | | Furase
{ Membre actif }
Messages : 312
| Bonjour ! Ton problème provient simplement du fait que ce soit uniquement le nom du forum qui est souligné. Pour corriger ça, on va donc faire quelque chose de très simple : on va supprimer le soulignement du nom du forum et à la place mettre une bordure au tableau qui contient le nom et les statistiques. Je t'ai modifié ton template pour le faire. Si tu le regardes, tu verras que je n'ai fait qu'ajouter une classe au tableau. - Spoiler:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}<br /> {CURRENT_TIME}<br /> </span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br /> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br /> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"> <h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle"> <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span> </h{catrow.cathead.LEVEL}> </td> <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td> <!-- END inc --> <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <table width="100%" class="titres-forums"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td align="right"><span class="gensmall"><b>Sujets :</b> {catrow.forumrow.TOPICS} | <b>Messages :</b> {catrow.forumrow.POSTS}</span></td></tr></table> </span> </h{catrow.forumrow.LEVEL}> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> <span class="gensmall"> <!-- 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> </td> <!-- BEGIN forum_link_no --> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </tr> <!-- END forumrow --> <!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Et pour ton css, il te suffira de remplacer - Code:
-
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; border-bottom: 4px double; display: block; text-align: center; font-size: 15px; letter-spacing: 0.5em; } par - Code:
-
a.forumlink { display: block; text-align: center; font-size: 15px; letter-spacing: 0.5em; }
.titres-forums { -moz-border-radius: 7px 7px 7px 7px; border-bottom: 4px double; } Tu verras qu'en effet j'ai supprimé la bordure du titre du forum, et je l'ai déplacée dans la classe qui correspond au tableau. Je n'ai pas regardé en détail le reste de ton css mais j'aurais trois remarques à faire : trois propriétés sont nécessaires pour arrondir les angles sur un maximum de navigateurs : -moz-border-radius, -webkit-border-radius, et border-radius. Penses à les rajouter là où c'est nécessaire ; tu as à la fin de ton css un #sousforums. Le dièse signifie qu'on est en présence d'un id, donc l'élément ne sera présent qu'une seule fois sur la page. S'il est répété plusieurs fois, il faut mettre une classe, donc remplacer # par un point, et remplacer id= de l'élément par class=. Je ne l'ai pas trouvé dans ton template donc je ne sais pas où tu l'utilises, mais penses-y lorsque tu mets des annotations (comme "QEEL" et "SOUS FORUM"), mets-les en commentaire, donc entre - Code:
-
/* commentaire */ Fu' | | |
| | | izzie-aaron
{ Membre }
Messages : 43
| Ah merci beaucoup Fu', ça fait bien la bordure jusqu'au bout mais le problème c'est qu'il n'y a plus le nombre de sujet de message affiché sur une ligne à coté du titre du forum de la catégorie. C'est revenu comme avant dans des colonnes différentes.
Il y a t'il un moyen pour qu'ils soient à nouveau dans la même ligne que le titre ?
Merci en tout cas pour ta réponse | | |
| | | Furase
{ Membre actif }
Messages : 312
| Ha ? o_O Pourtant je viens de re-vérifier et tout fonctionne chez moi. As-tu bien enregistré ton template, et as-tu pensé à la publier ?
Fu' | | |
| | | izzie-aaron
{ Membre }
Messages : 43
| J'avais pourtant bien enregistrer et publier le template mais je pense que c'est la copie qui n'avait pas fonctionner parce que je viens de le refaire et ça fonctionne bien cette fois ci.
Merci beaucoup Fu' c'est exactement ce que je voulais. Je vais pouvoir me concentrer sur les sous forums maintenant.
Dis, j'en profite pour te demander si les liens des sous forums je peux les transformer en onglets au lieu que ça soit des simples liens comme actuellement ?
je m'y connais vraiment pas en css c'est une catastrophe
| | |
| | | Furase
{ Membre actif }
Messages : 312
| Oui, c'est possible de faire ça, mais assez fastidieux. Je m'étais engagé il y a un moment déjà à faire un tutoriel pour expliquer comment faire. Je n'ai pas abandonné le projet, mais je manque un peu de temps... ^^" Pour t'expliquer rapidement la méthode, il faut aller dans Panneau d'Administration > Affichage > Structure et hiérarchie. Il y a une option qui s'appelle "Lien vers les niveaux inférieurs". Il faut cocher non, et ensuite refaire manuellement tous les liens vers les sous-forums. Il faut ensuite les positionner, grâce au css.
Fu' | | |
| | | izzie-aaron
{ Membre }
Messages : 43
| Oui j'avais déjà mis non dans les liens vers les niveaux inférieurs... Je vais essayer de le faire en bidouillant le css, j'espère que je vais trouver parce que le css et moi ça fait 36000 ^^
merci en tout cas pour ton aide
| | |
| | | Furase
{ Membre actif }
Messages : 312
| Pas de souci, je suis là pour ça Je classe le sujet. N'hésite pas si tu as de nouveau besoin d'aide. Bonne continuation. Fu' | | |
| | | izzie-aaron
{ Membre }
Messages : 43
| D'accord, je sens que je vais redemander de l'aide, parce que c'est pas gagné. Merci Bonne aprem | | |
| | | Contenu sponsorisé
| | | | | petit problème avec l'affichage des titres | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|