Déplacer titre principal dans cadre

[Mila Roza]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://jesuisuneprincesse.forumactif.org

Description du problème

Bonsoir,
Alors voilà, est-ce que ce serait possible de mettre le titre principal (donc ici c'est "la palais des reines" ou "corbeille") dans le cadre violet, pour que tout soit encadré en fait ?
Voilà 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
            <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;<!--{catrow.tablehead.L_FORUM}-->&nbsp;</th>
            <th nowrap="nowrap" width="150">
              <div style="width:200px;"><!--{L_LASTPOST}--></div></th>
            <div class="secondarytitle" width="100%">&nbsp;<center>{catrow.tablehead.L_FORUM}</center>&nbsp;</div>
          </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">&nbsp;</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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
                <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="BlocForum">
                          <div class="genmed DescForum">
                            <div>{catrow.forumrow.FORUM_DESC}</div>
                      </div>
                          <div class="gensmall ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                  </div>
                      <span class="gensmall">
                          <!-- BEGIN switch_moderators_links -->
                          {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                          <!-- END switch_moderators_links -->
                  </span>
            </td>
        <!--============ R-max ================ on replace la ligne nouveau message avec une div -->
            <!----><td><div id="cadre_haut" 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}" />
              </div><!----><!--======= R-max ========= ont transforme le td en div -->
              <div id="cadre_bas" class="row3 over" align="center" valign="middle">
                        <div class="gensmall sujets_messages">{catrow.forumrow.POSTS} mots ❦ {catrow.forumrow.TOPICS} parchemins</div>
                    <!-- BEGIN avatar -->
                    <div style="width: 200px;"></div>
                    <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                    <!-- END avatar -->
                     
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div></td><!----><!--============ fin R-max =============--><!---->
         
          </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 -->

Et mon CSS :

Code:

*HEADER FOND*

body {
background-repeat: no-repeat;
background-attachment: scroll;
}

body { background-position: center top
background-repeat: no-repeat; }

*ENLEVER SOULIGN LIENS*

a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none !important;}
a:visited {text-decoration: none !important;}

/*ALIGNEMENT TEXTE*/
.postbody {
    padding-left: 15px;
    padding-right: 25px;
    text-align:justify;
}

/*PSEUDOS PROFIL*/
.pseudo {
  padding-top : 5px
  font-family: AR ESSENCE
  font-size : 18px
  text-align : center
  letter-spacing: 2px;
  text-shadow: #501646 1px 1px 5px;
  padding-bottom : 5px
}

/*INFOS PROFIL*/

.statsprof { /* Les informations du profil */
    padding-top: 5px;
  font-family: Georgia
  font-size : 20px
  text-align : left
  letter-spacing: 2px;
    background-image: url(http://img11.hostingpics.net/pics/111131FONDCATE.png) ;
    width: 200px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align:left;
    padding-right: 8px;
    padding-left: 8px;
    border: solid 2px #3E7963;
      repeat: none;
      align: center;
      margin-left: 5px;
      padding: 5px;
      padding-bottom: 5px;
}

.rang{-webkit-border-bottom-right-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-bottomleft: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    margin: 5px;
      width: 150px;
      align: center;
    background-color: #E6E4E2;
      margin-left: 10px;
      padding-top: 10px;
      margin-top: -7px;
}

#profil_head /* L'encadrement général de ton profil et avatar */
    {padding-top: 5px;
    background-color: #696969;
    width: 235px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align:justify;
    padding-right: 8px;
    padding-left: 8px;
   
}
   
.postdetails.poster-profile a img { /* L'avatar et son encadrement */
      -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    border: 5px solid #4b4747;
}

.cadreavatar {
    filter:alpha(opacity=50);
    -moz-opacity:0.7;
    opacity: 0.7;
}
.cadreavatar:hover {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity: 1;
}
.icon_online {
    position:absolute;
    margin-left:147px;
    margin-top:-5px;
    z-index:999;
}

/*ICONES PROFIL*/

.icones_profil {
  text-align:center;
}

        /*QEEL*/
       
        #QEEL {
          background: #E6E4E2;
          margin: auto;
          text-align: justify;
          width: 800px; /* Modifier la valeur pour changer la taille */
          padding: 5px;
          background-color: #E6E4E2;
            -webkit-border-radius:10px;
            -moz-border-radius: 10px ;
            border-radius:10px;
            border: 3px #E6E4E2 solid;
          }
       
        .groupes {
          margin: auto;
          text-align: center;
          padding: 2px;
        }
       
        .groupes a {
          /* Marges pour écarter les liens les uns des autres */
          margin-left: 20px;
          margin-right: 20px;
          /* Styles du lien */
          text-transform: uppercase;
          font-family : AR ESSENCE;
          font-size: 20 px;
          font-weight: bolder;
        }
       
        .IMG_Raiponce {
       
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
       
        }
        .IMG_Raiponce:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
       
       
        .IMG_Belle {
       
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
       
        }
        .IMG_Belle:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
       
       
        .IMG_Ptit {
       
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
        }
        .IMG_Ptit:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
       
       
        .IMG_Cendrillon {
       
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
        }
        .IMG_Cendrillon:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
       
       
        .IMG_Alice {
       
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
        }
        .IMG_Alice:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
       
       
        .IMG_Aladin {
          filter:alpha(opacity=50);
            -moz-opacity:0.7;
            opacity: 0.7;
        }
        .IMG_Aladin:hover {
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity: 1;
        }
/*POLICE CATEGORIES*/
 
.secondarytitle h2 {
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  text-transform:uppercase; /* texte en petites majuscules */
  font-family: Merienda;
  font-size:24px;
}

/*POLICE FORUM*/

.forumlink {
  font-family : Sail;
  font-size : 20px;
}

