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! |
| Image de fond derrière les catégories | |
| Invité Invité
| Bonjour, Je viens demander votre aide car j'aimerais mettre une image ou une couleur derrière les catégories... Pouvez-vous m'aider? Je m'explique, j'aimerais mettre une couleur ou une image à l'intérieur du cadre violet sur l'image !! Merci beaucoup! Je vous serais reconnaîssante jusqu'à la fin de ma vie!! The magic knights | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Ah encore toi Peut tu me donner ton template (tu y as peut être touché depuis la dernière fois) et ton css s'il te plait ? Je vais essayer de bien nettoyer (là j'ai plus de temps) et de te régler cela. Le cadre violet est déjà sur ton forum ou bien c'est juste pour illustrer là ? | | |
| | | Invité Invité
| Oui, c'est encore moi !! Le cadre violet est là juste pour expliquer ce que je voulais faire !! Ensuite, j'ai essayé de toucher à mon template mais j'ai finis par laisser tomber!! mon template: - Code:
-
<table width="100%" border="0" background="" 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 --> </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 --> <center> <table width="800" class="fondderriereforum " border="0" bordercolor="#304E7A" cellspacing="1" cellpadding="0"> <tr> <center><div class="titrecat"><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle" style="z-index: 99; position: relative;"><div class="secondarytitle" style="margin-top: -14px;"> {catrow.tablehead.L_FORUM}</div> </th> <th nowrap="nowrap" width="400"> </th> </div></center></tr> <!-- END tablehead --> <!-- BEGIN cathead --> <tr> <!-- BEGIN inc --> <td class="{catrow.cathead.inc.INC_CLASS}" width="500"><img src="{SPACER}" height="0" width="500" /></td> <!-- END inc --> <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="500" height="800"> <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}" align="center"></td> </tr></div> <!-- END cathead --> <!-- BEGIN forumrow --> <div class="fondderriereforum"> <center> <div class="boxforum" class="imagecat"> <br><br> <div class="bordureforum"> <table class="fondforum" border="0" width="400" height="300"> <tr> <!-- BEGIN inc --> <th class="{catrow.forumrow.inc.INC_CLASS}" width="300"><img src="{SPACER}" height="300" width="300" alt="." /></th> <!-- END inc --> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" align="center" valign="top"> <h{catrow.forumrow.LEVEL} class="hierarchy"> <span class="forumlink"><a class="forumlink" width="300" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </span> </h{catrow.forumrow.LEVEL}> <table><tr><td> <a class="{catrow.forumrow.INC_CLASS}" width="300" align="center" valign="middle"> <img width="49" height="65" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </a></td><td><span class="gensmall">{catrow.forumrow.LAST_POST}</span></td></tr></table> <span class="genmed" width="300" height="50"> {catrow.forumrow.FORUM_DESC} </span> <span class="gensmall" width="300" height="150"> <!-- 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></tr></table></div></center> </div></div> <!-- END forumrow --> <table> <!-- 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 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td> </tr> <!-- END catfoot --> </table> </div> <!-- BEGIN tablefoot --> <center><img src="{SPACER}" style="clear:both" alt="" height="3" width="1" /></center><!-- END tablefoot --><!-- END catrow --> Ma feuille de style: - Code:
-
#wrap{ border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
body a.info:hover { background: none; background-repeat:no-repeat; cursor: url("http://www.patmax.info/curseurs/baguette1.cur"); }
a:hover { cursor: url("http://www.patmax#info/curseurs/cimeterre.cur"); }
a, a:link { text-shadow: 0px 0px 0px; }
a.forumlink:link, a.forumlink:visited { font-family: 'Metamorphous', cursive; font-weight:bolder; text-align: center; font-size: 16; color: #5A3A22; -webkit-border-radius: 20px;}
body a.info:hover { background: none; background-repeat:no-repeat; cursor: url("http://www.patmax.info/curseurs/baguette1.cur");}
a:hover {cursor: url("http://www.patmax#info/curseurs/cimeterre.cur");}
a,a:link {text-shadow: 0px 0px 0px; }
a.forumlink:link, a.forumlink:visited {font-family: 'Metamorphous', cursive;font-weight:bolder;text-align: center;font-size: 16;color: #5A3A22;border-bottom : 4px solid #5A3A22; letter-spacing: 1px; border-bottom : 4px solid #5A3A22; letter-spacing: 1px; display: block; }
.secondarytitle h2{ font-family: 'Lobster Two', cursive; font-weight:bolder; text-align: center; font-size: 30; color: #9db7f0; font-height: 20px; } .module-title { color: #5A3A22 ; border-radius:50px; -moz-border-radius:30px; -webkit-border-radius:30px; } .cattitle { color: #5A3A22; font-size: 20px; font-height: 30px; font-weight: 600; letter-spacing: 1px; border-radius:50px; -moz-border-radius:30px; -webkit-border-radius:30px; } .catBottom a.nav{ color: #5A3A22; font-height: 30px; border-radius:50px; -moz-border-radius:30px; -webkit-border-radius:30px; } .optionsitems_show .forumline .thHead #gen{ color: #b2c6f0 !important; } body.chatbox { background-color: none; background-image: none; width: 1030px; height: 290px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border: 2px solid black; }
#chatbox-title{ font: 40px Arial; color: none; } #chatbox_header, #chatbox{ background-color: transparent; } #chatbox_online .cattitle{ background-color: none; } #chatbox_members{ background-color: none; } #chatbox_header .cattitle{ color: #5A3A22; background-color: transparent; }
#chatbox_bottom{ background-color: none; width:800px; align:left; } #chatbox_header .cattitle strong { display: none; } #chatbox_header .cattitle:before { content: " Le paradis des piplettes "; }
.Personnalisation { font-family: 'Lobster Two', cursive; text-align: center; font-size: 17; color: #9db7f0; } .mon_onglet{ display: block; padding: 5px; margin: 4px; color: #000; background: #ffffff; border: 1px solid #ff0000; } .mon_onglet:hover{ background: #b8efa1; } .mon_onglet_selected{ display: block; padding: 5px; margin: 4px; color: #000; background: #ffffff; border: 1px solid #ff0000; } .clear{ clear: both; } .mon_contenu{ color: #000; background: #ffffff; border: 1px solid #ff0000; padding: 10px; margin: 10 px; height: 120px;} #mes_contenus, #mes_onglets{ height: 100%; width:100%;}
p { text-indent : 30px; }
.forumline {padding:20px; background:none; align: center; position: relative; border:2px solid transparent; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; }
.titrecat { background-image: none; /* image que vous vouliez */ background-repeat: no-repeat; background-color: none; height:50px; width: 700px; align: center; position: relative; z-index: 1; /* pour que l'image apparaisse derrière le titre de la catégorie */ margin-bottom: 10px; border-radius: 25px; -moz-border-radius:25px; -webkit-border-radius:25px;/*bout arrondis */}
.listeconnecte td { background-color:transparent; background-image:none;}
.boxforum { width: 400px; float:left; background-color: none; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; padding: 0 1em; }
.bordureforum { border:2px solid #5A3A22; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; }
.fondderriereforum { background-image: none; background-color: #5A3A22; width:900px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; }
.fondforum { background-color: #9db7f0; width:395px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; }
.imagecat { background-image: none; background-color: #5A3A22; width:900px; height:700px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; }
.blocProfil { padding:2px; /* une marge entre la bordure et l'intérieur du bloc */ margin:2px; /* une marge entre la bordure et l'extérieur du bloc */ border:2px solid #5A3A22; /* la bordure */ background:#9db7f0; /*une couleur de fond */ border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; align:center; text-align:center; width:250px; background-image: none; }
.name { font-size: 25px; font-family: 'Aladin', cursive; letter-spacing: 1px; padding-top:10px; }
.postdetails { background-color: none; font-family: 'metamorphous'; letter-spacing: 1px; }
.sujet{ background-color: #9db7f0; font-family: 'metamorphous'; letter-spacing: 1px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; border:2px solid #5A3A22; /* la bordure */ padding-left: 10px; padding-right:10px; padding-bottom: 10px; padding-top:10px; }
.thLeft { font-family: 'metamorphous'; letter-spacing: 1px; font-size: 15px; color:#5A3A22; }
.thRight { font-family: 'metamorphous'; letter-spacing: 1px; font-size: 20px; }
.t-title{ font-family: 'metamorphous'; letter-spacing: 1px; font-size: 20px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; margin-bottom: 20px; border:2px solid #5A3A22; /* la bordure */ }
.catHead{ width:800px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; margin-bottom:15px; border: transparent; }
.catBottom{ width:800px; border-radius:25px; -moz-border-radius:30px; -webkit-border-radius:30px; margin-bottom:15px; border: transparent; margin-top: -30px; margin-left: -60px; }
.rang { font-size: 18px; font-family: 'Aladin'; letter-spacing: 1px; font-size: 15px;} font-family: 'Aladin', cursive; letter-spacing: 1px; width: 150px; height: 45px; margin-top:10px; padding-left:70px; }
.postdetails { font-family: 'Aladin'; letter-spacing: 1px; font-size: 15px; } Merci encore pour toute ton aide et ta patience!! The magic knights | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Un petit message pour te prévenir que je ne t'oublie pas, c'est normal si je réponds parfois à des demandes d'aides plus récentes que la tienne, c'est car elles sont plus faciles pour répondre rapidement ^^.
Une dernière petite question, dans Panneau d'Admin > Affichage > Page d'accueil > Structure & hiérarchie, peut tu me dire ce que tu as coché ? | | |
| | | Invité Invité
| Merci ! Pas de soucis! Je comprend très bien et je te remercie déjà de te pencher sur mon problème!
J'ai coché Séparer les catégories sur l'index et moyen !!
| | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Ton template va vraiment être un peu "embêtant" à manipuler, étant donné que comme je te l'avais dit il y avait pas mal de petites erreurs dedans. Ce que je te propose ? Repartir d'une base saine (un template vierge), pour bien afficher correctement sans bug ton forum en colonnes. Une fois que c'est fait, tu personnalises pour que cela ressemble à ce que tu voudrais. Car sinon, c'est comme essayer d'arranger quelque chose sur une maison sur des fondations faibles, à un moment ça va péter sans qu'on comprenne pourquoi xD. C'est certes un peu long, mais je pense que c'est le mieux.
Là, je suis désolée, j'ai pas le temps (et l'énergie xD) pour reprendre tout ce template depuis 0 bénévolement, désolée >o<. | | |
| | | Invité Invité
| OK ben merci d'avoir essayé !! | | |
| | | Invité Invité
| Désolée du double post mais si je te met mon template de base: Est-ce que tu pourrais réaliser ce que je voulais faire? Je ne suis pas pressée mais si je refais toute seule, j'ai peur de refaire la même chose !! Merci d'avance ! - 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 --><table class="forumline" width="100%" 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" width="50">{L_TOPICS}</th> <th nowrap="nowrap" width="50">{L_POSTS}</th> <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th> </tr> <!-- 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="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> <!-- 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="100%" 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="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" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.TOPICS}</span> </td> <td class="row2" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.POSTS}</span> </td> <td class="row3 over" align="center" valign="middle" height="50"> <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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> | | |
| | | Contenu sponsorisé
| | | | | Image de fond derrière les catégories | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|