Ligne parasite et apparence du Queel

par Aubenaissante Mar 9 Aoû 2016 - 3:10

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://aubenaissante.forumactif.org/

Description du problème

Bonjour a Vous , je vais essayer d'etre bref et preçis

Mon forum : http://aubenaissante.forumactif.org/

Probleme 1
Ou ? : En bas de la page au dessus de "online"
Quoi?: Ligne parasite Orange
(Couleur attribuée a la couleur du cadre de cellule)

Probleme 2
Ou?: Apparence du Queel
Quoi? : J'aimerais une plus grande transparence des "Carrés blanc"

Merci d'avance pour votre aide !

par MlleAlys Mar 9 Aoû 2016 - 13:37

Bonjour,
Essayons d'être bref et précis Wink

:

Quoi ? La ligne orange : Un tableau vide mais qui a quand même une couleur de fond
Pourquoi ? Des tableaux vides laissés dans le template du qeel, ou des erreurs dans le template du qeel que le navigateur interprète comme des tableaux vides
Modifier ? Corriger le template. (mais sans le code je ne peux pas aider plus)

Quoi ? Opacité du fond des blocs du qeel
Pourquoi ? Les codes css associés dans votre feuille de style codent pour un fond semi-transparent :
Pour les gros blocs :

Code:: #qeel .carre_principal { background: rgba(255,255,255,0.6); border: 2px solid #000; display: inline-block; height: 295px; margin: 50px; padding: 20px; text-align: justify; transition: all ease .5s; vertical-align: middle; width: 280px; }

Pour les petits blocs :

Code:: #qeel #carre_groupes a { background: rgba(255,255,255,0.6); border: 2px solid #000; display: block; margin-bottom: 5px; padding: 5px; text-decoration: none!important; transition: all ease .5s; }

Ce sont les lignes background: rgba(255,255,255,0.6); qui codent pour le fond, ici une couleur en rgba(red,green,blue,alpha) : les trois premières valeurs (entre 0 et 255) codent pour la couleur (ici du blanc), et la quatrième (alpha) code pour la transparence, de 0 (complètement transparent) à 1 (complètement opaque).

Modifier ? Modifiez la valeur 0.6 en une valeur plus basse pour diminuer l'opacité de la couleur du fond. (par exemple, 0.3 ou 0.4 ...)

par Aubenaissante Mar 9 Aoû 2016 - 17:33

Salut merci pour le coup de main je te donne le code de mon index_body pour trouver le code de ma ligne parasite.

Code:: {JAVASCRIPT}  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">  <tr> <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td> </tr>   <tr> <td class="row1" rowspan="3" align="center" valign="middle"> <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div> </td> </tr>  </table>     <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'> <div class="cnxl-bloc"> <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">  <a class="cnxl-inscription" href="/register" title="S'inscrire !"> <img src="http://vignette3.wikia.nocookie.net/wow/images/5/54/Gul'dan_WoD.png/revision/latest?cb=20150508100143&path-prefix=fr" alt="Rejoindre le forum" /> </a>  <div class="cnxl-input-bloc"> <input type="text" name="username" placeholder="Pseudo" /> <input type="password" name="password" placeholder="Mot de passe" /> </div>  <div class="cnxl-submit-bloc"> <input type="submit" name="login" value="Connexion" /> </div>  <div> <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} /> <label for="autologin">Connexion automatique</label> </div> </form> <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a> </div>   {CHATBOX_TOP} {BOARD_INDEX} <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" valign="top">  <span class="gensmall"><a href="{U_MARK_READ}"  </td> <td width="50%" align="right"> <span class="gensmall">   <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}"   </span> </td> </tr> </table>  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td class="row1" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr> <tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> </tr> </table>   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td valign="top" width="100%" class="row1" align="center"> <table width="100%"> <tr> <td width="55%" valign="middle"> <table class="right"> <tr> <td><span class="genmed">{L_USERNAME}:</span> </td> <td><input class="post" type="text" size="10" name="username"/> </td> <td> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> <span class="gensmall">{L_AUTO_LOGIN}</span> </td> </tr> <tr> <td><span class="genmed">{L_PASSWORD}:</span> </td> <td><input class="post" type="password" size="10" name="password"/> </td> <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td> </tr> </table> </td> <td width="10%" align="center" valign="middle"> <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span> </td> <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td> </tr> </table> </td> </tr> </table>  </form>   <div id="qeel"> <div id="titre_principal">Online</div> <div class="carre_principal"> <span class="gensmall dernier_user">{NEWEST_USER}</span> <span class="gensmall users_now"> {TOTAL_USERS_ONLINE}. {RECORD_USERS} </span> <span class="gensmall users_now">{LOGGED_IN_USER_LIST}</span> <table id="users_before">{L_CONNECTED_MEMBERS}</table> </div> <div id="carre_groupes">{GROUP_LEGEND}</div> <div class="carre_principal"> <span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}</span> </div> </div>  {CHATBOX_BOTTOM} <br clear="all" />  <table border="0" cellspacing="3" cellpadding="0" align="center"> <tr> <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td> <td><span class="gensmall">{L_NEW_POSTS}</span></td> <td></td> <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td> <td>  </td> <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td> </tr> </table>  {AUTO_DST}  <div id="fb-root"></div> <script> FB.init({ appId : {switch_fb_index_login.FACEBOOK_APP_ID}, cookie : true, xfbml : true, oauth : true, version : 'v2.3' }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

par MlleAlys Mar 9 Aoû 2016 - 21:41

ah pardon petite erreur de ma part : le tableau n'est pas dans index_body mais très certainement plutôt dans index_box.

par Aubenaissante Mar 9 Aoû 2016 - 23:11

Et voici mon index_box !

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom">   <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom">   > </td> </tr> </table> <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> </tr>   <tr>  <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>  <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>   <tr> <div class="un_forum"> <div class="un_titre"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle"> {catrow.forumrow.FORUM_NAME} </a> </h{catrow.forumrow.LEVEL}> </div> <div class="image_messages"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div> <div class="description"> {catrow.forumrow.FORUM_DESC} <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> </div> <div class="dernier_message"> <span class="mess_et_sujets"> {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets </span> <span id="last" class="liens_mess">  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}"> {catrow.forumrow.LATEST_TOPIC_NAME} </a>  {catrow.forumrow.USER_LAST_POST} </span> <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script> </div> </div> </tr>     </table><img src="{SPACER}" alt="" height="5" width="1" />

par MlleAlys Mar 9 Aoû 2016 - 23:47

Vous avez mis le contenu des forums entre les balises <tr> du tableau de base, or le contenu du tableau doit se trouver dans les cellules, donc entre balises <td>. Puisqu'ici ce n'est pas le cas, le tableau est affiché vide, puis le contenu.

J'ai supprimé le tableau et remplacé par un bloc, remplacez votre template par le suivant :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom">   <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom">   > </td> </tr> </table> <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>   <div class="une_categorie"> <div classe="cate_titre">{catrow.tablehead.L_FORUM}</div>   <div class="cate_titre"> <a title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </div>   <div class="un_forum"> <div class="un_titre"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle"> {catrow.forumrow.FORUM_NAME} </a> </h{catrow.forumrow.LEVEL}> </div> <div class="image_messages"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div> <div class="description"> {catrow.forumrow.FORUM_DESC} <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> </div> <div class="dernier_message"> <span class="mess_et_sujets"> {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets </span> <span id="last" class="liens_mess">  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}"> {catrow.forumrow.LATEST_TOPIC_NAME} </a>  {catrow.forumrow.USER_LAST_POST} </span> <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script> </div> </div>     </div>