Décaler un titre une fois sur deux

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://sangsmelesoriginels.forumactif.com/

Description du problème

Bonjour les amis

Me voici avec un nouveau défi.

J'aimerais faire ceci :




Je vois dis ce que je ne sais pas faire dans l'image ci-dessus. Je n'arrive pas à mettre le titre de la catégorie, un coup à droite, un coup à gauche. Le texte et l'image, aucun souci. Seul le titre me pause souci.

J'ai farfouillé dans la template Index-box, mais malgré la class que je mets, je ne vois pas comment le forum peut savoir que ce sera d'une catégorie sur deux.

Voilà la ligne, <div class="forum_titre2"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>, que j'ai ajoutée au template :

Code:

<!-- BEGIN forumrow -->

<div class="forum">
  <div class="icone_forum">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="forum_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="forum_titre2"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="last_message">{catrow.forumrow.LAST_POST}
  <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->
  </div>
  <!-- Modifier le 31/05/17 pour cacher le nbr de messages et nbr de sujets-->
  <!--  <div class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</div> -->
</div>

  <!-- END forumrow -->

Cela me donne deux titres l'un sur l'autre sur tous les forums comme montré ici :




Cela me semble tout à fait logique vu que j'ai ajouté un titre mais alors, comment lui faire comprendre ce que je veux faire ?????

Si quelqu'un peut m'aider, ce serait génialissime.

[Neptunia]

Bonjour ^^


