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]Fond de QEEL invisible | |
| Leelewine
{ Membre }
Messages : 74
| Bonjour,
A l'aide du tuto de Miki, j'ai essayé de personnalisé mon QEEL. Je n'ai pas rencontré de difficulté à personnalisé le tuto comme c'est indiquer, hors l'image de fond n'apparait pas.
Dans mon CSS, j'ai bien mis le lien de l'image qui servira de fond (image temporaire car j'aimerais voir le rendu avec d'être sur de ne plus la modifier) mais lorsque je valide le CSS, elle n'apparait pas sur mon forum. Alors que mes groupes sont bien présent... je ne sais plus quoi modifier.
Quelqu'un peut-il m'aider ?
Voici le lien de mon forum : Ainsi que mon CSS (le code du QEEL est tout en bas = dernier code installé) :
Merci d'avance pour votre aide !
P.S pourPsycho : pour mon autre sujet, désolé j'ai zappé le [résolu] ça se reproduira pas, promis ! |
Dernière édition par Leelewine le Dim 21 Oct 2012, 09:05, édité 1 fois | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| Salut! Tout d'abord, ton template Index_Body serait bien utile pour voir si tu n'aurais pas une petite erreur dans le HTML (ce qui est généralement plus probable que dans le CSS...). En attendant, j'ai remarqué qu'il y a bien une erreur ici: - Code:
-
background-image: url("http://nsa31.casimages.com/img/2012/10/19/121019054935582413.png") no-repeat top center; On ne peut pas mettre comme valeurs ''NO-REPEAT" "TOP" et "CENTER" à la propriété BACKGROUND-IMAGE, puisque c'est pour indiquer le URL de l'image... Si tu veux tout mettre, soit la (non) répétition et la position de l'image, tu dois utiliser la méga-propriété BACKGROUND - Code:
-
background: url("http://nsa31.casimages.com/img/2012/10/19/121019054935582413.png") no-repeat top center; de cette façon Également, autour du lien, il est préférable de mettre des apostrophes (') plutôt que des guillemets (") (généralement ça fonctionne quand même mais bref.). Si les deux solutions ne fonctionnent pas, ça serait bien de nous donner ton template Merci! | | |
| | | Leelewine
{ Membre }
Messages : 74
| Tout d'abord, merci Fire-Fly de bien vouloir m'aider !
Alors j'ai modifier le code "background" comme tu l'as indiquer et ça ne change rien. C'est moi même qui avait mis "background-image" car je pensais que c'était ça l'erreur ^^ (au départ)
Pour le template, le voici :
A part copier/coller le code + rajouté des class pour les groupes, je n'ai rien touché. Enfin si, j'avais personnalisé le fofo bien avant d'installé la modification du QEEL et je n'avais pas de bug. Donc sauf les modif imposé dans le tuto de Miki, le reste était nickel.
Voici ci-dessous mon template "index_body" avant l'installation du QEEL personnalisé :
Je l'avais sauvegarder au cas où le bug ne peut être corriger, afin de pouvoir remettre mon QEEL de base.
Merci d'avance pour votre aide !! | | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| Salut salut! Donc je te redonne tes codes: Css (seulement qeel): - Code:
-
/* ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE Code proposé par Miki sur CSSActif Correction par CSSActif - http://www.css-actif.com ======================================================= DEBUT DU CODE ======================================================= */
/* Conteneur du QEEL */ .qeel { background: url("http://nsa31.casimages.com/img/2012/10/19/121019054935582413.png") no-repeat top center; height:300px; }
/* Conteneur principal */ .QeelMain { padding-left:5px; }
.ListeGroupes { text-align:center; }
/* Mise en forme des liens des groupes */ .ListeGroupes a { display:inline-block; background:#643647; /* couleur de fond */ border: 1px #CDA5B4 dashed; /* bordure : épaisseur couleur style */ padding:2px 5px; /* espacement 'intérieur' haut/bas et droite/gauche */ margin:4px 5px; /* espacement 'extérieur' haut/bas et droite/gauche */ font-size:15px; /* taille du texte */ font-weight: bold; /* épaisseur du texte */ text-decoration: none !important; /* pas de soulignement */ /* coins arrondis (tous navigateurs) */ border-radius:5px; -moz-border-radius : 5px; -webkit-border-radius:5px; }
/* Mise en forme des liens des groupes au survol */ .ListeGroupes a:hover { background:#643647; color:#990000; }
/* Pour chaque groupe, préciser la couleur */ a.groupe1 { color:#000000; } a.groupe2 { color:#77DB77; } a.groupe3 { color:#8168E3; } a.groupe4 { color:#70D6CD; } a.groupe5 { color:#EB8E2A; } a.groupe6 { color:#E7F253; } a.groupe7 { color:#F23AA2; } a.groupe8 { color:#F04343; } a.groupe9 { color:#FFFFFF; } a.groupe10 { color:#B8B4B4; }
/* Affichage des statistiques du forum (nombre de sujets, de messages, de membres) */ .LesStatistiques { text-align:center; margin:10px 0; /* marges haut/bas et droite/gauche */ height:30px; overflow:auto; }
/* Affichage des membres en ligne (nombres d'enregistrés/invisibles/invités et liste des membres en ligne) */ .MembresOnline { text-align:center; margin:10px 0; /* marges haut/bas et droite/gauche */ height:30px; overflow:auto; }
/* Affichage des membres connectés au cours des dernières XX heures */ .historique { text-align:center; margin:10px 0; /* marges haut/bas et droite/gauche */ height:30px; overflow:auto; }
/* Correctif liste 24h */ .DeBug td.row1 { background : none; }
/* ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE ======================================================= FIN DU CODE ======================================================= */ Et template Index_body entier: - Code:
-
{JAVASCRIPT} <!-- BEGIN message_admin_index --> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <!-- BEGIN message_admin_titre --> <tr> <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td> </tr> <!-- END message_admin_titre --> <!-- BEGIN message_admin_txt --> <tr> <td class="row1" rowspan="3" align="center" valign="middle"> <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div> </td> </tr> <!-- END message_admin_txt --> </table> <!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <!-- BEGIN switch_fb_connect_no --> <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> <!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect --> <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" align="right"> <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_header.switch_fb_connect.L_OR}</span> </td> <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td> </tr> </table> </td> </tr> </table> <!-- END switch_fb_connect --> </form> <!-- END switch_user_login_form_header -->
{CHATBOX_TOP} {BOARD_INDEX} <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" valign="top"> <!-- BEGIN switch_delete_cookies --> <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a> <!-- END switch_delete_cookies --> </span> </td> <!-- BEGIN switch_on_index --> <!-- BEGIN switch_delete_cookies --> <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a> <!-- END switch_delete_cookies --> <!-- END switch_on_index --> </span> </td> </tr> </table>
<!-- BEGIN switch_user_login_form_footer --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <!-- BEGIN switch_fb_connect_no --> <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> <!-- END switch_fb_connect_no -->
<!-- BEGIN switch_fb_connect --> <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'" v="2" 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> <!-- END switch_fb_connect --> </form> <!-- END switch_user_login_form_footer -->
<!-- ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE Code proposé par Miki sur CSSActif Correction par CSSActif - http://www.css-actif.com ======================================================= DEBUT DU CODE ======================================================= --> <div class="qeel"> <div class="QeelMain"> <div class="ListeGroupes"> <a href="http://ecole-st-gabriel.forums-actifs.com/g2-pnj" class="groupe1">PNJ</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g3-1ere-annee" class="groupe2">1ère année</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g4-2eme-anne" class="groupe3">2ème année</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g5-3eme-annee" class="groupe4">3ème année</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g6-4eme-annee" class="groupe5">4ème année</a> <img src="URL_IMG_SEPARATION" alt="" /><br> <a href="http://ecole-st-gabriel.forums-actifs.com/g9-5eme-annee" class="groupe6">5ème année</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g8-personnel" class="groupe7">Personnels</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g7-professeur" class="groupe8">Professeurs</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g11-simple-habitant" class="groupe9">Simple habitant</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://ecole-st-gabriel.forums-actifs.com/g10-ames-errantes" class="groupe10">Âmes érrantes</a> </div> <div class="LesStatistiques"> <span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}</span> <br /> <span class="gensmall">{NEWEST_USER}</span> </div> <div class="MembresOnline"> <span class="gensmall">{TOTAL_USERS_ONLINE}</span> <br /> <span class="gensmall">{LOGGED_IN_USER_LIST}</span> </div> </div> <div class="historique"><table class="DeBug" align="center">{L_CONNECTED_MEMBERS}</table></div> <img src="URL_IMG_BAS" alt="" /> </div> <!-- ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE (END) ======================================================= --> {CHATBOX_BOTTOM} <br clear="all" /> <!-- BEGIN switch_legend --> <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><span class="gensmall">{L_NO_NEW_POSTS}</span></td> <td> </td> <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td> <td><span class="gensmall">{L_FORUM_LOCKED}</span></td> </tr> </table> <!-- END switch_legend -->
{AUTO_DST}
<!-- BEGIN switch_fb_index_login --> <div id="fb-root"></div> <script type="text/javascript"> //<![CDATA[ FB.init({ appId: '{switch_fb_index_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true, oauth: true }); //]]> </script> <!-- END switch_fb_index_login -->
Donc, pour une raison obscure, la raison pour laquelle le qeel ne s'affichait pas est parce que la classe était avec une majuscule... donc, je l'ai mis en minuscule et TA DAA J'ai également arrangé tes connectés aux cours des 24h dernières heures au centre, j'ai ajouté l'alignement directement dans la balise de table qui corrigeait le bug du QEEL Si tu as d'autres questions, n'hésite pas! Ff | | |
| | | Leelewine
{ Membre }
Messages : 74
| Snifff... ça marche toujours pas chez moi. J'ai remplacer le CSS du QEEL et le template "index_body" mais le QEEL du forum reste invisible (le fond) Edit : je viens d'essayé de mettre un fond de QEEL de couleur unis, avec cadre pointillé... et ça ne change rien. Quoique j'essai de mettre comme fond du QEEL, ça ne change pas. Voici ce que j'ai essayé puis retiré vu que ça ne marche pas pour remettre le code de base avec mon image + la hauteur. - Code:
-
.qeel { background-color: #643647; height:300px; border: 1px #CDA5B4 dashed; /* bordure : épaisseur couleur style */ padding:2px 5px; /* espacement 'intérieur' haut/bas et droite/gauche */ margin:4px 5px; /* espacement 'extérieur' haut/bas et droite/gauche */ text-decoration: none !important; /* pas de soulignement */ /* coins arrondis (tous navigateurs) */ border-radius:5px; -moz-border-radius : 5px; -webkit-border-radius:5px; } Après je suis sous Firefox donc en principe je devrais voir le changement non? | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Salut, essaye en ajoutant ceci à ton css : - Code:
-
div.qeel { background: url("http://nsa31.casimages.com/img/2012/10/19/121019054935582413.png"); }
| | |
| | | Leelewine
{ Membre }
Messages : 74
| Ooooooooooh ça marche !!! C'est magnifique, je peux ainsi voir ce que donne mon fond et ajouté une bordure personnalisé. Merci " Fire-Fly et Hiro" pour votre aide, c'est super gentil et génial !! *heureuse* ------------- Et j'aurais une question concernant ma Chatbox latérale, dois-je ouvrir un second sujet pour ne parler "que" de la box ? J'éditerais le titre en "résolu" si la réponse est négatif. ^^ | | |
| | | Hiro
Ninja Codeur
Messages : 1179
| Oui c'est préférable | | |
| | | Leelewine
{ Membre }
Messages : 74
| Ok ça marche, donc je note résolu et j'ouvrirais un sujet pour la box dès que possible ! Merci encore pour votre aide, c'était génial ! Bisous | | |
| | | Psycho
Psychopathe
Messages : 3407
| Yop ! Je vois que le sujet est résolu, donc je classe (: Merci de l'avoir signalé | | |
| | | Contenu sponsorisé
| | | | | [résolu]Fond de QEEL invisible | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|