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! |
| Problème d'éléments à déplacé : index_box [RESOLU] - viewtopic_body [RESOLU] | |
| Kaileen
{ Membre }
Messages : 103
| Bonjour à tous ! Voilà déjà plusieurs jours que j'ai décider de reprendre une 'vieille' CSS pour l'amélioré afin d'ouvrir un RPG, le hic, c'est que je bloque sur plusieurs petites choses, des choses bêtes sans doute, mais ça coince et chaque fois que j'y touche, je fais beuger ce que j'ai déjà fait. Voilà le forum concerné : http://hollywood-ramdam.lebonforum.com/ Dans mon template index_box pour commencer. ▼ Le premier soucis, c'est l'espace bidon qu'il y a entre chaque bloc de mes catégories, quand j'ai fait ça sur un premier forum, l'espace n'y était pas, je n'ai rien toucher et je ne comprends pas pourquoi ça me fait ça. ▼ ensuite, j'aimerais décalé le 'X SUJETS ● X MESSAGES' sur la même ligne mais à droite, j'ai repéré l'élément dans mon template, sauf que je sais pas ou je dois le mettre. ▼ enfin, j'aimerais déplacé l'image 'old' 'lock' 'new' au dessus des derniers messages postés. J'ai essayer d'utiliser le tutoriel proposer sur CSS Actif, mais je dois faire une erreur, car ça détruit tout ce que j'ai déjà fait, et j'avoue, ça m'énerve de ne pas y arrivé. Voilà mon template modifié : - 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 --> <div class="cathead">{catrow.tablehead.L_FORUM}</div><div class="catbody"> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <!-- 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="80%"> <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="80%" height="50"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br/> </span> </h{catrow.forumrow.LEVEL}><span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> <color=#A61802>SUJETS</color> <b>●</b> <b>{catrow.forumrow.POSTS}</b> <color=#A61802>MESSAGES</color></span><br/> <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> <td class="row3 over" align="center" valign="middle" height="50" width="20%"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </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> </div><div class="catfoot"></div> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> Je ne pense pas que la CSS soit nécessaire, mais si besoin, je peut vous la fournir. J'évoquerais mon second problème une fois celui-ci résolu, pour éviter que le message soit 'fouillis'. Merci d'avance pour votre aide ! |
Dernière édition par Kaileen le Mer 10 Oct 2012, 09:35, édité 3 fois | |
| | | 'Christa
Lostmindy
Messages : 2856
| Hello ! Alors, petites remarques orthographiques, c'est "le" CSS (vu qu'il s'agit du CODE CSS) ou bien "la" feuille de style. Et accessoirement, fais attention à tes accords du passé composé et à tes infinitifs '_' Pour ton problème de marge, j'aurais tendance à penser que ça vient du fait qu'il y a des marges verticales sur la classe .forumline , il ne te reste donc qu'à les retirer. Pour les statistiques des sujets et messages, il y a ce tutoriel qui t'aidera à le faire toi même Je t'invite par ailleurs à remplacer ton code - Code:
-
<span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> <color=#A61802>SUJETS</color> <b>●</b> <b>{catrow.forumrow.POSTS}</b> <color=#A61802>MESSAGES</color></span><br/> Par celui proposé dans le tutoriel, et à banir les balises <b> et <color> au profit des balises <strong> et <span> (avec des classes). Pour l'icone de catégorie, j'imagine que tu as utilisé ce tutoriel, mais ton template n'a pas été modifié à ce niveau, je ne peux donc pas te dire où tu t'es trompée | | |
| | | Kaileen
{ Membre }
Messages : 103
| Salut, Alors, merci pour ces petites informations, je suis passé à côté du premier tutoriel, sans le voir, il m'a bien aider. Il faut juste que je corrige un petit détail, mais on verra ça plus tard. Pour le reste, j'avais bien suivi ce tutoriel, mais comme ça ne fonctionnait pas, j'ai tout enlevé, et là, ça marche, bref, j'ai paniqué pour rien merci encore ! Problème résolu. | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Le bouton en ligne ainsi que profil, mp, etc, c'est là: - Code:
-
[<table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG} </td> </tr> </table> C'est ça qui correspond é l'image de "en ligne" - Code:
-
{postrow.displayed.ONLINE_IMG} Et on a respectivement: Profil: - Code:
-
{postrow.displayed.PROFILE_IMG} MP: - Code:
-
{postrow.displayed.PM_IMG} Email: - Code:
-
{postrow.displayed.EMAIL_IMG} Le "Fiche de Contact". Je pense que c'est msn, icq, toussa... - Code:
-
<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> Voilà! ^^ Edit: Zut! Tu as enlevé ta question du coup! =( J'ai été inutile! | | |
| | | Kaileen
{ Membre }
Messages : 103
| Non, au contraire, ça peut toujours me servir, je vais tout de même essayer ce que j'ai en tête, et si je n'y arrive pas, tant pis. Merci beaucoup ! | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Merci beaucoup d'avoir changé le titre de ton sujet pour résolu! Ça aide toujours les modérateurs! ^^
Je suis contente que ça te serve quand même alors! N'hésite pas, cependant, à nous poser encore des questions, si le truc que tu as en tête "marche à moitié" =D
Bonne journée! ^^ | | |
| | | Kaileen
{ Membre }
Messages : 103
| Bonjour ! Me revoilà. Alors, j'ai testé, ce que je voulais faire, ça à marché parfaitement bien, je suis contente, bon, le rendu, pour le moment, n'est pas exilent, mais ce n'est qu'un détail, ça changera lorsque j'aurai un design. Si je poste ce message, c'est parce que j'ai un autre soucis, concernant cette fois mon template viewtopic_body. J'ai modifié un aspect de mon profil, pour que les éléments de la feuille de personnage apparaissent sous forme d'infobulle, ça a bien fonctionné, sauf que je galère avec le CSS, le bloc ne se centre pas, j'ai essayé pleins de trucs différents, rien à faire. Par 'bloc', je veux parler de la barre arrondis 'TON TEXTE OU TON IMAGE', je n'ai pas encore modifié le reste, car je préfère m'occuper de cette petite partie avant. De plus, lorsque l'infobulle apparaît, il y a un rectangle en trop derrière, j'ai du oublié d'enlever une partie du code, ou je ne sais pas quoi et j'ignore ce que c'est. Voici le CSS relatif à l'infobulle : - Code:
-
/* INFO BULLE DE LA FEUILLE DE PERSONNAGE */ span.profil { position : relative; bottom: 5px; top: -5px; left: 3em; right: 3em}
span.profil span { display : none; font-size : 11px; white-space : normal; }
span.profil:hover { background : none; z-index: 999; cursor : help; }
span.profil:hover span { display : inline; position : absolute; top : -100px; left : 100; background : white; /* fond de l infobulle */ color : #b2c8d3; /* couleur du texte */ padding : 10px; border: 2px solid #c6b46d; text-align : justify; font-family : Georgia; font-weight : bolder; font-variant : small-caps; font-size : 11px; width : 210px; } Et le template (au cas ou) : - Code:
-
<script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" }; $(function(){ _atc.cwait = 0; $('.addthis_button').mouseup(function(){ if ($('#at15s').css('display') == 'block') { addthis_close(); addthis_close(); } }); }); //]]> </script>
<table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="left" valign="middle" nowrap="nowrap"> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authreply --> </span> </td> <td align="left" valign="middle" nowrap="nowrap"> <!-- BEGIN switch_twitter_btn --> <span id="twitter_btn" style="margin-left: 6px; "> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </span> <!-- END switch_twitter_btn --> <!-- BEGIN switch_fb_likebtn --> <span id="fb_likebtn" style="margin-left: 6px; "> <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> </span> <!-- END switch_fb_likebtn --> </td> <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="bottom" nowrap="nowrap" width="100%"> <span class="gensmall bold"> <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a> <!-- BEGIN switch_plus_menu --> | <script type="text/javascript">//<![CDATA[ var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}'; var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}'; var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}'; var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}'; var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}'; var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}'; insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> <!-- END switch_plus_menu --> </span> </td> </tr> </table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;"> <tr align="right"> <td class="catHead" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr> <!-- BEGIN topicpagination --> <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr> <!-- END topicpagination --> {POLL_DISPLAY} <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr> <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div class="profil"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><center><center>{postrow.displayed.RANK_IMAGE}</center><div class="opacity"><div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div></div>{postrow.displayed.POSTER_NAME}</center></strong></span> <span class="postdetails poster-profile"> <center>{postrow.displayed.POSTER_RANK}</center> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> <br/><span class="profil">TON TEXTE OU TON IMAGE<span><span class="postdetails poster-profile">{postrow.displayed.POSTER_RPG}</span></span></span><br /><table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"><br/> <center>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}</center> </td> </tr> </table> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /></div> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> <td valign="top" nowrap="nowrap" class="post-options"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </td> </tr> <tr> <td colspan="2" class="hr"> <hr /> </td> </tr> <tr> <td colspan="2"> <!-- BEGIN switch_vote_active --> <div class="vote gensmall"> <!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div> <!-- END switch_vote -->
<!-- BEGIN switch_bar --> <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"> <!-- BEGIN switch_vote_plus --> <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div> <!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus --> <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div> <!-- END switch_vote_minus --> </div> <!-- END switch_bar -->
<!-- BEGIN switch_no_bar --> <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div> <!-- END switch_no_bar -->
<!-- BEGIN switch_vote --> <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div> <!-- END switch_vote --> </div> <!-- END switch_vote_active -->
<div class="postbody">
<div class="message_contenu">{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments --> <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd> <!-- BEGIN switch_post_attachments --> <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />
<!-- BEGIN switch_dl_att --> <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL} <!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att --> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL} <!-- END switch_no_dl_att --> </dt>
<!-- BEGIN switch_no_comment --> <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd> <!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att --> <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd> <!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl> <!-- END switch_post_attachments --> </dd> </dl> <!-- END switch_attachments -->
<div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div>
</div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> </tr> <tr> <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150"> <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> </td> </tr> <!-- BEGIN first_post_br --> </table> <br /> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr> <!-- END first_post_br --> <!-- END displayed --> <!-- BEGIN hidden --> <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr> <!-- END hidden --> <!-- END postrow --> <!-- BEGIN no_post --> <tr align="center"> <td class="row1" colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr> <!-- END no_post --> <tr align="right"> <td class="catBottom" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td> <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr> </table> <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;"> <tr> <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td> <!-- BEGIN topicpagination --> <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td> <!-- END topicpagination --> </tr> <!-- BEGIN switch_user_logged_in --> <!-- BEGIN watchtopic --> <tr> <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr> <!-- END watchtopic --> <!-- END switch_user_logged_in --> </table>
<!-- BEGIN promot_trafic --> <table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px"> <tr> <td class="catBottom" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td> <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> </table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px"> <tr> <td class="catBottom" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td> <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> <tr> <td class="row2 postbody" valign="top"> <!-- BEGIN link --> » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br /> <!-- END link --> </td> </tr> </table> <!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules --> <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px"> <tbody> <tr> <td class="catBottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top"> <h1 class="cattitle"> {L_FORUM_RULES}</h1> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="row1 clearfix"> <table> <tr> <!-- BEGIN switch_forum_rule_image --> <td class="logo"> <img src="{RULE_IMG_URL}" /> </td> <!-- END switch_forum_rule_image --> <td class="rules postbody"> {RULE_MSG} </td> </tr> </table> </td> </tr> </tbody> </table> <!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="row2" colspan="2" align="center" style="padding:0px"> <!-- BEGIN switch_user_logged_in --> <a name="quickreply"></a> {QUICK_REPLY_FORM}<br /> <!-- END switch_user_logged_in --> </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"> <tbody> <!-- BEGIN show_permissions --> <tr> <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td> <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td> </tr> <!-- END show_permissions --> <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <!-- BEGIN show_permissions --> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td> <!-- END show_permissions --> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"> <tbody> <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}> <span class="nav"> <!-- BEGIN switch_user_authpost --> <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authpost --> <!-- BEGIN switch_user_authreply --> <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a> <!-- END switch_user_authreply --> </span> </td>
<!-- BEGIN viewtopic_bottom --> <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td> <!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel --> <td align="center"> <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span> </td> <td align="center" width="250"> <span class="gensmall"> </span> </td> <!-- END moderation_panel --> </tr> </table> </form>
<!-- BEGIN viewtopic_bottom --> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br /> <form name="action" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> --> <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span> </form> </td> </tr> </table> <!-- END viewtopic_bottom -->
<!-- BEGIN switch_image_resize --> <script type="text/javascript"> //<![CDATA[ $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} })); //]]> </script> <!-- END switch_image_resize --> <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script> Voilà, merci d'avance | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Que veux-tu dire par "ne se centre pas"? Pour moi, il est centré O__O | | |
| | | Kaileen
{ Membre }
Messages : 103
| L'espace entre le bord gauche et le cadre est plus grand qu'entre le bord droit et le cadre. J'ai entouré en rouge, ce que j'ai chez moi : | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Pourquoi ne pas simplement entourer de la balise center? | | |
| | | Kaileen
{ Membre }
Messages : 103
| C'est ce que j'ai fait directement sur le template, mais ça ne marche pas. | | |
| | | Nyo The Neko
{ Spécialiste }
Messages : 245
| Tu as enlevé le positionnement que tu avais mit dans le CSS quand tu as ajouté la balise center? | | |
| | | Doare
{ Spécialiste }
Messages : 544
| Hey. La raison est simple : il n'y a pas de centrage, le span s'est juste décalé en obéissant à la propriété left: 3em; de ton CSS pour span.profil . Au lieu de : - Code:
-
span.profil { position : relative; bottom: 5px; top: -5px; left: 3em; right: 3em } Essaye : - Code:
-
span.profil { position: relative; display: block; margin: 0 auto; width: 150px; /* taille à modifier comme tu veux */ } span.profil + br { display: none; /* masque l'espace qui suit (saut à la ligne) */ } | | |
| | | 'Christa
Lostmindy
Messages : 2856
| La balise center est obsolète O.O Ne JAMAIS utiliser la balise center ! Si c'est pour centrer du texte, c'est la propriété text-align:center; Si c'est pour centrer un bloc, il faut utiliser margin:auto (ou margin: ?px auto; si on veut ajouter des marges en haut et en bas) Je pense que le problème vient de là : - Code:
-
span.profil { position : relative; bottom: 5px; top: -5px; left: 3em; right: 3em} Tu n'as aucun intérêt à positionner le premier span comme ça et les 3em de chaque côté posent souci (surtout sur un span) u_u' Seul le position:relative; est utile. Edit : Doublée par Doare. Et cool pour le saut de ligne OoO | | |
| | | Kaileen
{ Membre }
Messages : 103
| Merci à tous les trois pour votre aide, ça fonctionne comme il faut Il reste juste un petit truc, mais là, je pense que ça viens du template, c'est le rectangle qui apparait en plus de l'infobulle normal : Logiquement, il ne devrait pas y être, mais comme j'ai fait pas mal de changement dans mon template, j'ai peut être mis un truc qui fallait pas ? | | |
| | | Espeon
Administrateur
Messages : 1819
| - Nyo The Neko a écrit:
- Pourquoi ne pas simplement entourer de la balise center?
Parce-que c'est une balise dépréciée qu'il ne faut pas utiliser (pour répondre à ce point de détail) Ca ne respecte pas le principe de base du HTML/CSS : séparer la forme du fond. EDIT : Merci 'Christa | | |
| | | Doare
{ Spécialiste }
Messages : 544
| C'est parce que ton CSS s'applique à tous les SPAN se trouvant à l'intérieur de span.profil . Or, il suffit que cela s'applique à celui qui contient l'information. Fort heureusement, c'est très simple à faire. Dans ton CSS, pour les déclarations suivantes : - Code:
-
span.profil span { // propriétés CSS } span.profil:hover span { // propriétés CSS } Tu vas ajouter le signe >, qui dit en gros : dans span.profil , je cible le span qui est son fils direct. - Code:
-
span.profil > span { // propriétés CSS } span.profil:hover > span { // propriétés CSS } Sinon, dans ton template, je ne comprends pas trop pourquoi à la ligne concernée tu as ajouté un <span> autour de postdetails . Il n'y en a pas du tout besoin. - Code:
-
<!-- END profile_field --> <br/> <span class="profil"> TON TEXTE OU TON IMAGE <span> <span class="postdetails poster-profile">{postrow.displayed.POSTER_RPG}</span> </span> </span> (Ce n'est pas indenté comme ça dans ton template. Cherche le <!-- END profile_field --> pour retrouver où c'est.) |
Dernière édition par Doare le Mer 10 Oct 2012, 09:34, édité 1 fois | |
| | | Kaileen
{ Membre }
Messages : 103
| D'accord, c'est modifié, merci beaucoup pour ton aide. Je ne savais pas du tout que l'on pouvait faire ça Merci à tous pour vos conseils. Problème résolu. | | |
| | | Melone
{ Modérateur }
Messages : 805
| Hello, Merci d'avoir prévenu, j'archive. Bonne journée, | | |
| | | Contenu sponsorisé
| | | | | Problème d'éléments à déplacé : index_box [RESOLU] - viewtopic_body [RESOLU] | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|