Pour obtenir de l'aide, il pourrait être intéressant de fournir des éléments complets.
- Le template complet
- Le CSS associé (au minimum celui associé à l'index.

Faute d'éléments suffisants je vous renvoie sur le pseudo-élément :nth-child(odd) ou :nth-child(even)

:nth-child sur Mozilla Developer Network

[Walt]

Bonjour,

Ce n'est pas du côté des templates que ça se joue, mais davantage en CSS, grâce à la pseudo-classe :nth-child() dont vous trouverez l'explication sur cette page.

Par exemple, tr:nth-child(2n+1) permettra de cibler les lignes impaires d'un tableau.

Si dans chacune des lignes du tableau, il y a un lien, je peux l'afficher à gauche ou à droite en fonction de la ligne grâce à un CSS ressemblant à :

Code:

tr a {
    float: left;
}

tr:nth-child(2n+1) a {
    float: right;
}

Cordialement,
Walt

[L'ange noir]

Oh, merci. Je ne connaissais pas ce type de code. Il y a tant à apprendre....

Je vais aller étudier ça et tenter de le mettre dans mon css. Si je comprends bien, inutile de changer mon templates. Je vais le remettre comme avant.

Je reviens vous dire dès que j'ai mis tout ça.

Merci


Edit : Je vais vous poser une question un peu bête, mais ce type de code se met dans le css, et comment le forum va savoir que je veux les appliquer qu'aux titres de mes différents forum ?

[Walt]

C'est à vous de le préciser, vous pouvez tout à fait indiquer une classe. Par exemple si je reprends l'exemple précédent :

Code:

tr a.forumline {
    float: left;
}
 
tr:nth-child(2n+1) a.forumline {
    float: right;
}

Cordialement,
Walt

[L'ange noir]

Je comprends. Bon, je m'y attelle de suite.... merci encore.

[L'ange noir]

Me voilà de retour. J'ai étudié le tuto que vous m'avez donné et j'ai compris qu'on pouvait sélectionner des lignes de tableau par tranche de lignes paires et impaires. J'ai donc suivi ce qui était noté et votre exemple de code ci-dessus. Comme je voulais l'appliquer sur le titre du forum j'ai donc appliqué les informations sur la class .forum_titre mais cela n'a rien donné.

Voici le code actuel en place :

Code:

/* GENERAL */
body
{
background-image: url(https://img15.hostingpics.net/pics/935376fond.jpg) no-repeat; /* motif du fond clair et fond de page */
background-attachement: fixed;
}
a:link, a:hover
{
  text-decoration : none !important;
}
.bodylinewidth
{
  position: relative;
  z-index: 3;
}

#page-body /* mise en forme du corps de page */
{
  width: 950px;
  background: url(https://img15.hostingpics.net/pics/155243463.jpg);
  border-top: 5px solid #d4a450;
  border-bottom: 5px solid #d4a450;
  border-right: 4px solid #d4a450;
  border-left: 4px solid #d4a450;
  box-shadow: 0px 0px 10px #000000;
}

a.mainmenu
{
  font-family: 'Alegreya Sans SC', sans-serif;
  letter-spacing: 2px;
}

#titre
{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 307px;
  background: url(https://img15.hostingpics.net/pics/623412ecriture.png) center center no-repeat; /* image du titre doré */
  top: 0;
  left: 0;
  margin-top: 475px;
}
.forumline /* mise en forme des blocs et tables par defaut du forum */
{
  width: 98%;
  margin: auto;
  background: #e8e8e6;
  border: 1px solid #ffffff;
  margin: 10px auto;
}

table
{
  width: 98%;
  margin: auto;
}

/* CATEGORIES */
.secondarytitle h2 {
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  letter-spacing:2px; /* espacement entre les lettres */
  font-variant:small-caps; /* texte en petites majuscules */
  color:#610B0B; /* couleur du texte */
  font-family: Nuncio, Geneva, Tahoma, Verdana, sans-serif;
  font-size:16px;
}

/* Mise en forme du "bloc" qui contient le titre */
.TitreCategorie {
  background: #610B0B; /*fond*/
  /* Des coins arrondis */
  border-radius:50px 50px 0 0;
  -moz-border-radius:50px 50px 0 0;
  -wekbit-border-radius:50px 50px 0 0;
  width: 300px; /*largeur à modifier selon vos goûts*/
  margin-left: 360px; /* on centre le bloc */
  padding:2px; /*espace entre la bordure et le texte*/
  border:1px solid #C49E20;
  border-bottom:0px;
 
}

/* mise en forme du titre lui-même */
.TitreCategorie h2 {
  margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  letter-spacing:2px; /* espacement entre les lettres */
  font-variant:small-caps; /* texte en petites majuscules */
  color:#C49E20; /* couleur du texte */
  font-family: Geneva, Tahoma, Verdana, sans-serif;
  font-size:16px;
}

.forum /*cadre du forum sous titre catégorie*/
{ border-radius:30px 30px 0 0;
  -moz-border-radius:30px 30px 0 0;
  -wekbit-border-radius:30px 30px 0 0;
  border: 1px solid #C49E20;
  height: 150px;
  width: 54%;
  margin-bottom: 10px;
  margin-left: 200px;
}

.forum_titre /*comme Le Grimoire sacré*/
{ margin: 20px 0 0 24px;
  margin-left: 25px;
}

tr:nth-child(2n+1) a.forum_titre /*lignes impaires*/
{
    float: left;
}

tr:nth-child(2n) a.forum_titre /*lignes paires*/
{
  float: right;
}
 
.forum_titre a
{
  display: block;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #000000;
  color: #9B6F1B !important;
  transition: 200ms;
}
.forum_titre a:hover
{
  color: #eee37c !important;
  transition: 200ms;
}

.icone_forum /*place les cadres des forums*/
{
  position: absolute;
  margin: 35px 0 0 -40px;
  z-index: 8;
}

.sous_forum
{
  position: absolute;
  height: 170px;
  margin: 15px 20px 0 -195px;
  text-align: center;
  overflow: auto;

}

.sous_forum a.gensmall
{
  display: inline-block;
  float: right;
  width: 180px;
  height: 18px;
  padding-top: 2px;
  background-image: url(https://i58.servimg.com/u/f58/19/65/31/91/textur12.jpg);
  color: #C49E20;
  transition: 200ms;
  border-left:1px solid #000000;
  border-right:1px solid #000000; 
}

.sous_forum a.gensmall:hover
{
  opacity: 0.8;
}

.description
{
  position: absolute;
  width: 100px;
  height: 170px;
  margin: 5px 0 0 250px;
  background: white opacity 0,5;
 

}
.description_img
{
  position: absolute;
  width: 615px;
  height: 151px;
  border-radius:35px 35px 0 0;
  -moz-border-radius:50px 50px 0 0;
  margin-left: -252px;
  margin-top: -6px;
 
}
.descriptiongestion_img
{
  position: absolute;
  width: 189px;
  height: 116px;
  border-radius:35px 35px 0 0;
  -moz-border-radius:50px 50px 0 0;
  margin-left: 45px;
  margin-top: 15px;
 
}
.description_texte
{ position: absolute;
  height: 170px;
  width: 200px;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 12px;
  text-align: justify;
  margin-left: -200px;
  padding-top: 45px;
 
}
.description_first
{
  font-size: 14px;
  color: #87652a;
}

.last_message /*les titres des derniers messages à droite*/
{
  position: absolute;
  background: url(https://img15.hostingpics.net/pics/116930Fond.png) no-repeat;
  height: 90px;
  width: 190px;
  margin-top: 25px;
  margin-left: 520px;
  text-align: center;
  padding-top: 15px;
  padding-right: -5px;
}

.last_message a
{
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  font-style: italic;
}
.last_message a.gensmall
{
  font-size: 16px;
}

.lastpost-avatar
{
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
  opacity: 0;
  transition: 200ms;
}
.last_message:hover .lastpost-avatar
{
  opacity: 1;
  transition: 200ms;
}
.lastpost-avatar img
{
  width: 140px;
  height: auto;
  margin-top: -30px;
  margin-left: -10px;
}
.topictitle
{
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
}
/* MESSAGES */
.mess_options
{
  position: absolute;
  width: 95%;
  margin-top: -26px;
  text-align: right;
}
.detail_mess
{
  display: block;
  text-align: right;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 11px;
}
.rang
{
  position: absolute;
  z-index: 6;
  margin-left: -20px;
  margin-top: -30px;
}
.pseudo
{
  position: relative;
  z-index: 7;
  display: block;
  margin-top: 15px;
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-shadow: 1px 1px 0px #ffffff;
}
.avatar_cadre
{
  position: relative;
  z-index: 6;
  width: 219px;
  height: 339px;
  margin: -20px auto 0 auto;
  background: url(http://img4.hostingpics.net/pics/611666fondavatar.png);
}
.avatar_contenu
{
  position: absolute;
  margin: 8px 0 0 9px;
}
.online_img
{
  position: absolute;
  z-index: 5;
  width: 342px;
  height: 467px;
  background: url(http://img4.hostingpics.net/pics/456987offline.png);
  margin-left: -80px;
}
.mess_contenu
{
  position: relative;
  z-index: 6;
  width: 96%;
  min-height: 350px;
  margin: auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 5px #000000;
  text-align: justify;
}
.profil_bloc
{
  position: absolute;
  z-index: 7;
  background: #141414;
  width: 190px;
  height: 310px;
  padding: 5px;
  margin-top: -331px;
  margin-left: 9px;
  text-align: center;
  font-size: 13px;
  color: #e8e8e6;
  overflow: auto;
  opacity: 0;
  transition: 200ms;
}
.profil_bloc .label
{
  display: block;
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 18px;
  color: #424242;
}
.profil_bloc:hover
{
  opacity: 1;
  transition: 200ms;
}
.sondage
{
  width: 500px;
  margin: auto;
  background: #e8e8e6;
  border: 1px solid #ffffff;
  text-align: center;
}
.progress-bar td
{
  float: left;
  cellpadding: 0 !important;
  cellspacing: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.quote, .spoiler_closed, .spoiler_content
{
  background: #e8e8e6;
  border: 1px solid #cdad58;
  color: #5c441e;
  padding: 5px;
}
.code
{
  background: #141414;
  border-left: 1px solid #b58832;
  border-right: 1px solid #b58832;
  border-top: 3px solid #b58832;
  border-bottom: 3px solid #b58832;
  color: #eee37c;
  padding: 5px;
}
/* QEEL */
.stats1
{
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.stats1 strong
{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  color: #b58832;
  text-shadow: 1px 1px 0px #ffffff;
}
.stats2
{
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 5px #000000;
  text-align: justify;
}
/* footer partenaires */

#blocfooter
{
width: 70%;
padding-top: 20px;
}

#blocfooter img {
margin-right: 6px;
width: 94px; height: 37px;
}
 
#blocfooter img:hover {
-webkit-animation-origin: center center;
-moz-animation-origin: center center;
-ms-animation-origin: center center;
-o-animation-origin: center center;
animation-origin: center center;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

#page-footer a
{
  font-size: 10px;
}
#page-footer div
{
  text-align: right;
}
/* TITRES SAISIE ET BOUTONS */
td.catHead, th.thHead, .thSides, .cattitle
{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  font-weight: normal !important;
  color: #87652a;
}
h1, h1.pagetitle
{
  font-size: 28px;
}
input, textarea, select
{
  border: 1px solid transparent;
  background: #ffffff;
  padding: 3px;
  color: #757575;
  transition: 200ms;
}
input:focus, textarea:focus, select:focus
{
  border: 1px solid #cdad58;
  color: #424242;
  transition: 200ms;
}
#text_editor_iframe, .sceditor-container iframe, .sceditor-container textarea
{
  width: 98% !important;
}
.mainoption, .liteoption, input.button
{
  margin: 10px;
  background: #b58832;
  color: #5c441e !important;
  cursor: pointer;
  border: 1px solid #87652a;
  text-shadow: 1px 1px 0px #cdad58;
  transition: 200ms;
}
.mainoption:hover, .liteoption:hover, input.button:hover
{
  background: #cdad58;
  text-shadow: 1px 1px 0px #eee37c;
  transition: 200ms;
}
.postbody
{
  text-align: justify;
  font-size: 14px;
}
.pourcentback img
{
  background: #b58832;
}
/* RETRAIT DES BORDURES */
    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }
/*-------------------------code tout sélectionner--------------*/
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
/*************** fin code ******************/
/*********************** titre CB **********************/
#chatbox_header .catBottom .cattitle { content: "Rejoignez-nous sur la "; }

Voyant que cela ne changeait rien, j'ai tenté un peu tout :

a.forum_titre
.forum_titre a

forumlink
.forumlink

j'ai supprimé la position absolute, je l'ai remise, puis supprimé les margin, je les ai remises etc...

A part le fait que les titres remontent quand je supprime les marges, ils restent ancrés à gauche et jamais ne se décalent à droite dans les lignes paires.

Je me dis que quelque chose force leur emplacement dans le code parce que j'ai fais exactement comme le tuto et rien n'y fait. Je suis vraiment désolée.

[L'ange noir]

Je ne trouve pas de solution. Je ne vais donc pas faire ce que je voulais. Si jamais quelqu'un voit ce qu'il faut faire, je serais tout de même intéressé de savoir si c'est faisable.

Merci

[Walt]

Bonjour,

Il ne faut pas grand chose :

Code:

.forum:nth-child(2n+1) .description {
    margin-left: 0;
}
.forum:nth-child(2n+1) .description_texte {
    margin-left: 265px;
}
.forum:nth-child(2n+1) .block {
    margin-left: 250px;
}
.forum:nth-child(2n+1) .forum_titre {
    margin-left: 250px;
}

Le seul problème c'est que le CSS fait effet sur un enfant sur deux, mais au sein d'une catégorie.



Donc si la catégorie contient un nombre de forum impair, l'enchainement ne sera pas parfait (gauche / droite / gauche / droite ...) mais pourra être rompu (gauche / droite / gauche / gauche / droite...).

Cordialement,
Walt

[L'ange noir]

Bonjour et merci Walt,

Je mettais le code de décalage avant le mot forum. C'est surement ce qui faisait que ça ne fonctionnait pas. Et je notais un tr... des fois la logique m'échappe.

Merveilleux. J'ai compris comment il fallait faire. Merci beaucoup pour votre aide.