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! |
| Soucis de codage [résolu] | |
| Hurricane
{ Membre }
Messages : 69
| Bonjour / Bonsoir les pros du codage Alors j'ai décidé de reprendre un vieux forum et j'ai tenté de me débrouiller toute seule niveau codage, cependant il m'arrive quelques bricoles que je n'arrive pas à régler. Je me balade sur deux navigateurs différents : Opéra & Firefox. Tout d'abord voici le lien du forum -> http://neverwhere.bb-fr.com Je vais commencer par expliquer mes soucis au niveau des sous forums vu que c'est là que j'ai le plus de problèmes. - Spoiler:
Sur cette première capture le fond de titre de la première catégorie (et pas des autres) se met sur la gauche. Le texte en fait également à sa tête vu que j'ai beau mettre une couleur ou une taille ça ne prend pas... - Spoiler:
Sur cette deuxième capture on peut voir qu'il n'y a pas d'espace entre les différentes catégories, tout est collé. Autre souci il y a un vide entre le cadre de description et celui des stats lorsqu'il n'y a pas de sous forums, est-ce que je suis obligé de créer des sous forums partout pour faire apparaître un cadre ? J'ai réussi remarqué que le cadre des sous forums avait un léger décalage de deux ou trois pixels avec celui de la description du sous forum, ils n'arrivent donc pas au même niveau (alors que celui des stats arrive pile où il faut). - Spoiler:
Au niveau du profil je n'ai pas de beugs mais, j'aimerais savoir faire deux petites choses. Premièrement j'aimerais savoir s'il est possible que les champs (et uniquement les champs c'est à dire que la partie Messages : doit être en gras et pas les chiffres) soient en gras ? Deuxièmement j'aimerais savoir comment on fait pour séparer par un espace ou des symboles (comme ceux là ✤ ✤ ✤ ✤ ) les champs ? J'aimerais bien créer deux séparations, en gros l'âge et les messages seraient séparés des autres champs et les dates d'arrivées & d'anniversaires seraient séparées des champs du dessus. Voici le css qui concerne les sous forums - Code:
-
/* CATÉGORIES DU FORUM */
.formeliens{ font-size:9px; } .titres_cat { font-size: 18px; background: #424759; width: 950px; height: 32px; border-radius:9px 9px 0px 0px ; text-align: center; font-family: Roboto Condensed; font-weight: 700; color;#DCE0DF; text-transform: uppercase; text-align: center; padding-top: 3px !important; }
.fond_cat { width: 950px; padding : 10px 10px 10px; border-bottom : 1px dotted #CC7023; border-radius:0px 0px 9px 9px ; position: center; background: #CECAC3; }
.contour_cat { display : inline-block; vertical-align : top; }
.descrip_cat { width : 400px; height : 136px; background: url(http://image.noelshack.com/fichiers/2014/01/1388861572-nn.gif); border: 1px dotted #424759; text-align: justify; font-size:12px; padding : 8px;
}
.sous_forum { float:left; /* flottant à gauche */ width:30%; /* largeur de 20% */ text-transform: lowercase; }
.sous_forum a { text-align: justify; width : 155px; display:block; /* on transforme les liens en blocs */ background: url(http://image.noelshack.com/fichiers/2014/01/1388861572-nn.gif); border: 1px dotted #424759; padding:2px 10px; /* marges internes haut/bas et droite/gauche */ margin:2px 0; /*marges externes haut/bas et droite/gauche */ color: #424759; text-shadow: 0px 0px 1px darkgrey; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; }
.sous_forum a:hover { display : block; color;#d8aa36; font-weight: bold; font-family: 'georgia'; }
.sous_forum a:hover { color: #42709A; text-shadow: 1px 0px 1px darkgrey, -1px 0px 1px darkgrey; }
.stats_cat { background : #E0CDB1; padding : 3px; width : 156px; margin-left : 5px; background: url(http://image.noelshack.com/fichiers/2014/01/1388861572-nn.gif); border: 1px dotted #424759; text-align : center; font-family : Calibri; font-size : 12px; }
.derniermess_cat { height : 98px; width : 144px; background: url(http://image.noelshack.com/fichiers/2014/01/1388861572-nn.gif); margin-top : 2px; margin-left : 5px; text-align : center; border: 1px dotted #424759; padding : 15px 10px;
}
.contour_cat + .contour_cat { margin-left : 5px;
} .titres_forums { padding-top:2px; font-size : 28px; font-weight : bold; margin : 0 0 -8px 111px; font-family:'Cookie', cursive; padding-bottom:5px; }
.titres_forums a { color : #424759; text-shadow : 1px 1px 1px #141a35; -moz-transition: all 2s; /* Firefox 4 */ -webkit-transition: all 2s; /* Safari and Chrome */ -o-transition: all 2s; /* Opera */ transition: all 2s; }
.titres_forums a:hover { color : white; text-decoration : none !important; }
Le css qui concerne le profil - Code:
-
/* PROFIL */
.ombre {text-shadow: #90674D 1px 1px 1px; font-family:'Cookie', cursive}
.profil_avatar { background : #D2D2D2; width: 202px; border: 1px dotted #424759; font-size: 11px; line-height: 15px; margin-bottom: 2px; margin-top: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; text-align: justify; }
.bouton-profil { cursor: pointer; /* curseur au survol */ margin: 5px 0; /* petite marge en haut et en bas */ padding: 2px; /* espacement entre le texte et la bordure */ text-align: center; /* centrage du texte dans le bloc */ border: 1px dotted #424759; color: #1e2230; /* couleur texte */ font-size: 11px; /* taille du texte */ font-variant: small-caps; /* effet petites majuscules */ font-weight: bold; /* effet gras */ letter-spacing: 2px; /* espace entre les lettres */ background: #D2D2D2 /* couleur de fond */ }
.profil-cache { background : #D2D2D2; width: 220px; border: 1px dotted #424759; }
.champsprofil { background: url(http://image.noelshack.com/fichiers/2014/01/1388861572-nn.gif); border-radius:0px 0px 9px 9px ; border: 1px solid #424759; }
.champsprofil img { max-width: 195px; }
.texteinfo { color: #E14028; text-align: center; font-style: italic; font-family: georgia; font-size: 12px; text-transform: uppercase; }
.psdo { color: #C24216; text-align: center; font-family: 'Lily Script One', cursive; font-size: 17px; }
Le template index_box - 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="titres_cat">{catrow.tablehead.L_FORUM}</div> <center><table class="fond_cat"> <!-- END tablehead --> <!-- BEGIN forumrow --> <tr> <td> <center> <div class="titres_forums"> <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </div> <div class="contour_cat"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div> <div class="contour_cat"> <div class="descrip_cat"> {catrow.forumrow.FORUM_DESC} </div> </div> <div class="contour_cat"> <span id="subforums"> <div class="gensmall sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div> </span> </div> </div> <script type="text/javascript"> jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id'); </script> <div class="contour_cat"> <div class="stats_cat"> {catrow.forumrow.TOPICS} Sujets & {catrow.forumrow.POSTS} Messages. </div> <div class="derniermess_cat"> {catrow.forumrow.LAST_POST} </div> </div></center> </td> </tr> <!-- END forumrow -->
<!-- BEGIN tablefoot --> </table> <!-- END tablefoot --> <!-- END catrow --></center> Le template viewtopic_body - 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> <br /> <div class="profil_avatar"> {postrow.displayed.RANK_IMAGE} {postrow.displayed.POSTER_RANK} {postrow.displayed.POSTER_AVATAR} <strong></strong> <div align="center"> <font size="5,5"> <span class="ombre"> </br>{postrow.displayed.POSTER_NAME} </span> </font></div> </br><div class="champsprofil"><!-- BEGIN profile_field --> <span class="profile-label"> {postrow.displayed.profile_field.LABEL}</span> {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> </div> </div> <br /> </div> </strong> <div class="postdetails poster-profile"> <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil"> En savoir plus </div> <div class="profil-cache" style="display: none"> {postrow.displayed.POSTER_RPG} </div> <br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </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>{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"> <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> </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> Voilà j'espère que j'ai été suffisamment claire. Merci d'avance pour l'aide que vous pourrez m'apporter |
Dernière édition par Hurricane le Mar 07 Jan 2014, 15:54, édité 1 fois | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Je vais répondre petit à petit pour régler les problèmes au fur et à mesure ^^ - Hurricane a écrit:
- Sur cette première capture le fond de titre de la première catégorie (et pas des autres) se met sur la gauche.
Pour le sélecteur .titres_cat, ajoute margin: auto;Quand on défini une taille à un bloc, puis qu'on met margin: auto, il va se centrer automatiquement en fonction de son parent
- Hurricane a écrit:
- Le texte en fait également à sa tête vu que j'ai beau mettre une couleur ou une taille ça ne prend pas...
Dans ton CSS, pour color tu as fait une petite faute, tu as mis un ";" au lieu d'un ":" color;#DCE0DF;Enfin bon, le problème ne vient pas de là. {catrow.tablehead.L_FORUM} génère le titre à l'intérieur d'une balise hé. Dans le CSS de ForumActif, il y a une couleur et une taille défini pour les balises h2. Pour styliser la couleur et la taille tu devras donc utiliser ce sélecteur : .titres_cat h2
- Hurricane a écrit:
- Sur cette deuxième capture on peut voir qu'il n'y a pas d'espace entre les différentes catégories, tout est collé.
Pour le sélecteur .fond_cat, rajoute un margin-bottom: 25px;Dis moi si déjà tout cela fonctionne | | |
| | | Hurricane
{ Membre }
Messages : 69
| Toutes tes indications m'ont permises de régler les problèmes concernés donc je te remercie Il me manque plus que les deux détails du profil. Niveau sous forums j'ai plus que le soucis du vide entre les deux cadres et du décalage, c'est réglable ou pas ou je dois passer par la création de sous forums ? | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| [quote="Hurricane"Niveau sous forums j'ai plus que le soucis du vide entre les deux cadres et du décalage, c'est réglable ou pas ou je dois passer par la création de sous forums ?[/quote] Alors en fait ce qu'il faut que tu fasses c'est quand dans ton HTML tu ai une div avec dedans tes sous forum. Tu lui donnes une class, et dans le CSS tu fais en sorte qu'elle ai toujours une taille, même si elle est vide. C'est exactement comme tu as fait pour les descriptions de forum. Juste que là tu ne mets pas de background, pas de border ^^. Comme ça s'il y a des sous forum, ils seront dans ce bloc, et s'il n'y a pas de sous forum, un espace transparent sera créé
- Hurricane a écrit:
- Premièrement j'aimerais savoir s'il est possible que les champs (et uniquement les champs c'est à dire que la partie Messages : doit être en gras et pas les chiffres) soient en gras ?
Oui tout à fait ^^. Tu peux très facilement trouver quel est le sélecteur à utiliser en utilisant l'inspecteur d'élément de ton navigateur. Ici le voici : - Code:
-
.profile-label .label { /* ton code CSS */ } - Citation :
- Deuxièmement j'aimerais savoir comment on fait pour séparer par un espace ou des symboles (comme ceux là ✤ ✤ ✤ ✤ ) les champs ? J'aimerais bien créer deux séparations, en gros l'âge et les messages seraient séparés des autres champs et les dates d'arrivées & d'anniversaires seraient séparées des champs du dessus.
Je suis pas sûre de bien avoir compris, mais à priori il faudrait faire ça avec du JS. | | |
| | | Hurricane
{ Membre }
Messages : 69
| Okay va falloir que je m'occupe de ce code là pour les sous forums j'vais essayer ça ^^ Pour les champs du profil ça marche bien merci J'ai fais deux schémas pour être sûr qu'on parle bien de la même chose en ce qui concerne la personnalisation du profil : - Spoiler:
En gros j'aimerais que ça rende comme l'un des deux
C'est compliqué à faire du JS ? | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Peux tu essayer d'ajouter ceci à ton CSS ? - Code:
-
.champsprofil > span:nth-of-type(3) { display: inline-block; margin-top: 15px; } | | |
| | | Hurricane
{ Membre }
Messages : 69
| J'ai ajouté et ça marche Je me suis occupé des sous forums et c'est impec aussi il y a bien un espace J'ai plus rien à régler/savoir maintenant, merci pour tout | | |
| | | Contenu sponsorisé
| | | | | Soucis de codage [résolu] | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|