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! |
| [résolu]Insérer une image différente entre les sous forums et la description du forum | |
| Sywen
{ Membre }
Messages : 12
| Coucou tout le monde, Je viens à vous car je suis un peu désespérée. Ça fait plusieurs jours que je bidouille le code de mon forum mais sans succès. Voici l'adresse de mon forum http://guardiansofeternity.actifforum.com/ (il est tout neuf donc pas encore de design xD). Je vous expose mon problème. J'aimerais mettre une image différente pour chacun de mes forums un peu comme ceci https://i.servimg.com/u/f36/11/06/83/72/foruma10.jpg (les encadrés bleus). Comme vous pouvez le constater l'image est en dehors de la description du forum et de l'encadré des derniers messages. De plus, pour ceux qui sont sous Firefox, vous avez pu constater que ma cellule de forum est plus grande que celle des derniers messages et ce, malgré que dans mon CSS elles aient la même taille. Et pourtant sur les autres navigateurs elles sont toutes les deux à la même hauteur. Comment faire pour que ce soit le cas sous Firefox aussi ? Enfin, à force de bidouiller mon forum, j'ai fait disparaître sur la page principale le nom de mes catégories alors que je ne le voulait pas... Et j'aimerais bien qu'elles reviennent Pourriez vous m'aider s'il vous plaît ? Car là je déprime sévère de ne pas y arriver. Voici mon CSS : - Spoiler:
body { background-attachment: fixed; background-color: #e7e8ed; } p, td, th { font-family: Verdana,Arial,Helvetica,sans-serif; } a img { border: medium none; } a:link { color: #8a1111; } a:visited { color: #8a1111; } a:active { color: #8a1111; } a:hover { color: #BF1173; text-decoration: underline !important; } .mainmenu { color: #978880; font-size: 11px; } a.mainmenu { color: #8a1111; text-decoration: none; } a.mainmenu:hover { color: #BF1173; text-decoration: underline; } .forumlink { color: #8a1111; font-size: 11px; font-weight: 700; } a.forumlink { color: #8a1111; text-decoration: none; } a.forumlink:link { color: #8a1111; } a.forumlink:visited { color: #8a1111; } a.forumlink:active { color: #8a1111; } a.forumlink:hover { color: #BF1173; text-decoration: underline; } .nav { color: #978880; font-size: 11px; font-weight: 700; } a.nav { color: #8a1111; text-decoration: none; } a.nav:hover { text-decoration: underline; } img { border: 0 none; } .forumlink { color: #000000; font-family: 'Verdana'; font-size: 23px; font-weight: lighter; margin-top: 0; text-shadow: -1px 0 #FFFFFF, 0 1px #FFFFFF, 1px 0 #FFFFFF, 0 -1px #FFFFFF; text-transform: lowercase; } .forumlink:hover { color: white; text-shadow: 0 0 3px #FFFFFF; }
.trans .row1 { background-color: transparent; text-align: justify; } .row3Right { border: medium none !important; } .catLeft, .catRight { border: medium none !important; } .catHead { border: medium none !important; } .catBottom { border: medium none !important; } body { background-attachment: scroll; background-position: center top; background-repeat: no-repeat; margin: 0; text-align: justify; } a:link { text-decoration: none; } a:hover { text-decoration: none !important; } a { text-decoration: none; } a:link { text-decoration: none; } a:hover { text-decoration: none; } a.mainmenu { color: #970B1F; font-family: 'Verdana'; font-size: 20px; font-weight: lighter; margin-top: 0; text-shadow: -1px 0 #FFFFFF, 0 1px #FFFFFF, 1px 0 #FFFFFF, 0 -1px #FFFFFF; text-transform: lowercase; } a.mainmenu:hover { color: #6CDCB5; text-shadow: 0 0 3px #FFFFFF; } .menu { color: #000000; font-family: courier new; font-size: 25px; font-weight: lighter; letter-spacing: -4px; text-shadow: -1px 0 #FFFFFF, 0 1px #FFFFFF, 1px 0 #B90000, 0 -1px #FFFFFF; } .lien { color: #C9BFDA; font-family: 'Great Vibes',cursive; font-size: 32px; margin-right: 20px; text-decoration: none !important; } .lien:hover { -moz-transition: all 1.3s ease-out 0s; color: #2553C7; font-family: 'Great Vibes',cursive; text-shadow: 0 0 3px #2553C7; } .lien1 { color: #2553C7; font-family: arial; font-size: 10px; text-decoration: none !important; } .lien1:hover { -moz-transition: all 1.3s ease-out 0s; color: #2553C7; font-family: arial; text-shadow: 0 0 3px #2553C7; }
.groupes{ background-color: #transpa ;border: 1px #504b4b dotted; -moz-border-radius : 3px 3px 3px 3px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:10px;font-weight: bold;text-align:center; text-decoration: none !important;}
.descriptionsousfo { background-color: #e57ef1; border-radius: 10px 10px 10px 10px; font-size: 10px; height: 130px; line-height: normal; overflow: auto; padding: 3px; }
.derniermsg { background-color: #9731C2; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 5px 5px #be83d7 inset; height: 140px; padding: 6px; width: 160px; }
.descriptionfond { background-color: #e57ef1; border-radius: 10px 10px 10px 10px; padding: 3px; width: 310px; height: 130px; line-height: normal; overflow: auto; }
.description1 { background-color: #9731C2; border-radius: 20px 20px 20px 20px; box-shadow: 0 0 5px 5px #be83d7 inset; height: 140px; padding: 6px; width: 510px; }
.navig { position: absolute; top: 0px; width: 100%; }
.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right { padding: 2px 3px; }
.sushicat { padding-left: 130px; line-height: 0.5; }
Merci d'avance aux âmes généreuses qui accepteront de m'aider | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Salut, - Citation :
- Je vous expose mon problème. J'aimerais mettre une image différente pour chacun de mes forums un peu comme ceci https://i.servimg.com/u/f36/11/06/83/72/foruma10.jpg (les encadrés bleus). Comme vous pouvez le constater l'image est en dehors de la description du forum et de l'encadré des derniers messages.
Si je ne me trompe pas, il s'agit là de l'image que tu peut ajouter en créant tes catégories, il te suffit d'aller dans le templates index_box, de localiser le code : - Code:
-
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
Et de le placer où tu le souhaites, en l’occurrence ici dans un tableau avec 2 colonnes, 1 pour l'image et l'autre la description. - Citation :
De plus, pour ceux qui sont sous Firefox, vous avez pu constater que ma cellule de forum est plus grande que celle des derniers messages et ce, malgré que dans mon CSS elles aient la même taille. Et pourtant sur les autres navigateurs elles sont toutes les deux à la même hauteur. Comment faire pour que ce soit le cas sous Firefox aussi ?
Essaie de réduire le height de la classe description1 de 12px, lorsque tu ajoutes un padding pense à le déduire sur la hauteur et la largeur. - Citation :
Enfin, à force de bidouiller mon forum, j'ai fait disparaître sur la page principale le nom de mes catégories alors que je ne le voulait pas... Et j'aimerais bien qu'elles reviennent Tu as du supprimer une variable, passe nous ton templates index_box | | |
| | | Sywen
{ Membre }
Messages : 12
| Merci Hiro pour ta réponse ! - Hiro a écrit:
- Si je ne me trompe pas, il s'agit là de l'image que tu peut ajouter en créant tes catégories, il te suffit d'aller dans le templates index_box, de localiser le code :
- Code:
-
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
Et de le placer où tu le souhaites, en l’occurrence ici dans un tableau avec 2 colonnes, 1 pour l'image et l'autre la description. J'ai essayé de faire comme tu m'as dit, mais ça me déplace l'image pour signaler qu'il y a un nouveau message ou des anciens messages et ce n'est pas celle là que je veux déplacer... En fait l'image que je veux mettre (comme sur la capture d'écran en fait) c'est un peu comme si c'était l'image que l'on peut rajouter à la description de chaque forum mais sans qu'elle soit dans le cadre réservé à la description de chaque forum... Je sais pas si je suis claire - Citation :
Essaie de réduire le height de la classe description1 de 12px, lorsque tu ajoutes un padding pense à le déduire sur la hauteur et la largeur.
J'ai également fait ça, mais si tu retourne sur le forum tu verras que du coup mes autres cellules débordent de la plus grande... - Citation :
- Tu as du supprimer une variable, passe nous ton templates index_box
Je vais essayer mais tout à l'heure quand j'ai voulu le faire ça n'a pas marché... - Code:
-
<table width="750px" 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> <br />
<!-- BEGIN catrow --><!-- BEGIN tablehead --> <table align="center" width="700px" border="0" cellspacing="1" cellpadding="0"><tr style="display: none;"> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap">{L_TOPICS}</th> <th nowrap="nowrap"><div style="width:50px";>{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></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"><div style="width:120px;"> </div></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 width="100%" valign="top" height="50" colspan="1" class="row1 over"> <div style="padding-left:100px;"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </div> <div style="margin-top:-15px"> <center> <table cellspacing="0"> <tbody> <tr> <td> <div class="description1"> <span class="genmed"> <table> <tbody> <tr> <td width="120"> <div class="descriptionsousfo"> <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> </div> </td> <td> <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT --> <div class="<!-- IF forumrow.S_IS_CAT eq 1 --> sushicat1<!-- ELSEIF forumrow.FORUM_ID eq 2 --> sushicat cat2<!-- ENDIF -->"><!-- IF forumrow.S_IS_CAT --> </div> </td> <td><table align="center" width="310"><tr> <td class="descriptionfond" align="left" valign="top">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span> </td></tr></table> </td> </tr> </tbody> </table> </span> </div> </td> <td> <table align="center" style="width: 160px; "><tr><td class="derniermsg" align="center" valign="middle"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td></tr></table> </td> <td 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> </tr> </tbody> </table> </center> </div> </td> </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 --> Merci encore pour ton aide en tout cas | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour ! Pour la mise en forme de l'image et de la description de catégorie, je t'invite à suivre ce tutoriel, sauf que tu mettras une image à la place des liens '_' - Citation :
- vous avez pu constater que ma cellule de forum est plus grande que celle des derniers messages et ce, malgré que dans mon CSS elles aient la même taille
Je ne comprends pas @_@ Moi ce que je vois sur ton forum c'est ça : Ce n'est pas vraiment la cellule des derniers messages qui m'a l'air de poser problème O_o | | |
| | | Sywen
{ Membre }
Messages : 12
| Bonjour ! Merci 'Christa pour ta réponse je vais voir de ce pas ce tutoriel - 'Christa a écrit:
- Je ne comprends pas @_@ Moi ce que je vois sur ton forum c'est ça :
Ce n'est pas vraiment la cellule des derniers messages qui m'a l'air de poser problème O_o Oui c'est normal c'est parce que j'avais réduit la hauteur de la cellule du forum comme me l'avait conseillé Hiro et je l'avais laissé en état pour lui montrer le résultat Je viens de la remettre à son état d'origine. Firefox est le seul navigateur qui refuse de me mettre mes deux blocs à la même hauteur Merci encore pour votre aide à tous les deux ! | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Ben déjà ton code est un peu lourd pour pas grand chose, je vois des tables à une cellule et une colonne O.o Et des <tbody> qui ne servent à rien (ça n'est utile que si on utilise un entête et pied de tableau) Et un <center> qui est une balise obsolète et peut être remplacé par un margin:auto; ou text-align:center; dans la bonne classe. Enfin bref c'est un peu le gros bordel dans ton code là O.o J'ai essayé de le nettoyer mais vu que c'est le gros bordel ça changera pas grand chose : - Code:
-
<table width="750px" 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> <br />
<!-- BEGIN catrow --><!-- BEGIN tablehead --> <table align="center" width="700px" 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">{L_TOPICS}</th> <th nowrap="nowrap"><div style="width:50px";>{L_LASTPOST}</div></th> </tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></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"><div style="width:120px;"> </div></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 width="100%" valign="top" height="50" colspan="6" class="row1 over"> <div style="padding-left:100px;"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </div> <div style="margin:auto;margin-top:-15px;text-align:center;"> <table cellspacing="0"> <tr> <td> <div class="description1 genmed"> <table> <tr> <td width="120"> <div class="descriptionsousfo"> <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> </div> </td> <td> <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT --> <div class="<!-- IF forumrow.S_IS_CAT eq 1 --> sushicat1<!-- ELSEIF forumrow.FORUM_ID eq 2 --> sushicat cat2<!-- ENDIF -->"><!-- IF forumrow.S_IS_CAT --> </div> </td>
<td> <div class="genmed descriptionfond"> {catrow.forumrow.FORUM_DESC} </div> </td> </tr> </table> </div> </td> <td> <div class="derniermsg gensmall"> {catrow.forumrow.LAST_POST} </div> </td> <td 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> </tr> </table> </div> </td> </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 --> | | |
| | | Sywen
{ Membre }
Messages : 12
| Merci 'Christa pour ton aide ! Ça y est j'ai enfin des cellules de la même taille ! Merci infiniment. Et désolée pour mon code en pagaille, il est vrai que je rajoute souvent des éléments qui ne servent pas à grand chose mais me qui semblent avoir une utilité sur le moment... Problème résolu je dirais | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Pour l'image, il s'agit en faite de cette variable : - Code:
-
{catrow.forumrow.FORUM_DESC}
Mais elle affiche la description + l'image donc voici une astuce: Si tu veux que l'image, tu la met dans un span avec une classe : - Code:
-
<span class="test">{catrow.forumrow.FORUM_DESC}</span>
Puis dans le css on va cacher le texte : - Code:
-
.test {text-indent: -5000px;}
Et si tu ne veux que le texte, tu as juste à retirer le text-indent et à ajouter dans le css : - Code:
-
.test img {display:none;}
| | |
| | | 'Christa
Lostmindy
Messages : 2856
| T'es un peu en retard Hiro XD Et je pense qu'elle a besoin de la description quand même hein x) | | |
| | | Psycho
Psychopathe
Messages : 3407
| Yop' Si le problème est résolu, j'archive ^^ Merci de l'avoir signalé | | |
| | | Contenu sponsorisé
| | | | | [résolu]Insérer une image différente entre les sous forums et la description du forum | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|