Membres connectés récemment
[PHPBB2] Forum décallé sur la droite
2 participants
Page 1 sur 1 • Partagez
- 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 :
j'ai la PA également en iframe, voici l'iframe :
En te remerciant,
Pizi
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
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:
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;}
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.
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.
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 :
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 :/
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 :
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 :/
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:
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....
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....
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 :)
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 :)
Re coucou Pizi,
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 .
Bref, à part cette partie qui dépasse très légèrement sur la droite:
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 ?
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 .
Bref, à part cette partie qui dépasse très légèrement sur la droite:
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 ?
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é...
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é...
C'est pas grave, as-tu un compte que je puisse voir ce qui cloche...
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:
Puis peut être ajouter les styles suivant sur les class:
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;
}
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 .
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:
Il faut mettre un 100% à la place de 920 px .
Le bloc des partenaires trop collé, mettre le bottom en négatif comme ceci
Et ajouter margin-bottom au bloc des groupes car c'est collé avec la pub
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.
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 .
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.
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.
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.
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.
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):
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 -->
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 ?
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 ?
Merci Pizi .
Pour les groupes :
Il faut englober les divs suivantess ayant ces class:
ongletimg
descripimg
groupes
Dans une div identique aux deux autres:
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
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
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 !)
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 !)
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum