Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Forum décallé sur la droite


2 participants

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

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Ven 16 Oct 2020 - 13:49

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour Phil,

J'ai été alertée par une copine mais j'ai une sorte de marge à droite du forum.
Malgré mes recherches je ne parviens pas à comprendre ce qui provoque cette marge.
Je suis entrain de coder le footer et j'ai peur que ce décalage ne se reproduise ensuite sur le forum officiel.

Est-ce que tu pourrais m'aider à trouver l'origine du souci ?

Voici le css :

Code:
/*CSS AJOUTEE PAR MILOUZE14*/
/*Minimum de hauteur en tant qu invite*/
.post-options{min-height:20px;}
/*On remonte le postbody si le profil est vide ==sponsor*/
table#sponsor.message .postbody{margin-top:0px;}
/******************************************************
            TOOLBAR
******************************************************/
/* NOTIFICATIONS */

/* Cacher les bout de la toolbar que je ne veux pas */
.fa_tbMainElement#fa_left,
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink {
   display:none!important;
}
 
/* Supprimer la couleur de fond et positionnement du bloc */
#fa_toolbar {
  background-color:transparent!important;
  top:0px;
  padding:5px;
  width:100%;
  z-index:999;
  box-sizing:border-box;
  margin-bottom: -30px;
}

/* Mise en page du bouton Notification */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
  display:block!important;
  position:relative;
  top: 5px;
  right: 20%;
  height: 32px;
  width:160px;
  padding:3px;
  background:#ffffff;
  box-shadow:0 0 5px #000000;
  color:#314E70;
  font-family: Calibri;
  font-size:11px;
  text-transform: uppercase;
  letter-spacing:2px;
  text-align:center;
  border-radius: 0px;
  outline: 1px solid #314E70;
  outline-offset: -4px;
  text-decoration:none!important;
}
#fa_toolbar #fa_right #notif_list li:first-child{
  padding-top:10px;
}

/* Mise en page bouton "notification" - Au clic */
#fa_menu:hover:visited,
#fa_toolbar > #fa_right.notification > #fa_notifications {
  background:#314E70 !important;
  color:#ffffff !important;
  outline: 1px solid #ffffff;
  outline-offset: -4px;
  text-shadow:none;
}

/* Référence pour la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement {
  position:relative;
}

/* Mise en page de la liste des notifications */
#fa_toolbar #fa_right.notification #notif_list {
  top:60px!important;
  right: 20%;
  left:auto!important;
  max-width:340px;
  min-width:167px;
  box-shadow:0 0 5px #000000;
  border:none!important;
}

/* Mise en page des notifications */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li {
  width:auto!important;
  font-size:12px;
  background-color:#ffffff;
}

/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText {
  overflow:visible!important;
  width:340px !important;
  height:auto!important;
}

/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications {
  width:180px;
  /* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
  border-left:1px solid #314E70;
}

#fa_toolbar #fa_right #notif_list li.unread {
  background:#ffffff!important;
}

/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all {
  text-align:center!important;
  background:#314E70!important;
  font-size:12px!important;
  padding:5px!important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
  color:#ffffff;
}
/******************************************************
            NAVIGATION
*******************************************************/
.navigest
{
  width: 100%;
  height: 65px;
  background-color:#ffffff;
}
.est_navig
{
  height: 57%;
  background-color: #ffffff;
  margin: auto;
  border-bottom: 1px solid #314E70;
  white-space: nowrap;
}
.est_navig a
{
  font: 18px 'Playfair Display', sans serif;
  color: #314E70;
  text-transform: uppercase;
  transition: all 0.2s linear;
  line-height: 52px;
  margin-right: 5px;
}
.est_navig a img{
    display:none;
}
/***********************************************************
            HEADER
***********************************************************/
body
{
 background-color: #D4E5E4;
  margin: 0;
}
.bodylinewidth
{
  width: 950px;
}
.bodyline
{
  width: 950px;
  padding: 0;
}
#i_logo {
  width: 100%;
  margin-top: -30px;
  margin-bottom: -52px;
}
a:link, a:hover
{
  text-decoration: none !important;
}
    .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;
    }
    #page-body
    {
     width: 920px;
     margin: auto;
    }
