Sujets similaires

Bonjour, j'ai tenté de suivre un tuto trouvé sur Never Utopia.
Tout allait bien jusqu'à ce que je décide de le modifier pour lui donner l'aspect que je souhaite. En fait j'aimerais arriver à mettre les sous forums dans un cadre comme celui de la description des catégorie. Le problème, c'est que quand je tente de le faire, le cadre et vide et les catégories (devenues trop grandes) se superposent les unes les autres.

En gros j'ai ça:
https://2img.net/h/oi47.tinypic.com/2be4gi.jpg
Et j'aimerai avoir un truc dans ce genre:
https://2img.net/h/oi48.tinypic.com/29ejin7.jpg

Mon template:

Est-ce que quelqu'un aurait une solution? Problème catégories 3517359236

Coucou
j'ai pas bien compris ton problème.
Tu aimerais mettre les sous forums dans un cadre ? ou dans une image, car dans la capture que tu aimerais avoir on voit plus une images qu'un cadre.
Si tu veut qu'on t'aide a résoudre plus facilement ton problème, le meilleurs serait de montrer le CSS et le template concerner.

Cordialement,
Reira

J’aimerai en fait que mes sous forums soient dans un cadre un peu comme celui du profil de Css actif. Ma description de catégorie est dans le cadre du haut, l’image disparait quand on passe la souris dessus. Je voudrais le même style d'effet pour les sous forums en fait.

Voilà mon Css:

Merci d'avance Problème catégories 73120010

Coucou,
ha ok je comprend, en faite dès qu'on passe la souris sur l'image, les sous forum apparait dans un cadrant, c'est sa ?
j'ai pas encore utilisé ce genre de CSS, mais je vais voir ^^
tu aurait le template qui va avec ? si tu utilise ce codage pour les descriptions, alors cela est faisable pour les sous forums.

Cordialement,
Reira

C'est bien ça oui ^^

Voilà mon template, tel qu'il est maintenant. J'ai retiré le cadre, comme ça ne marchait pas et que ça m'a fait beuguer le forum XD

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<div class="cate_titre"><span class="catetitre_bloc"></span>
<span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>






<div class="forum_bloc">
<div class="forum">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
<div class="forum_contenu"><br />
{catrow.forumrow.FORUM_DESC}<br />

<div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
<td><div style="width: 50px;"></div></td>
<td><span class="stats_lastpost">
<span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
<span class="lastpost">{catrow.forumrow.LAST_POST}</span>
</span></td>
</tr></table>

</div>

<div class="sous_forum">
<span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<span class="ouverture_sousforum">Voir les sous-forum</span>
</div>

</div>
</div>

Merci pour ton aide en tout cas =)

Bonjour bonsoir.

Bon, ayant codé ce type de catégorie, je connais assez bien le petit monstre.
Donc, premièrement, pour avoir les sous-forums comme tu le veux il faudrait les intégrer dans la div class "forum"; comme tu l'as fait apparemment. Je te donne le codage donc du template qu'il te faudra mettre à présent:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<div class="cate_titre"><span class="catetitre_bloc"></span>
<span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>







<div class="forum_bloc">
<div class="forum">

<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>

<div class="forum_contenu">
{catrow.forumrow.FORUM_DESC}<br />

<div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
<td><span class="stats_lastpost">
<span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
<span class="lastpost">{catrow.forumrow.LAST_POST}</span>
</span></td>
</tr></table></div>
<div class="description">
<span style="display: block; width: 400px; height: 100px; background: url(http://www.1001stages.com/photos/rubrique/hd/ecriture-de-nouvelles-1122.jpg)center center no-repeat;">
<span class="description_contenu">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</span>
</div>
</div>

</div>
</div>

