Problème pour la disposition des sous-forums

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème pour la disposition des sous-forums

Message par L'Avatar Mer 24 Avr 2013 - 20:21

Bonjour à tous et à toutes ^^

J'ai un problème avec le codage de mon forum... Et j'espérais que peut-être vous pourriez me donner un coup de pouce pour régler ce problème : voici le lien de mon forum : http://snk-naruto.forumactif.org/

Et ce que j'aimerais faire, c'est placer les sous-forum (ceux qui sont précédés d'un petit Shuriken) à l'intérieur du cadre des forums "basiques" juste en dessous des Kanjis japonais et du cadre de stats de chaque forum. De plus je souhaiterais qu'ils soient disposés en deux colonnes. (je sais que je dois agrandir le cadre du forum "basique" mais même cela fait, quand j'enlève l'effet qui met les sous forums en onglet caché, ils se placent sous le cadre et non dedans...)

Voici mon css :

Code:
.cate_titre
{
  clear: both;
  height: 100px;
  margin-top: 50px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 90%;
height: 20px;
margin-left: auto;
margin-right : auto;
background-color: #DEB887;
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
text-align: center;
padding: 2px;
  border-bottom: 3px dotted #191817;
}
.catetitre
{
color: #454545;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}

.forum_bloc
{
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
}
.forum
{
float: left;
width: 460px;
height: 350px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
}
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: 2px;
    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
{
  position: relative;
  z-index: 1;
  width: 98%;
  height: 90%;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -8px;
  background-color: #FAEBD7;
  border-left: 2px dotted #DEB887;
  border-right: 2px dotted #DEB887;
  border-bottom: 2px dotted #DEB887;
  border-top: 5px solid #DEB887;
}
.description
{
  display: block;
  width: 400px;
  margin: auto;
  height: 100px;
  overflow: hidden;
  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: 391px;
  height: 91px;
  overflow: auto;
  background-color: #191817;
  font-size: 10px;
  color: #9c9c9c;
  text-align: jutsify;
  padding: 5px;
  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
{
  display: block;
  width: 160px;
  height: 80px;
  margin-left: 10px;
  background-color: #D2B48C;
  border: 1px solid #8B4513;
  padding: 5px;
  text-align: center;
  -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.stats
{
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dotted #8B4513;
  padding-bottom: 5px;
  font-size: 10px;
  color: #8B4513;
}
.lastpost
{
  display: block;
  font-size: 11px;
  color: #8B4513;
}

.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height: 0;
    background: #DEB887;
  color: #8B4513;
  overflow: hidden;
    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;
}
.ouverture_sousforum
{
  position: relative;
  z-index: 3;
  display: block;
  float: right;
  width: 120px;
  margin-right: 20px;
  background: #DEB887;
  color: #8B4513;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
  height: 50px;
  background: #DEB887;
  color: #8B4513;
  padding: 4px;
  overflow: auto;
    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: #8B4513 !important;
  text-shadow: 0px 0px 0px #000000;
}
.sous_forum a:hover
{
  color: #B8860B !important;
}

Et mon template Index_box :

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 -->

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

  <!-- END tablehead -->
  <!-- BEGIN cathead -->


  <!-- END cathead -->
  <!-- BEGIN forumrow -->
 

<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>
 
                <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>


  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->

<!-- END tablefoot --><!-- END catrow -->

J'imagine que ce doit être délicat comme problème à résoudre, merci d'avance à ceux qui pourront m'aider !


Dernière édition par L'Avatar le Sam 27 Avr 2013 - 11:32, édité 1 fois
avatar

L'Avatar
Nouveau membre

Messages : 7
Inscrit(e) le : 27/04/2011

http://avatarrpg@forumgratuit.fr
L'Avatar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour la disposition des sous-forums

Message par L'Avatar Ven 26 Avr 2013 - 12:31

Up ?
avatar

L'Avatar
Nouveau membre

Messages : 7
Inscrit(e) le : 27/04/2011

http://avatarrpg@forumgratuit.fr
L'Avatar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour la disposition des sous-forums

Message par Ayael Ven 26 Avr 2013 - 21:32

Bonjour, il faut que vous supprimiez cette partie de votre template :
Code:
<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>

et que vous ajoutiez celle-ci :

Code:
 <tr> <td colspan="2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</td></tr>

Juste après :
Code:
<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>

(Donc avant le "tables" faite attention^^)

J'ai testé sur mon forum test (du moins sans les images coulissantes vu que vous n'avez pas donner le code utilisés) mais normalement ça devrait marcher sans soucis !
Ayael

Ayael
*****

Féminin
Messages : 650
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour la disposition des sous-forums

Message par L'Avatar Ven 26 Avr 2013 - 21:47

Merci beaucoup, c'est ce que je voulais, à la différence près que j'aurais souhaité en plus, si possible, que les sous-forum sois disposés l'un au dessus de l'autre, comme une sorte de liste, et que cette liste, si trop longue, se répartisse en deux colonnes.

J'ignore si cela est possible et comment, mais si vous avez la solution je suis tout ouïe.

Merci pour l'aide déjà apportée,
Très cordialement Smile .
avatar

L'Avatar
Nouveau membre

Messages : 7
Inscrit(e) le : 27/04/2011

http://avatarrpg@forumgratuit.fr
L'Avatar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour la disposition des sous-forums

Message par Ayael Sam 27 Avr 2013 - 11:21

Avec ton code c'est impossible de les mettre en double colonne (car le seul moyen serait de l'ajouter manuellement dans la description du forum), or ils apparaitraient donc au mauvais endroit....
Ayael

Ayael
*****

Féminin
Messages : 650
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème pour la disposition des sous-forums

Message par L'Avatar Sam 27 Avr 2013 - 11:31

Arf =/ C'est bien dommage, mais bon, ce n'est pas grave, merci beaucoup pour le temps que vous m'avez accordé et pour votre patience, considérons ce sujet résolu dans ce cas !

À Bientôt ! ^^
avatar

L'Avatar
Nouveau membre

Messages : 7
Inscrit(e) le : 27/04/2011

http://avatarrpg@forumgratuit.fr
L'Avatar a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum