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! |
| Miss Sherlock
{ Membre }
Messages : 51
| Bonjour / bonsoir tout le monde !! Alors voilà, je fais appel à vous car je me retrouve dans une impasse. Il s'agit de coder l'apparence des catégories d'un forum (je vous rassure, il ne s'agit pas de TOUT coder mais de me sauver la vie). Je suis récemment tombée sur ce forum : http://art-design.xooit.com/index.php et (je vais vous la faire courte) je suis tombée raide dingue amoureuse des grands cadres autour des catégories. Après avoir cherché un nombre de tutos incalculable, après avoir bidouillé mon template/CSS je suis bien obligée de m'avouer vaincue... Pouvez-vous m'aider ? juste m'expliquer la démarche à suivre, je serais capable de l'appliquer (sinon je reviendrai vous supplier à genoux). Je vous donne mon template déjà modifié et le CSS correspondant : temple index_box : - Spoiler:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}"> <span class="cat1"> <font color="#9e775c">{L_SEARCH_NEW}</font> </span> </a><br/> <!-- END switch_user_logged_in --> </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> {catrow.cathead.INC_SPAN}{catrow.cathead.INC_SPAN} </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 --> <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}> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr> <!-- BEGIN inc --> <!-- END inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="70"> <img src="{SPACER}" height="0" width="70"/> </td> <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="middle" width="350" 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}> <div class="genmed categorie_gauche"> {catrow.forumrow.FORUM_DESC} </div> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </td> <td class="{catrow.catfoot.inc.INC_CLASS}" width="30"> <img src="{SPACER}" height="0" width="30"/> </td> <!-- BEGIN forum_link_no --> <td clss="row3 over"> <div class="gensmall categorie_droite"> Messages : {catrow.forumrow.POSTS} | Sujets : {catrow.forumrow.TOPICS} <br></br> <img class="imagescat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/> <br/> {catrow.forumrow.LAST_POST} </div> </td> <td class="{catrow.catfoot.inc.INC_CLASS}" width="30"> <img src="{SPACER}" height="0" width="30"/> </td> <!-- END forum_link_no --> </tr> <!-- END forumrow -->
<!-- BEGIN catfoot --> <tr> <!-- BEGIN inc --> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /> <!-- END tablefoot --> <!-- END catrow --> </table>
CSS : - Spoiler:
[code].cat1 { /*nom des lunes des descriptions des catégories*/ text-decoration: none; letter-spacing: 3px; font-family: times new roman; color: #575c64; /* Couleur du titre */ font-style: normal; text-shadow: 1px 1px 0px #000; /*Ombre du texte */ text-transform: uppercase; }
.cat2 { /*apparence des liens "de base" du forum*/ text-decoration: none; letter-spacing: 3px; font-family: times new roman; color: #575c64; /* Couleur du titre */ font-style: normal; font-size:10px; text-shadow: 1px 1px 0px #000; /*Ombre du texte */ text-transform: uppercase; }
.categorie_droite { /*apparence du cadre des catégories de droite*/ background-color: #212020; text-align: center; width: 200px; padding-top: 10px; padding-right: 6px; padding-bottom: 10px; padding-left: 6px; border-top-width: 1px; border-bottom-width: 3px; border-top-style: solid; border-bottom-style: double; border-top-color: #61605e; border-bottom-color: #61605e; }
.categorie_gauche { /*apparence du cadre des catégories de gauche*/ background-color: #212020; width: 350px; height: 120px; padding-top: 10px; padding-bottom: 5px; padding-left: -30px; padding-right: 7px; text-align: justify; margin-bottom: 30px; border-top-width: 1px; border-bottom-width: 3px; border-top-style: solid; border-bottom-style: double; border-top-color: #61605e; border-bottom-color: #61605e; }
.desc { /*apparence des liens dans les descriptions des catégories*/ font-size: 10px; text-decoration: none; letter-spacing: 0px; font-family: times new roman; color: #575c64 !important; /* Couleur du titre */ font-style: normal; text-shadow: 1px 1px 0px #000; /*Ombre du texte */ text-transform: uppercase; }
.fond_0{ background-image:url('https://i.imgur.com/wokDS.png'); }
.fond_1{ background-image:url('https://i.imgur.com/NX095.png'); }
.fond_2{ background-image:url('https://i.imgur.com/JOzfP.png'); }
.imagescat { /*apparence des images de catégories*/ border:1px solid #61605e; filter:alpha(opacity=90); -moz-opacity:1; opacity: 1; }
.imagescat:hover { /*images de catégories au survol de la souris*/ border: 1px solid #61605e; filter:alpha(opacity=90); -moz-opacity:1; opacity: 1; }
a.forumlink { /*apparence des noms des catégories*/ text-decoration: none; text-transform: uppercase; letter-spacing: 0px; font-family: Georgia; font-style: none; line-height: 12px; font-size: 18px; text-shadow: 1px 1px 0px #000; color: #d3d2cc !important; filter:alpha(opacity=90); -moz-opacity:0.9; opacity: 0.9; }
a.forumlink { /*noms des catégories*/ /* Positionne le titre "à cheval" sur la bordure */ position: relative; top: 5px; padding-left: 30px; }
a:link { text-decoration: none; text-style: none; } a { text-decoration: none; text-style: none; } a.gen,a.genmed,a.gensmall { text-decoration: none; text-style: none; } a.gen:hover,a.genmed:hover,a.gensmall:hover{ text-decoration: none !important; text-style: none; } a:hover { text-decoration: none !important; }]/code]
Si quelqu'un est capable de m'aider je vous JURE de lui dédier un culte + un temple <33 PS. j'en profite également pour vous demander quel est le meilleur code pour changer l'apparence des titres des catégories ? | | |
| | | Mzelle Machin
{ Spécialiste }
Messages : 3809
| Bonsoir Est-ce que ce tuto pourrait t'aider? --> http://www.css-actif.com/t2246-encadrer-chacun-de-vos-forums-de-facon-originale Sinon dans ce sujet, il me semble que ton problème est abordé : http://www.css-actif.com/t12496-resolu-image-de-fond-des-categories J'espère que c'est déjà un bon début ^^ | | |
| | | Miss Sherlock
{ Membre }
Messages : 51
| Bonsoir, merci de m'avoir répondu *-*
j'ai effectivement suivit avec attention ces deux sujets, le deuxième ayant le mérite d'être clair, sauf que je suis pas douée et j'ai pas réussi >.< pourtant j'ai tout bien suivi comme il fallait... | | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| Salut! Bon, première chose, c'est certain qu'on ne peut pas le coder pour toi. Ce qui m'échappe un peu, c'est la question du pourquoi tes essais ne fonctionnent pas. Tu dois savoir que les tutoriels sur CSS-actif sont tous passés au peigne fin, nombre d'entre-eux étant déjà testés, mis-à-jour et approuvés par des codeurs. D'ailleurs, je peux t'assurer qu'il y a TOUT ce dont tu as besoins pour que tu puisses personnaliser tes catégories à ta guise sur CSS-actif. La structure sur le forum que tu as donné en lien n'est pas si sorcière: Ils ont inséré des images à la place des titres des catégories. Celle du bas serait, dans le cas de forumactif, mise directement dans le bas du tableau dans le template. Tient, ils expliquent comment faire ici Sinon, j'aimerais beaucoup savoir c'est quoi ça: - Code:
-
[ code ].cat1 (première ligne du CSS) Corrigez-moi, codeurs, si je me trompe, mais du bbcode dans du CSS Aoutch. Ça n'existe pas. Tu cherches à faire quoi exactement? Pour le template - Code:
-
<font color="#9e775c"> ... double-aoutch. On utilise pas la balise font de préférence, qui est vouée à disparaitre, et en HTML, on ne peut pas faire: - Code:
-
color="#9e775c" On écrit: - Code:
-
style="color: #XXXXXX;" Il manque un A à classe ici : - Code:
-
<td clss="row3 over"> Pour l'instant c'est ça, il se peut que j'ai loupé des erreurs je ne l'ai pas passé au peigne fin encore. Alors, pour mieux pouvoir t'aider, le lien vers ton forum pourrait être chouette, ainsi que les tutos que tu as suivis qui n'ont pas fonctionné (tes codes). Bonne soirée! | | |
| | | Miss Sherlock
{ Membre }
Messages : 51
| Bonjour (désolée pour le délai de réponse >.<) Pour la première ligne du CSS, il n'y a pas de BBcode, c'est juste que je voulais que ça apparaisse en code sans savoir que ce n'était pas nécessaire d'ajouter la balise code dans mon spoiler. La balise font, contrairement à ce que tu peux croire, marche très bien, mais si tu me dis qu'elle est vouée à disparaître je vais la changer immédiatement alors. Effectivement, je n'avais pas vu qu'il manquait un "a" (moment d'égarement de ma part sans doute), je vais le rectifier Pour les tutoriels que j'ai suivis vous les avez tous cités : http://www.css-actif.com/t12496-resolu-image-de-fond-des-categories http://www.css-actif.com/t2246-encadrer-chacun-de-vos-forums-de-facon-originale (ce qui n'est pas tellement ce dont j'ai besoin, même si je l'ai essayé) http://www.css-actif.com/t5089-inserer-une-image-du-texte-au-dessus-en-dessous-des-categories (il marche mais je me retrouve avec une double image au dessus de la toute première catégorie et il ne résout pas tout à fait mon problème : https://i.imgur.com/Dk5PP.png) Le lien de mon forum (qui est un forum d'essai) : http://desessais.1fr1.net/ J'arrive à voir comment il faut que je procède mais, sans que je comprenne pourquoi, les images ne s'affichent pas... | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour ! Je ne fais que passer, mais j'avais besoin d'étaler ma science entre deux rapports U^U - Citation :
- La balise font, contrairement à ce que tu peux croire, marche très bien, mais si tu me dis qu'elle est vouée à disparaître je vais la changer immédiatement alors.
Ce n'est ici pas une "croyance", mais un respect des normes du HTML. Il existe dans tout langage des règles de grammaire et de syntaxe à suivre, et parfois certaines règles sont abandonnées au profit d'autres plus performantes. Si, en langage humain, ça ne pose pas trop de problèmes de parler de façon vieillotte, en langage informatique cela peut poser problème car rien n'oblige les navigateurs et logiciels de lecture d'écran à s'adapter à un code qui n'est plus aux normes. C'est d'autant plus important aujourd'hui avec tous ces gadgets portables comme les smartphones et les tablettes. Les possesseurs de gadgets auront sans doute déjà croisé des sites dont l'affichage était catastrophique et la réaction au contact proche du néant x) En l’occurrence, en vertu du principe de séparation du fond de la forme, il est impératif aujourd'hui de séparer l'apparence de la structure (et donc séparer le CSS du HTML), ce qui fait que les balises de mise en forme telles que center (et associées), font , b , i , u et autres sont désormais obsolètes. Il est évidemment toujours possible d'obtenir ces mêmes effets, mais on doit impérativement passer par le CSS et par les balises neutres comme span et div , ou par des balises sémantiques (comme strong et em qui sont destinées à mettre en valeur du texte et par défaut ont le même fonctionnement que les balises b et i). Pour ce qui est de ton problème, je ne vois aucun code sur ton forum de test qui puisse avoir l'effet que tu souhaites, ce qui doit expliquer pourquoi rien n'apparait '_' | | |
| | | Melone
{ Modérateur }
Messages : 805
| Bonjour ! As-tu vu la réponse de 'Christa'? Ton problème est-il toujours d'actualité ? Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu et se verra archivé ! Merci de ta compréhension , Bonne journée | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello ! N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu ! Merci de ta compréhension | | |
| | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|