.forumline
{
  margin: auto;
}
/****************************************************
        CATEGORIES
*****************************************************/
/* Catégories Azalée */
.cat{
  width:932px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.cat-title {
  font: 28px 'Playfair Display', sans-serif;
  width: 90%;
  margin: auto;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px #314E70 solid;
  margin-bottom: 20px;
  margin-top: 20px;
}
.cat-title a, .cat-title a:hover,  .cat-forumrow h3 a{
  text-decoration: none!important;
  color: #314E70;
}
.cat-forumrow {
  width: 49%;
  height: 330px;
  overflow: hidden;
  position: relative;
}
.cat-forumrow h3 {
  font: 24px 'Playfair Display', sans-serif;
  margin: 5px;
  padding: 0px;
  text-transform: uppercase;
  position: relative;
}
.cat-forumrow h3:after {
  content: " ";
  width: 456px;
  height: 10px;
  border-bottom: 1px #314E70 solid;
  position: absolute;
  left: 0px;
  bottom: 5px;
  z-index: -2;
}
.cat-forum-cont {
  width: 100%;
  height: 257px;
  overflow: hidden;
  position: relative;
}
.cat-descrip-img {
  width: 100%;
  height: 257px;
  position: relative;
  font-size: 0px!important;
}
.cat-descrip-img img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.cat-gauche {
  width: 30%;
  height: 257px;
  background: #314e70c4;
  position: absolute;
  top: 0px;
  left: 0px;
  box-sizing: border-box;
  padding: 60px 10px 10px 10px;
  font: 13px 'Playfair Display', sans-serif;
  text-align: center;
  transition: left 0.5s;
  transition-delay:0.2s;
}
.cat-gauche div:first-of-type {
  color: #d4e5e4;
  text-transform: uppercase;
  font-size: 10px;
  margin-top: 10px;
}
.cat-gauche div a, .cat-gauche div strong {
  color: #d4e5e4;
  text-decoration: none!important;
}
.cat-gauche div:nth-child(2) span {
  display: block;
  background: #d4e5e4;
  box-sizing: border-box;
  padding: 3px;
  margin-top: 10px;
}
.cat-gauche div:nth-child(3) img {
  width: 80%;
  margin-top: 10px;
}
.cat-descrip {
  width: 94%;
  height: 150px;
  background: #314e70c4;
  position: absolute;
  top: -156px;
  left: 13px;
  overflow: auto;
  box-sizing: border-box;
  padding: 7px;
  color: #d4e5e4;
  font: 13px 'Roboto Condensed', sans-serif;
  text-align: justify;
  border: 1px #d4e5e4 solid;
  outline: 7px solid #314e70c4;
  transition: top 0.5s;
  transition-delay: 0.2s;
}
.cat-descrip img {
  display: none;
}
.cat-sousfow {
  width: 100%;
  background: #314e70c4;
  position: absolute;
  bottom: -100px;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  font-size: 0px;
  box-sizing: border-box;
  justify-content: space-around;
  padding: 10px 40px 10px 40px;
  overflow: auto;
  transition: bottom 0.5s;
  transition-delay: 0.2s;
}
.cat-sousfow a {
  display: block;
  font-size: 12px;
  background: #d4e5e4;
  height: 15px;
  min-width: 90px;
  padding: 10px;
  text-decoration: none!important;
  text-align: center;
  color: #314E70!important;
  font: 12px 'Roboto Condensed', sans-serif;
  margin-bottom: 7px;
}
.cat-forumrow:hover .cat-gauche{
  left:-137px;
  transition-delay:0s;
}
.cat-forumrow:hover .cat-descrip{
  top:13px;
}
.cat-forumrow:hover .cat-sousfow{
  bottom:0px;
}
/**********************************************
          QEEL
***********************************************/
.qeelestHead
{
  height: 70px;
  border-bottom: 1px solid #314E70;
}
.qeelesttitle a
{
  color: #314E70;
  font-family: 'Playfair Display', sans serif;
  font-weight: normal;
  font-style: italic;
  font-size: 40px;
  line-height: 90px;
}
.top-gauche
{
  display: block;
  width: 300px;
  text-align: center;
  margin-top: 30px;
}
.arrivant
{
  color: #314E70;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 25px;
}
.arrivant a
{
  color: #314E70;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 20px;
  font-weight: normal;
}
.postest
{
  display: block !important;
  height: 30px;
  background-color: #314E70;
  color: #D4E4E4;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.userest
{
  display: block !important;
  height: 30px;
  background-color: #314E70;
  color: #D4E4E4;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 20px;
  line-height: 30px;
}
.titreco
{
  display: block !important;
  width: 350px;
  color: #314E70;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 25px;
  margin-top: 35px;
}
.blockcoimg
{
  height: 111px;
  width: 560px;
  background: url('https://i.imgur.com/pU0NGAk.jpg');
  text-align: left;
  margin-top: -7px;
}
.blockco
{
  position: relative;
  height: 111px;
  width: 560px;
  background-color: #314E70;
  opacity: 0.7;
}
.blockcotxt
{
  border: 2px solid #ffffff;
  position: absolute;             
  top: 4%;
  left: 1%;
  right: 1%;
  bottom: 4%;
  color: #ffffff;
  padding: 10px;
}
.blockcotxt a
{
  color: #ffffff;
  overflow: auto;
}
#connect strong, #connect a
{
  text-transform: uppercase !important;
  color: #ffffff !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  font-weight: normal;
}
#kaboum span.gensmall, #kaboum span.gensmall a, #kaboum span.gensmall strong
{
  text-transform: uppercase !important;
  color: #ffffff !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 14px;
  font-weight: normal;
}
.usersonline
{
  display: block;
  position: absolute;
  bottom: 5%;
  left: 10%;
  font-family: 'Roboto', sans serif;
  font-size: 15px;
  padding-top: 10px;
  border-top: 1px solid #ffffff;
}
.titrelist
{
  display: block !important;
  position: absolute;
  top: 86%;
  color: #D4E4E4;
  text-transform: uppercase !important;
  font-family: 'Playfair Display', sans serif;
  font-size: 25px;
  letter-spacing: 5px;
  margin-left: 10px;
}
.blocklistimg
{
  height: 205px;
  width: 300px;
  background: url('https://i.imgur.com/EGzM6Oj.jpg');
}
.blocklist
{
  position: relative;
  height: 205px;
  width: 300px;
  background-color: #314E70;
  opacity: 0.7;
  margin-top: 20px;
}
.blocklistxt
{
  border: 2px solid #ffffff;
  position: absolute;             
  top: 3%;
  left: 2%;
  right: 2%;
  bottom: 20%;
  color: #ffffff;
  padding: 10px;
}
.groupes
{
  position: relative;
  width: 66%;
  float: right;
  height: 205px;
  margin-top: -205px;
}
.block-onglets
{
  width: 35%;
  height: 200px;
}
.seigneurs
{
  display: block;
  height: 25px;
  background-color: #664888;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.religieux
{
  display: block;
  height: 25px;
  background-color: #274B63;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.renegats
{
  display: block;
  height: 25px;
  background-color: #2E450F;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.civils
{
  display: block;
  height: 25px;
  background-color: #9C8A64;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.disparus
{
  display: block;
  height: 25px;
  background-color: #565656;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.legendes
{
  display: block;
  height: 25px;
  background-color: #151515;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.staff
{
  display: block;
  height: 25px;
  background-color: #7E100F;
  color: #ffffff;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ongletimg
{
  height: 205px;
  width: 290px;
  position: relative;
  left: 58%;
  background: url('https://i.imgur.com/7FFYZO7.jpg');
  margin-top: -205px;
}
.contenu_groupe_onglet
{
  height: 175px;
  width: 260px;
  background-color: rgba(49, 78, 112, 0.5);
  display: none;
  position: absolute;
  top: 3%;
  left: 2%;
  right: 1%;
  bottom: 1%;
  overflow: auto;
  font-family: 'Playfair Display', sans-serif;
  font-weight: normal;
  font-size: 15px;
  text-align: justify;
  color: #ffffff;
  padding: 10px;
}
.descripimg
{
  position: relative;
  width: 100px;
  height: 205px;
  left: 89.1%;
  background-color: #ffffff;
  margin-top: -205px;
}
.image_groupe_onglet
{
  display: none;
  color: #E6E2E3;
  text-align: center;
  font-family: 'Playfair Display', sans serif;
  font-size: 24px;
  writing-mode: sideways-lr;
  line-height: 100px;
}
.descripseigneur
{
  display: inline-block;
  background-color: #664888;
  height: 205px;
  width: 100px;
}
.descripreligieux
{
  display: block;
  background-color: #274B63;
  height: 205px;
  width: 100px;
}
.descriprenegats
{
  display: block;
  background-color: #2E450F;
  height: 205px;
  width: 100px;
}
.descripcivils
{
  display: block;
  background-color: #9C8A64;
  height: 205px;
  width: 100px;
}
.descripdisparus
{
  display: block;
  background-color: #565656;
  height: 205px;
  width: 100px;
}
.descriplegendes
{
  display: block;
  background-color: #151515;
  height: 205px;
  width: 100px;
}
.descripstaff
{
  display: block;
  background-color: #7E100F;
  height: 205px;
  width: 100px;
}
/*******************************************
        FOOTER
********************************************/
#page-footer
{
  font-family: 'Alice', sans serif;
  font-size: 20px;
}
#est-footer
{
  background-image: url('https://zupimages.net/up/20/27/y2ky.png');
  width: 100%;
  height: 300px;
}
.gen, .gen a, .copyright {
  color: #D4E4E4 !important;
  font-family: 'Playfair Display', sans serif;
}

j'ai la PA également en iframe, voici l'iframe :

Code:
<iframe frameborder="0" src="https://pizitest.forumactif.com/h1-page-d-accueil" scrolling="auto" style="width: 925px; height: 550px;"> </iframe>

En te remerciant,

Pizi


Dernière édition par Pizi le Lun 26 Oct 2020 - 17:34, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 16 Oct 2020 - 18:07

Coucou Pizi,

hum, je veux te filer un cop de main mais je ne vois aucune marge sur ton fofo chère amie.
Il faudrait qu'elle te donne une capture d'écran, c'est bien plus explicite impeccable
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Ven 16 Oct 2020 - 18:37

Grâce à la vue adaptive sur firefox je reproduis sa difficulté.
Ce qui est étrange c'est que ça semble être le contraire qui se produise sur le forum officiel (mais beaucoup moins prononcé pour le coup).
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 16 Oct 2020 - 18:39

Vi Pizi, mais je ne sais toujours pas ce qui t'ennuie !!!
Peux tu m'aiguiller stp car même en me servant de la console du navigateur, rien ne me choque!!!!

Ou alors peut être une piste ici sur le sujet de Franck:
https://www.milouze14.com/t32801-resoluphpbb2-balise-td-qui-persiste#625431

Et mettre le style dans la feuille de style et non dans le template:

Code:
#M14_right{display: none!important;}
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Oct 2020 - 19:58


Hello

Si ton sujet est résolu, merci de suivre la procédure suivante:
Un tag précédent ton premier message est présent.

Il te suffira de cliquer sur ce dernier pour mettre ton sujet en résolu.
Comme le mentionne le règlement.

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Lun 19 Oct 2020 - 20:09

Bonjour Phil,

Pardon pour le retard de ma réponse mais je ne me connecte que très rarement le week-end :)
Voici une capture écran pour que tu vois ce qu'il se passe :

[PHPBB2] Forum décallé sur la droite Qpdhber

C'est ce que je vois de mon écran de portable, mon amie voit également un décalage (moins prononcé toutefois) sur son écran d'ordinateur. Je lui ai demandé une capture d'écran, je te l'enverrai dès que possible.

J'ai tenté la manipulation que tu m'as indiquée mais ça ne change rien :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 20 Oct 2020 - 4:24

Coucou Pizi,

ben ce n'est pas le forum de ton profil ????
En regardant pas déduction sur le lien de ton iframe, j'ai trouvé le lien du fofo.
Le décalage serait dû à ce style:
Code:

.top-droite
{
    left: 35%;
    margin-top: -147px;
    position: relative;
}

Avec un margin-left:35% au lieu d'un left:35%;
, cela résout l'ascenseur en bas de page.
De toutes façon il est toujours recommandé de travailler en pourcentage au lieu des pixels et dans ton cas, c'est assez compliqué car on trouve partout body, page-body etc..

Merci de changer le lien du fofo dans ton profil Pizi afin que je ne me casse pas la tête a chercher....
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 20 Oct 2020 - 13:31

Bonjour Phil,

Il y a confusion :) Le lien sur mon profil est bien le lien de mon forum.

Le code que je t'ai passé et le problème évoqué sont sur mon forum test : https://pizitest.forumactif.com/

Pour éviter de gêner les membres dans leur expérience sur le forum, on m'a conseillé de travailler mes codes sur forum test d'abord. Cela permet aussi d'anticiper les difficultés et bugs divers une fois le code mis en ligne sur le forum original.

Mais en effet, j'aurais dû te le préciser et te mettre le lien, toutes mes excuses pour cet oubli, je suis confuse.

Après avoir essayé la modification proposée, j'ai toujours le même souci de marge à droite mais il est moins prononcé.
Dois-je modifier sur mes position relative tous les top, left, etc... en margin-top, margin-left, etc... ? Cela viendrait de ça ?

Merci beaucoup :)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 20 Oct 2020 - 15:33

Re coucou Pizi,

Mais en effet, j'aurais dû te le préciser et te mettre le lien, toutes mes excuses pour cet oubli, je suis confuse.

Ah ben vi effectivement car a force de chercher sur ton fofo du profil puis ensuite sur le forum tests (IFRAME) , je déteste perdre mon temps surtout quand il n'y a pas le lien du forum concerné.

Comment veux tu que je puisse voir Pizi  oups .
Bref, à part cette partie qui dépasse très légèrement sur la droite:


[PHPBB2] Forum décallé sur la droite 146

Sinon, oui il est toujours préférable de travailler en position relative avec des: top,right,bottom,left
mais aussi avec des positions absolute avec des:
margin-top etc etc.

Il y a peut être une apparence différente en étant connecté sinon?
Peux tu me fournir en M.P un compte sur le forum décrit ?
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mar 20 Oct 2020 - 18:04

Encore une fois, toutes mes excuses Phil, je n'y ai pas pensé et je comprends tout à fait ton énervement ^^

Tu es sûr que ça viendrait de là car on dirait que pourtant cette zone est bien alignée avec l'image de fond de la partie "membres connectés" ?

Ah oui en effet, lorsque l'on n'est pas connecté, la marge est très légèrement sur la gauche mais j'ai l'impression que c'est à cause du footer.
Il semble que la différence se fasse à la connexion.
Mais j'ai déjà remarqué que parfois j'ai des affichages différents sur certains éléments (comme la zone partenaire du footer) selon que l'on est connectés ou non et ça rend le codage assez compliqué...
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 20 Oct 2020 - 18:25

C'est pas grave, as-tu un compte que je puisse voir ce qui cloche...



Tu es sûr que ça viendrait de là car on dirait que pourtant cette zone est bien alignée avec l'image de fond de la partie "membres connectés" ?



Ce n 'est pas les membres connectés Pizi mais bel et bien le staff.

Par contre il faut travailler en pourcentage et adapter ensuite.
Pour commencer:



Code:
#page-body {
    width: 60%;
    margin: auto;
}

.un_forum {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 45%;
    height: 200px;
    margin-top: 20px;
    margin-left: 1%;
    overflow: hidden;
    box-shadow: 0 1px 4px grey;
}
.un_forum:nth-child(2n+1) {
    margin-left: 1%;
}



Puis peut être ajouter les styles suivant sur les class:

Code:
.titreco
{
height: 40px;
}

.titrelist
{
height: 40px;
margin-top: -8px;
}
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 21 Oct 2020 - 12:22

Bonjour Phil,

Je t'ai envoyé les coordonnées du compte par mp.
Dans l'attente je vais intégrer les codes proposés et voir si ça fonctionne ^^
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 21 Oct 2020 - 16:26

Coucou Pizi,

penses a accepter le règlement chère amie:
https://www.milouze14.com/t32096-reglement-de-l-entraide-forumactif#610159

Je viens d'ajouter un champs et il n'est pas présent sur ton profil  impeccable .



alors je reviens de ton fofo de tests (merci pour le compte)  et je constate une légère marge vers la gauche et ceci est du au page-body:

Code:
#page-body {
    margin: auto;
    width: 920px;
}

Il faut mettre un 100% à la place de 920 px .

Le bloc des partenaires trop collé, mettre le bottom en négatif comme ceci
Code:

.blockpart
{
bottom: -2%;
}

Et ajouter margin-bottom au bloc des groupes car c'est collé avec la pub
Code:


.groupes
{
margin-bottom: 40px;
}

Ensuite il serait judicieux d'englober les divs du Qeel, tu as une table mais tu ne l'utilises pas pour y déposer ces fameuses divs.
Tu peux me donner le dit template et la css associée stp, que je teste sur mon fofo.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 22 Oct 2020 - 17:31

Coucou Pizi,
si on pouvait avancer un peu plus rapidement sur ton sujet,
ce serait sympa hinhin .
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Ven 23 Oct 2020 - 9:52

Bonjour Phil,

Pardon mais en ce moment j'ai de gros soucis personnels et je n'ai pas pu m'occuper du forum ces derniers jours.
J'ai ajouté les éléments de codes que tu m'as communiqués.
Par contre ça a complètement explosé mon QEEL du coup :/

Voici ci-dessous le code de l'index_body où se trouve le QEEL.

Code:
{JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <!-- BEGIN message_admin_titre -->
    <tr>
    <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
    </tr>
    <!-- END message_admin_titre -->
    <!-- BEGIN message_admin_txt -->
    <tr>
    <td class="row1" rowspan="3" align="center" valign="middle">
    <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
    </td>
    </tr>
    <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->

    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <!-- BEGIN switch_fb_connect_no -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td class="row1" align="center">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect_no -->

    <!-- BEGIN switch_fb_connect -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td valign="top" width="100%" class="row1" align="center">
    <table width="100%">
    <tr>
    <td width="55%" valign="middle" align="right">
    <table class="right">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    <td width="10%" align="center" valign="middle">
    <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
    </td>
    <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_header -->

    {CHATBOX_TOP}
    {BOARD_INDEX}
    <!-- BEGIN switch_on_index -->
    <!-- END switch_on_index -->
    <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <!-- BEGIN switch_fb_connect_no -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td class="row1" align="center">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect_no -->

    <!-- BEGIN switch_fb_connect -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td valign="top" width="100%" class="row1" align="center">
    <table width="100%">
    <tr>
    <td width="55%" valign="middle">
    <table class="right">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    <td width="10%" align="center" valign="middle">
    <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
    </td>
    <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect -->
    </form>
<!-- END switch_user_login_form_footer -->
  <!-- BEGIN disable_viewonline -->
    <table class="qeelest" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr><img src="https://i.imgur.com/JRgLbDc.png" width="50%;" style="margin-left: 25%; margin-top: 20px; margin-bottom: 10px;" /></tr>
      <tr>
    <div class="qeelestHead" width="100%" align="center">
    <!-- BEGIN switch_viewonline_link -->
      <span class="qeelesttitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><span id="viewonline">{L_WHO_IS_ONLINE}</span></a></span>
    <!-- END switch_viewonline_link -->
     
    <!-- BEGIN switch_viewonline_nolink -->
        <span class="qeelesttitle">{L_WHO_IS_ONLINE}</span> </div>
    <!-- END switch_viewonline_nolink -->
    </tr></table>
      <div><div class="top-gauche"><img src="https://i.imgur.com/UVD7Zmj.png" style="widht: 300px; height: 171px;" />
        <span class="arrivant"><span id="newuser">{NEWEST_USER}</span>
        </span></div>
      <div class="top-droite"><span class="titreco">Ils se baladent en ville</span>
        <div class="blockcoimg">
          <div class="blockco">
            <div class="blockcotxt"><span class="coest"><span id="connect">{LOGGED_IN_USER_LIST}</span></span><br />
        <span class="usersonline">{TOTAL_USERS_ONLINE}</span>
            </div>
          </div>
        </div>
</div>
<div class="blocklistimg">
  <div class="blocklist"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
  </div>
  <span class="titrelist">Hors Ligne</span>
        </div>
<div class="stats">
  <span class="postest"><span id="messages">{TOTAL_POSTS}</span>
  </span>
  <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
          </div>
  <span class="userest"><span id="totalusers">{TOTAL_USERS}</span>
  </span>
  <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
          </div>
        </div></div>
      <script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ',''));
</script>
<script type="text/javascript">
  document.getElementById('viewonline').innerHTML= document.getElementById('viewonline').innerHTML.replace(/Qui est en ligne/,"Qui a survécu");
  document.getElementById('newuser').innerHTML= document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"<u>Dernier arrivant</u><br />");
  document.getElementById('messages').innerHTML= document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de (.+) message(s?)/,"$1 <br />message$2");
  document.getElementById('totalusers').innerHTML= document.getElementById('totalusers').innerHTML.replace(/Nous avons (.+) membre(s?) enregistrés?/,"$1 <br />membre$2");
  document.getElementById('connect').innerHTML= document.getElementById('connect').innerHTML.replace(/Utilisateurs enregistrés :/,"");
</script>
<div class="ongletimg"><div class="contenu-onglets">
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_seigneurs">Responsables d'un ou plusieurs groupes de survivants ou anciens seigneurs avant le Cataclysme. Ils ont tous été reconnus officiellement par la Reine. Leur but : reconstruire le royaume d'Estéria et lui rendre sa splendeur d'antan.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_religieux">Qu'ils croient en un seul ou plusieurs dieu(x), ces personnes ont choisi de consacrer leur vie à leur religion. Amenés à voyager pour certains ou dédiés à leurs fidèles dans un territoire fixe, ils cherchent à asseoir la domination de leur religion, la seule à prêcher la bonne parole.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_renegats">Ce ne sont pas de simples bandits ou pillards. Ces survivants croient pour des raisons qui sont les leurs que l'ancien système est mort et souhaitent profiter du Cataclysme pour instaurer un ordre nouveau où chacun aurait sa place.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_civils">Survivants qui ont repris pour la plupart leurs anciennes fonctions. Ils souhaitent que la vie reprenne son cours normal sans s'intéresser plus que cela aux jeux de pouvoirs. Cela ne les empêche pas pour autant d'avoir un avis sur la question.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_disparus">Cela fait un moment que l'on ne les voit plus sur nos terres, toutefois ils sont encore présents dans les coeurs de chacun. Ils sont susceptibles de pouvoir revenir à tout moment.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_legendes">Comme dans tout royaume, Estéria pleure ses morts. Sans aucun espoir de retour, leurs aventures leur auront prit bien plus que du temps et de l'énergie. Ils ont perdu la vie et sont pleurés des leurs.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_staff">Administrateurs du forum, n'hésitez pas à les contacter pour poser vos questions ou pour signaler toute difficulté ou bug rencontré sur le forum. On vous le promet, ils ne mordent pas.</div>     
  </div></div>
<div class="descripimg">
  <div class="image_groupe_onglet" id="image_groupe_onglet_seigneurs"><span class="descripseigneur">Seigneurs</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_religieux"><span class="descripreligieux">Religieux</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_renegats"><span class="descriprenegats">Renégats</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_civils"><span class="descripcivils">Civils</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_disparus"><span class="descripdisparus">Disparus</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_legendes"><span class="descriplegendes">Légendes</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_staff"><span class="descripstaff">Staff</span></div>     
</div>
<div class="groupes"><div class="block-onglets">
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_seigneurs" onmouseover="javascript:change_groupe_onglet('seigneurs');"><img src="https://i.imgur.com/9tOWx28.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_religieux" onmouseover="javascript:change_groupe_onglet('religieux');"><img src="https://i.imgur.com/H16xb9S.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_renegats" onmouseover="javascript:change_groupe_onglet('renegats');"><img src="https://i.imgur.com/HcK5UmS.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><img src="https://i.imgur.com/sGueo1I.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_disparus" onmouseover="javascript:change_groupe_onglet('disparus');"><img src="https://i.imgur.com/VuHXgf8.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_legendes" onmouseover="javascript:change_groupe_onglet('legendes');"><img src="https://i.imgur.com/TbOoeFl.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_staff" onmouseover="javascript:change_groupe_onglet('staff');"><img src="https://i.imgur.com/eX8mjRq.png" /></span>
  </div></div>
<script type="text/javascript">
                        //<!--
                                function change_groupe_onglet(name)
                                {
                                        document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                        document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                        document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                        document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                     document.getElementById('image_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                        document.getElementById('image_groupe_onglet_'+name).style.display = 'block';
                                        anc_groupe_onglet = name;
                                }
                        //-->
</script>
<script type="text/javascript">
                        //<!--
                                var anc_groupe_onglet = 'seigneurs';
                                change_groupe_onglet(anc_groupe_onglet);
                        //-->
          </script>
 
    <!-- BEGIN switch_chatbox_activate -->
   
    <!-- END switch_chatbox_activate -->
  
    <!-- END disable_viewonline -->
    <!-- BEGIN switch_legend -->
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({
    appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
    });
    //]]>
    </script>
    <!-- END switch_fb_index_login -->

Il est à noter que pour le codage du "connected members", on est obligés de passer par un table pour le modifier. Or sa présence dans un table plus grand empêcher le code de s'appliquer. D'où le fait que je ne sois pas passé par un table pour coder le QEEL.

J'ai bien sûr, signé le règlement comme demandé :)
En revanche, je ne vois pas du tout le champs de profil qui ne serait pas renseigné O.o

Merci beaucoup.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 23 Oct 2020 - 17:56

Coucou Pizi,
désolé pour tes soucis personnels, on va donc prendre le temps chère amie.
Bref, comme tu restes avec des pixels, il faut aussi dimensionner la table du qeel et les divs avec les mêmes dimensions Pizi:

Voici le template modifié(tu pourras toujours récupérer le tien sur ton message en cas ou cela
n'irait pas):

Code:
    {JAVASCRIPT}
        <!-- BEGIN message_admin_index -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <!-- BEGIN message_admin_titre -->
        <tr>
        <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
        </tr>
        <!-- END message_admin_titre -->
        <!-- BEGIN message_admin_txt -->
        <tr>
        <td class="row1" rowspan="3" align="center" valign="middle">
        <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
        </td>
        </tr>
        <!-- END message_admin_txt -->
        </table>
        <!-- END message_admin_index -->

        <!-- BEGIN switch_user_login_form_header -->
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td class="row1" align="center">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td valign="top" width="100%" class="row1" align="center">
        <table width="100%">
        <tr>
        <td width="55%" valign="middle" align="right">
        <table class="right">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        <td width="10%" align="center" valign="middle">
        <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
        </td>
        <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect -->
        </form>
        <!-- END switch_user_login_form_header -->

        {CHATBOX_TOP}
        {BOARD_INDEX}
        <!-- BEGIN switch_on_index -->
        <!-- END switch_on_index -->
        <!-- BEGIN switch_user_login_form_footer -->
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td class="row1" align="center">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td valign="top" width="100%" class="row1" align="center">
        <table width="100%">
        <tr>
        <td width="55%" valign="middle">
        <table class="right">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        <td width="10%" align="center" valign="middle">
        <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
        </td>
        <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect -->
        </form>
    <!-- END switch_user_login_form_footer -->
      <!-- BEGIN disable_viewonline -->
        <table class="qeelest" style="width:950px;margin: auto;">
          <tr><img src="https://i.imgur.com/JRgLbDc.png" width="50%;" style="margin-left: 25%; margin-top: 20px; margin-bottom: 10px;" /></tr>
          <tr>
        <div class="qeelestHead" style="width:950px;margin: auto;text-align:center">
        <!-- BEGIN switch_viewonline_link -->
          <span class="qeelesttitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><span id="viewonline">{L_WHO_IS_ONLINE}</span></a></span>
        <!-- END switch_viewonline_link -->
       
        <!-- BEGIN switch_viewonline_nolink -->
            <span class="qeelesttitle">{L_WHO_IS_ONLINE}</span> </div>
        <!-- END switch_viewonline_nolink -->
        </tr></table>
          <div style="width:950px;margin: auto;"><div class="top-gauche"><img src="https://i.imgur.com/UVD7Zmj.png" style="widht: 300px; height: 171px;" />
            <span class="arrivant"><span id="newuser">{NEWEST_USER}</span>
            </span></div>
          <div class="top-droite"><span class="titreco">Ils se baladent en ville</span>
            <div class="blockcoimg">
              <div class="blockco">
                <div class="blockcotxt"><span class="coest"><span id="connect">{LOGGED_IN_USER_LIST}</span></span><br />
            <span class="usersonline">{TOTAL_USERS_ONLINE}</span>
                </div>
              </div>
            </div>
    </div>
    <div class="blocklistimg">
      <div class="blocklist"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
      </div>
      <span class="titrelist">Hors Ligne</span>
            </div>
    <div class="stats">
      <span class="postest"><span id="messages">{TOTAL_POSTS}</span>
      </span>
      <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
              </div>
      <span class="userest"><span id="totalusers">{TOTAL_USERS}</span>
      </span>
      <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
              </div>
            </div></div>
          <script type="text/javascript">
    jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ',''));
    </script>
    <script type="text/javascript">
      document.getElementById('viewonline').innerHTML= document.getElementById('viewonline').innerHTML.replace(/Qui est en ligne/,"Qui a survécu");
      document.getElementById('newuser').innerHTML= document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"<u>Dernier arrivant</u><br />");
      document.getElementById('messages').innerHTML= document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de (.+) message(s?)/,"$1 <br />message$2");
      document.getElementById('totalusers').innerHTML= document.getElementById('totalusers').innerHTML.replace(/Nous avons (.+) membre(s?) enregistrés?/,"$1 <br />membre$2");
      document.getElementById('connect').innerHTML= document.getElementById('connect').innerHTML.replace(/Utilisateurs enregistrés :/,"");
    </script>
    <div class="ongletimg"><div class="contenu-onglets">
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_seigneurs">Responsables d'un ou plusieurs groupes de survivants ou anciens seigneurs avant le Cataclysme. Ils ont tous été reconnus officiellement par la Reine. Leur but : reconstruire le royaume d'Estéria et lui rendre sa splendeur d'antan.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_religieux">Qu'ils croient en un seul ou plusieurs dieu(x), ces personnes ont choisi de consacrer leur vie à leur religion. Amenés à voyager pour certains ou dédiés à leurs fidèles dans un territoire fixe, ils cherchent à asseoir la domination de leur religion, la seule à prêcher la bonne parole.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_renegats">Ce ne sont pas de simples bandits ou pillards. Ces survivants croient pour des raisons qui sont les leurs que l'ancien système est mort et souhaitent profiter du Cataclysme pour instaurer un ordre nouveau où chacun aurait sa place.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_civils">Survivants qui ont repris pour la plupart leurs anciennes fonctions. Ils souhaitent que la vie reprenne son cours normal sans s'intéresser plus que cela aux jeux de pouvoirs. Cela ne les empêche pas pour autant d'avoir un avis sur la question.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_disparus">Cela fait un moment que l'on ne les voit plus sur nos terres, toutefois ils sont encore présents dans les coeurs de chacun. Ils sont susceptibles de pouvoir revenir à tout moment.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_legendes">Comme dans tout royaume, Estéria pleure ses morts. Sans aucun espoir de retour, leurs aventures leur auront prit bien plus que du temps et de l'énergie. Ils ont perdu la vie et sont pleurés des leurs.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_staff">Administrateurs du forum, n'hésitez pas à les contacter pour poser vos questions ou pour signaler toute difficulté ou bug rencontré sur le forum. On vous le promet, ils ne mordent pas.</div>   
      </div></div>
    <div class="descripimg">
      <div class="image_groupe_onglet" id="image_groupe_onglet_seigneurs"><span class="descripseigneur">Seigneurs</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_religieux"><span class="descripreligieux">Religieux</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_renegats"><span class="descriprenegats">Renégats</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_civils"><span class="descripcivils">Civils</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_disparus"><span class="descripdisparus">Disparus</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_legendes"><span class="descriplegendes">Légendes</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_staff"><span class="descripstaff">Staff</span></div>   
    </div>
    <div class="groupes"><div class="block-onglets">
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_seigneurs" onmouseover="javascript:change_groupe_onglet('seigneurs');"><img src="https://i.imgur.com/9tOWx28.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_religieux" onmouseover="javascript:change_groupe_onglet('religieux');"><img src="https://i.imgur.com/H16xb9S.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_renegats" onmouseover="javascript:change_groupe_onglet('renegats');"><img src="https://i.imgur.com/HcK5UmS.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><img src="https://i.imgur.com/sGueo1I.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_disparus" onmouseover="javascript:change_groupe_onglet('disparus');"><img src="https://i.imgur.com/VuHXgf8.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_legendes" onmouseover="javascript:change_groupe_onglet('legendes');"><img src="https://i.imgur.com/TbOoeFl.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_staff" onmouseover="javascript:change_groupe_onglet('staff');"><img src="https://i.imgur.com/eX8mjRq.png" /></span>
      </div></div>
    <script type="text/javascript">
                            //<!--
                                    function change_groupe_onglet(name)
                                    {
                                            document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                            document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                            document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                            document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                        document.getElementById('image_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                            document.getElementById('image_groupe_onglet_'+name).style.display = 'block';
                                            anc_groupe_onglet = name;
                                    }
                            //-->
    </script>
    <script type="text/javascript">
                            //<!--
                                    var anc_groupe_onglet = 'seigneurs';
                                    change_groupe_onglet(anc_groupe_onglet);
                            //-->
              </script>
   
        <!-- BEGIN switch_chatbox_activate -->
     
        <!-- END switch_chatbox_activate -->
     
        <!-- END disable_viewonline -->
        <!-- BEGIN switch_legend -->
        <!-- END switch_legend -->

        {AUTO_DST}

        <!-- BEGIN switch_fb_index_login -->
        <div id="fb-root"></div>
        <script type="text/javascript">
        //<![CDATA[
        FB.init({
        appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
        });
        //]]>
        </script>
        <!-- END switch_fb_index_login -->
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Ven 23 Oct 2020 - 18:32

Bonsoir Phil,

Aucun souci, tu ne pouvais pas savoir :)
Je suis plutôt réactive en général ^^ (sauf le soir et le week-end ahah)

J'ai remplacé le template par celui que tu as modifié et les choses semblent globalement revenues à leur place sur le QEEL excepté l'affichage des groupes (description, image sur le côté et les petites roues).
Sur le téléphone, cela provoque une petite marge à droite mais qui semble s'expliquer par rapport à ce décalage.

Je ne sais pas ce que tu en penses ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 23 Oct 2020 - 18:42

Merci Pizi hinhin .

Pour les groupes :

Il faut englober les divs suivantess ayant ces class:
ongletimg
descripimg
groupes

Dans une div identique aux deux autres:

Code:

<div style="width:950px;margin: auto;">
les trois divs
</div>




je ne fais jamais de tests sur les Cells Pizi,
il faut aussi mettre des styles spécifiques selon la résolution et rotation d'écran et encore ,
c'est un vrai casse tête...

Un peu de lecture pour comprendre et surtout encombrer ta feuille de style:

https://www.alsacreations.com/article/lire/930-css3-media-queries.html
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Lun 26 Oct 2020 - 16:37

Bonjour Phil,

Comme prévu, il n'y a plus de décalage, merci infiniment.
Par contre au niveau du QEEL l'onglet du groupe est un peu décalé sur la droite par rapport à "Ils se baladent en ville".
Normalement les deux doivent avoir leur côté droit aligné.
Je dois modifier via le css pour arranger cela ? (je n'ose plus toucher ahahah !)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 26 Oct 2020 - 16:46

Coucou Pizi,

Comme prévu, il n'y a plus de décalage, merci infiniment.

De rien.


Il faut surement retoucher la css,
au moins a partir de maintenant tout est bien entouré.
En réduisant les valeurs du left ici:

Code:
.stats a 34%

Code:
.ongletimg a 57%

Code:
.descripimg a 88%

Ça devrait être bon Pizi hinhin
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Lun 26 Oct 2020 - 17:33

Phil,

J'ai pu modifier avec tes indications et corriger les éléments :)
Tout est parfait, merci beaucoup.
J'espère que j'aurais moins de mal la prochaine fois :)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 26 Oct 2020 - 18:20

De rien chère amie,

J'espère que j'aurais moins de mal la prochaine fois

Il faut toujours garder espoir Merci .


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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