Déplacer titre principal dans cadre

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

Résolu Déplacer titre principal dans cadre

Message par Mila Roza le Mar 15 Déc 2015 - 19:29

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! Very Happy


Dernière édition par Mila Roza le Mar 15 Déc 2015 - 21:09, édité 1 fois

Mila Roza
Nouveau membre

Messages : 21
Inscrit(e) le : 28/10/2015

http://jesuisuneprincesse.forumactif.org
Mila Roza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer titre principal dans cadre

Message par R-max le Mar 15 Déc 2015 - 20:44

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 ,

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer titre principal dans cadre

Message par Mila Roza le Mar 15 Déc 2015 - 21:09

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

Mila Roza
Nouveau membre

Messages : 21
Inscrit(e) le : 28/10/2015

http://jesuisuneprincesse.forumactif.org
Mila Roza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer titre principal dans cadre

Message par R-max le Mar 15 Déc 2015 - 21:10

de rien Mila au plaisir de vous venir en aide Very Happy

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

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


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