/***MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS FORUMS EN COLONNE*[Début du CSS]***/

/* Ceci est la technique dite "clearfix" qui permet de forcer le conteneur des flottants à s'adapter à leur taille */
.BlocForum:after {
  display:table;
  content:"";
  clear:both;
}

/* Positionnement de la description des forums */
.DescForum {
  float:left; /* flottant à gauche */
  width:80%; /* largeur de 80% */
}

/* Positionnement de la liste des sous-forums */
.ListeSousForums {
  float:left; /* flottant à gauche */
  width:20%; /* largeur de 20% */
  font-size:0px;
}

/* Mise en page de la description des forums */

.DescForum > div {
  margin:2px 10px 2px 2px; /*marges extérieures, haut droite bas gauche*/
  background:#C0BBBE; /* couleur de fond */
  padding:5px; /* marges intérieures, entre le texte et le bord */
  text-align:justify; /* alignement du texte */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}
.ListeSousForums a {
  display:block; /* on transforme les liens en blocs */
  background:#C0BBBE; /* couleur de fond */
  padding:2px 10px; /* marges internes haut/bas et droite/gauche */
  margin:2px 0; /*marges externes haut/bas et droite/gauche */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
  /* sans la virgule*/
  font-size:10px; /* indiquez la taille du texte des liens */
  padding :5px; /* on rajoute un espace après le lien */
}
  /* pour les navigateurs qui acceptent la pseudo-classe :last-child, on supprime l'espace final qui ne sert à rien */
.ListeSousForums a:last-child {
  padding-right:0px;
}
#cadre_haut {
   float: right;
        position: relative;
        margin-right: -200px;
        width: 200px;
        height: 100%;
        background: #E6E4E2;
}
#cadre_bas {
        float: right;
        margin-top: 45px;
        position: absolute;
        width: 200px;
        height: 100%;
}
.forumline{
    background-color: #E6E4E2;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px ;
    border-radius:10px;
    border: 3px #E6E4E2 solid;
}
/*[fin du CSS]*MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE*/

/***MESSAGE PAGE D'ACCUEIL***[Début du CSS]/

/*Titre*/

.titre {
   font-family : Sail;
   font-size : 40px;
   color : #501646;
   text-shadow : #703766 1px 1px 5px;
   text-align : center;
}

.legend {
   font-family : Georgia;
   font-size : 8px;
   color : #3E7963;
   text-align : center;
   margin-top : -10px
}

.titre2 {
     font-family: Georgia;
     font-size: 12px;
     color : #3E7963;
     padding: 1px;
     margin: auto;
     margin-bottom: 5px;
}


/*Concept*/

.block-concept {
   font-family : Georgia;
   text-align : justify;
   margin-right : 160px;
   margin-left : 160px;
}
/*Ligne*/
hr {
     border-style : dotted;
     border-color : #501646;
}

/*Liens*/

.lien {
   font-family : Merienda;
   font-size : 15px;
   color : #3E7963;
   text-align : center;
   padding : 1px
}

/*Staff*/

.block-staff {
    position: relative;
      z-index: 0;
}
.image {
   width: 100%;
   height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
   -webkit-transition: all 1s ease; /* Safari et Chrome */
   -moz-transition: all 1s ease; /* Firefox */
   -ms-transition: all 1s ease; /* Internet Explorer 9 */
   -o-transition: all 1s ease; /* Opera */
   transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 15% */
   -webkit-transform:scale(1.15); /* Safari et Chrome */
   -moz-transform:scale(1.15); /* Firefox */
   -ms-transform:scale(1.15); /* Internet Explorer 9 */
   -o-transform:scale(1.15); /* Opera */
   transform:scale(1.15);
}
/*Colonnes*/

.block-news, .block-membres, .block-information {
     width: 160px;
     height: auto;
}
.block-membres img, .thumbnail > div {
       -moz-transition: opacity 1s;
       -o-transition: opacity 1s;
       -webkit-transition: opacity 1s;
       -htm-transition: opacity 1s;
       transition: opacity 1s;
}
.block-membres img {
     width: 88px;
     height: 31px;
     padding: 1px;
     display : block;
     margin-right : auto;
     margin-left: auto;
     
 
     opacity: 0.5;
     -moz-opacity: 0.5;
     filter: alpha(opacity=50);
}
.block-membres img:hover {
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);
}
/***MESSAGE PAGE D'ACCUEIL***[Fin du CSS]/


/*Citations*/
.cadre {
    background-color : #f0f0f0;
    padding-top:10px;
    padding-bottom :10px;
    padding-right:10px;
    padding-left:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
titre{
  font-size : 30px;
  font-family : Merienda;
  color : #a56154;
}
soustitre {
  font-size : 20px;
  font-family : AR ESSENCE;
  color : #767967;
}

Merci!

[Invité]

bonsoir Mila-roza , c'est vrais vous me l'aviez demander sur un autre sujet , il est partie au oubliettes ?

faite un test avec ces 2 codes css

celui ci pour descendre le titre H2>
ont donne au titre le moyen de se déplacer
position>(relative)
et ont le descend
marge positive>(30px)

Code:

.secondarytitle, .secondarytitle h2 {
    position: relative;
    top: 30px;
}

ensuite comme il passe par dessus les sous forum et qu'il empeche le clic (du moins le premier)
ont ajoute ce code >>

Code:

td.row1, td.row3.over:hover {
    position: relative;
}

la les sous forum sont de nouveaux cliquable .

tenez moi au courent ,bonne soirée ,

[Mila Roza]

Bonsoir,
Oui il est parti aux archives ^^
Et donc j'ai essayé et ça marche nickel!! Encore merci!!

[Invité]

de rien Mila au plaisir de vous venir en aide