Pour l'explication, j'ai supprimé les class "Sous_forums" pour supprimer les effets de coulissement, de languette etc. Je l'ai déplacé dans la div "forum" mais je crois qu'il manquait quelques divs à la base en fait. Donc en clair je n'ai gardé que cette partie là du codage des sous-forums "{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}". Après, il suffisait simplement de reprendre ton codage des catégories et de l'appliquer.

Deuxièmement, maintenant, tu vas donc pouvoir personnaliser ta class "forum" afin d'obtenir ta bordure du bas normalement, comme un simple fond.
La seul bémol par contre, c'est qu'il est alors impossible de personnaliser l'image cachant les liens des sous-forums, elle restera tout le temps la même.

Voilà voilà. J'ai testé sur mon forum test et le code devrait théoriquement fonctionner à merveille. Sinon, excusez mes erreurs, il est quand même presque 5h du mat. ;;

Je te remercie beaucoup pour ton aide, ça fonctionne.
Par contre si je modifie le cadre des sous forums, je modifie aussi celui des descriptions. Il y aurait un moyen pour que les deux soient séparés?
J'ai modifié un peu le Css mais en faisant ça, l'effet rollovere disparait dans le cadre des sous forums T-T

Et bien, la solution est très simple, tu prends les codages css des descriptions, tu les copies colles. (Il faut en gros que tu es deux fois ton codages des descriptions.) Tu renommes les noms des class du copier/coller, tu changes aussi les noms dans le template pour la partie sous-forums uniquement et tu personnalises. (:

J'ai juste appliqué la class des descriptions aux catégories, donc de ce fait, le codage des sous-forums et des catégories est le même. Il suffit juste de différencier les class. (;

Merci beaucoup pour la réponse.
J'ai encore un petit soucis. J'aimerai mettre les sous forums à gauche des statistiques, sur la même ligne. Le truc c'est que je suis obligée de réduire la taille du cadre. Du coup je me retrouve avec un overflow sur l'image de base, qui ne devrait pas y être. J'ai tenté d'agrandir le cadre et tout, mais pas moyen, la barre de navig' reste en place T-T

https://2img.net/h/oi47.tinypic.com/35hnrqs.jpg

Oula...

Puis-je voir ton css et ton template? (:

Bien sûr, les voilà

CSS:

TEMPLATE:

Bon la solution est simple aussi. Tu n'as pas modifié la taille dans le template. Tu dois ajuster le width et le height de ce code "" avec exactement les même données que dans ton css, soit en gros

Code:: <span style="display: block; width: 100px; height: 60px; background: url(LIEN)center center no-repeat;">

Fais réellement attention à tes données dans ton css, beaucoup diffèrent. N'oublie pas de changer les données à la fois dans ton CSS ET dans le HTML du template. Pareil pour les descriptions. Pour cela je te conseille donc de mettre certaines données en class, comme ceci:

Code:: <span style="display: block; width: 100px; height: 60px; background: url(LIEN)center center no-repeat;">

Devient alors:

Code:: <span class="s_image" style="background: url(LIEN)center center no-repeat;">

Et tu devras donc mettre en plus dans ton css

Code:: .s_image{display: block;
width: 100px;
height: 60px; }

Il sera ainsi donc plus facile de changer toutes les données sans en oublier. J'en profite d'ailleurs pour faire une rapide correction de quelques détails qui pourraient te chiffonner, comme le décalage du background du text. Tu as dans ton css des padding qui déplacent en fait tes données, et ce pas comme tu le voudrais je suppose étant donné qu'après cela sort du cadre. Donc voici une petite correction apportée uniquement dans la partie MISE EN FORME DES CATEGORIES ET FORUMS. (Je suppose que "sous-forums a" ne te sert plus, donc il vaudrait mieux le supprimer. Mais je te l'ai laissé, sait-on jamais...)

Code:: /* MISE EN FORME DES CATEGORIES ET FORUMS */

.cate_titre
{
clear: both;
height: 100px;
margin-top: 50px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 150px;
height: 20px;
margin-left: auto;
margin-right : auto;
background-color: #a8a8a8;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-htm-transform: rotate(5deg);
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 750px;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
text-align: center;
padding: 2px;
border-bottom: 3px solid #191817;
}
.catetitre
{
color: #454545;
font-family: Felipa;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}

.forum_bloc
{
width: 650px;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
}
.forum
{
float: left;
width: 300px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
padding: 6px;
}
a.forumlink
{
position: relative;
z-index: 2;
display: block;
width: 100%;
color: #454545;
text-align: center;
font-family: arial;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
a.forumlink:hover
{
letter-spacing: 4px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.forum_contenu
{
z-index: 1;
width: 300px;
height: 105%;
padding: 4px;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
background-color: #d9d9d9;
border-left: 1px solid #191817;
border-right: 1px solid #191817;
border-bottom: 1px solid #191817;
border-top: 5px solid #191817;
-webkit-border-top-left-radius: 500px 50px;
-moz-border-radius-topleft: 500px 50px;
border-top-left-radius: 500px 50px;
-webkit-border-bottom-left-radius: 0px 0px;
-moz-border-radius-bottomleft: 0px 0px;
border-bottom-left-radius: 0px 0px;
-webkit-border-top-right-radius: 500px 50px;
-moz-border-radius-topright: 500px 50px;
border-top-right-radius: 500px 50px;
-webkit-border-bottom-right-radius: 0px 0px;
-moz-border-radius-bottomright: 0px 0px;
position: relative;
}
.description
{
display: block;
width: 300px;
margin: auto;
height: 100px;
overflow: auto;
border: 2px solid #9c9c9c;
box-shadow: 1px 1px 1px #191817;
-moz-box-shadow: 1px 1px 1px #191817;
-htm-box-shadow: 1px 1px 1px #191817;
-webkit-box-shadow: 1px 1px 1px #191817;
-o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
position: absolute;
display: block;
width: 300px;
height: 100px;
overflow: auto;
background-color: #191817;
font-size: 10px;
color: #9c9c9c;
text-align: jutsify;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.icone_stats
{
width: 300px;
margin: auto;
margin-top: -30px;
}
.stats_lastpost
{
-webkit-border-top-left-radius: 500px 50px;
-moz-border-radius-topleft: 500px 50px;
border-top-left-radius: 500px 50px;
-webkit-border-bottom-left-radius: 500px 50px;
-moz-border-radius-bottomleft: 100px 50px;
border-bottom-left-radius: 100px 50px;
-webkit-border-top-right-radius: 100px 50px;
-moz-border-radius-topright: 100px 50px;
border-top-right-radius: 100px 50px;
-webkit-border-bottom-right-radius: 100px 50px;
-moz-border-radius-bottomright: 100px 50px;
border-bottom-right-radius: 100px 50px;
display: block;
width: 150px;
margin-top: 10px;
height: 55px;
background-color: #2C0503;
border: 0px solid #B5B5B5;
text-align: center;
text-align:center; font-family:Arial; font-size:11px;
padding-bottom: 10px;
padding-top: 25px;
}
.stats
{
display: block;
margin-bottom: 5px;
border-bottom: 1px dotted #b5b5b5;
padding-bottom: 5px;
font-size: 10px;
color: #8f8f8f;
}
.lastpost
{
display: block;
font-size: 11px;
}

.sforum
{
display: block;
width: 100px;
margin: auto;
height: 60px;
overflow: auto;
border: 2px solid #9c9c9c;
box-shadow: 1px 1px 1px #191817;
-moz-box-shadow: 1px 1px 1px #191817;
-htm-box-shadow: 1px 1px 1px #191817;
-webkit-box-shadow: 1px 1px 1px #191817;
-o-box-shadow: 1px 1px 1px #191817;
}
.sforum_contenu
{
position: absolute;
display: block;
width: 100px;
height: 60px;
overflow: auto;
background-color: #191817;
font-size: 10px;
color: #9c9c9c;
text-align: jutsify;

opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sforum_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.sous_forum a
{
color: #b5b5b5 !important;
text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
color: #ffffff !important;
}

.s_image {display: block; width: 100px; height: 60px; }

Cela devrait fonctionner normalement à présent. (:

Ca fonctionne, merci.
Encore une dernière question, et après promit j'arrête *sbaff*
Mon icone de dernier message du coup, est mal placée. Je voudrais la mettre entre la description et le cadre des sous forum, à cheval sur le cadre de fond. J'ai utilisé l'astuce que j'ai actuellement sur mon forum, mais ça ne fonctionne pas.

J'ai rajouté ça dans mon Css:

(tout est à zéro parce que ça ne fonctionnait pas)

Mon template n'a pas changé:

En fait quand j'arrive à placer l'image là où je voudrais, un grand espace se créer entre les cadre, et je n'arrive pas à le faire diminuer, ni à déplacer mon icon Oo

Upounet

Bonjour OceanSoul ,

Petit rappel du règlement de CSSActif : "Remonter un sujet, le fameux «Up», est interdit sur CSSActif. L'équipe fait déjà le maximum pour répondre à votre demande le plus rapidement possible et la remontera elle-même en cas de besoin. Il est par conséquent inutile de signaler votre impatience."

Laisse aux codeurs le temps de te répondre (:
Merci de ta compréhension ! Problème catégories 926145

Bonjour,

Voilà déjà cinq jours que ce problème est sans réponse. Celui-ci est-il toujours d'actualité ? Si oui, merci de nous le dire, sans quoi ce sujet sera verrouillé dans quatre jours.

Merci d'avance. Problème catégories 510527

Toujours d'actu voui Problème catégories 577704309

Bon ben je poste pour voar ~
Edit: On pourrait voir le lien du forum où tu testes ? Smile

Bien sûr, le voilà:

Je n'ai pas bien compris ce que tu veux ~
Peux-tu réexpliquer ? Smile

Autrement, tu as deux balises en trop dans cette partie de ton template :

Merci pour la correction =)
En fait j'aimerais que mon icon de nouveaux messages, se trouve dans l'espace entre le cadre de la description et celui des sous-forum. Comme ceci:

Dans la partie "icone_stats" que tu as corrigée, trouve :

Code:: <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="caticon" />

Coupe-le (ctrl+x) et colle après :

Code:: <div class="forum_contenu"><br />
{catrow.forumrow.FORUM_DESC}<br />

Tu peux supprimer le BR après {catrow.forumrow.FORUM_DESC}, voire aussi celui qui est éventuellement dans les descriptions, après la DIV "description". C'est ce qui crée le vide que tu essayes de combler en utilisant un "margin-top" négatif sur "icone_stats". ^^

Assure-toi d'avoir publié le template. Là actuellement sur ton fo, si tu as corrigé, je ne le vois pas. Smile

(L'image new/no new/lock n'apparaît pas à cause de l'erreur.)

J'ai bien réussi à la placer où j'aimerais qu'il soit, maintenant le seul soucis c'est que les mes liens et mes stats descendent et sortent du cadre =S

Tu as apparemment des marges définies pour l'image :

Code:: img.caticon {
margin-bottom: 159px;
margin-left: -10px;
margin-top: 20px;
position: relative;
z-index: 1;
}

Je te conseille de les supprimer, ça retira d'une part le décalage, et puis tu pourras ensuite régler à nouveau en fonction de ce que tu veux.

Merci pour ton aide Problème catégories 73120010

j'ai juste un dernier soucis. Le titre de la catégorie du dessous, sur le fo test "corbeille", se superpose au cadre du bas de ma catégorie. J'ai rajouté des divs
pour l'éloigner, mais ça ne marche pas =S

Problème catégories

Problème catégories

Sujets similaires

Sujets similaires

Partenaires Or