decalage avec les widget du forum et

[Jordan Bruyneel]

Détails techniques

Version du forum : phpBB2
Poste occupé : Modérateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : aujourdhui
Lien du forum : http://deliriumvitae.forumactif.org/

Description du problème

Salutations,

je tiens d'abord a dire que j'ai cherché des solutions sur le forum, mais je n'en ai pas trouvée c'est pourquoi je me permet de demander de l'aide. j'ai plusieurs soucis avec les widget que les autres ont aussi je suppose.

quand je met un widget, tout se decale et plus rien n'est centré

exemple mon forum avec un widget :
http://www.noelshack.com/2016-08-1456325155-avec.png

exemple mon forum sans widget :
http://www.noelshack.com/2016-08-1456325191-sans-w.png

en plus on peut voir que quand j'active les widget, il y a un truc vide au dessus de ma partie centrale qui apparait et qui disparait quand je desactive les widgets.

donc ma question :

- est il possible d'eviter ce decalage ? Si on met un widget de l'autre coté, tout se recentre, cependant c'est moche. ou alors un widget invisible ?

- Est il possible de supprimer ce truc au milieu qui s'ajoute quand j'active les widgets?

merci de votre aide

PS : je suis pas un boss en code, j'ai certaines connaissances mais des explications detaillées seront les bienvenues :p




SOLUTION

il faut inséré ce code dans le CSS :

Code:

#left{position: absolute;
top:50px;
left: 5px;
}

en modifiant le chiffre devant top (distance a partir du haut de page) et le chiffre devant left (distance a partir de la gauche) votre widget sera placé ou vous voulez

[winatickets]

Bonsoir

Peut tu mettre ton code css stp , le soucis est dedans qu'on puisse jeter un oeil en gros la largeur de ton forum est trop petit

amicalement serge

[Jordan Bruyneel]

merci de ta réponse, voici

Code:

body
{
background-color: #131313;
background-position: top center;
background-repeat: repeat-y;
}

a
{
outline: none;
}

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

.bodylinewidth
{
width: 1100px;
}

#page-body
{
margin-top: 100px;
}

.forumline
{
max-width: 850px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(http://img15.hostingpics.net/pics/990052Sanstitre1.png);
background-repeat: repeat;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px #f0b643;
box-shadow: 1px 1px 2px #f0b643;
padding: 5px;
margin-bottom: 10px;
}

a.forumlink
{
display: block;
padding: 4px;
border-bottom: 2px solid #1b1b1b;
}
a.forumlink:hover
{
text-decoration: none !important;
margin-left: 20px;
font-style: italic;
}

table
{
max-width: 850px;
margin: auto;
}

#i_logo
{
margin-top: -18px;
margin-bottom: -40px;
}

.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;
}


.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}

#page-footer
{
background-image: url();
background-repeat: no-repeat;
background-position: top center;
width: 980px;
height: 400px;
margin-bottom: -18px;
}

#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}


/* truc avec l'image devant pseudo */

a span[style="color:#8200FC"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456329264-nebuleux3.png) no-repeat;
padding-left:15px;}

a span[style="color:#FFBF00"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456397764-pourpre.png) no-repeat;
padding-left:15px;}

a span[style="color:#DE1B1B"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456397712-hv.png) no-repeat;
padding-left:15px;}

au depart j'ai mit que mon CSS n'etait pas modifié, je l'ai modifié hier pour juste un petit truc avec les pseudos.

j'ai compris le truc qui il y avait au dessus de ma partie centrale, en fait c'est une zone de pub. comme j'avais adblock cette partie etait vide du coup je voyait juste le cadre et je me demandais pourquoi il etait là. Apres pourquoi est il juste present lorsqu'on met les widget ? Possibilité de le retirer ?

[winatickets]

Bonjour

Alors sa vient bien d'un code ecoute attentivement ceci , en faite la je te met le css corrigé, tu va le mettre dans panneau admin-affichage-couleur-css ensuite en dessous je te donne une info !!

Code:

body
{
background-color: #131313;
background-position: top center;
background-repeat: repeat-y;
}
 
a
{
outline: none;
}
 
a:link
{
text-decoration: none !important;
}
 
.bodylinewidth
{
width: 1100px;
}
 
#page-body
{
margin-top: 100px;
}
 
.forumline
{
max-width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(http://img15.hostingpics.net/pics/990052Sanstitre1.png);
background-repeat: repeat;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px #f0b643;
box-shadow: 1px 1px 2px #f0b643;
padding: 5px;
margin-bottom: 10px;
}
 
a.forumlink
{
display: block;
padding: 4px;
border-bottom: 2px solid #1b1b1b;
}
a.forumlink:hover
{
text-decoration: none !important;
margin-left: 20px;
font-style: italic;
}
 
table
{
max-width: 850px;
margin: auto;
}
 
#i_logo
{
margin-top: -18px;
margin-bottom: -40px;
}
 
.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;
}
 
 
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
 
#page-footer
{
background-image: url();
background-repeat: no-repeat;
background-position: top center;
width: 980px;
height: 400px;
margin-bottom: -18px;
}
 
#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}
 
 
/* truc avec l'image devant pseudo */
 
a span[style="color:#8200FC"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456329264-nebuleux3.png) no-repeat;
padding-left:15px;}
 
a span[style="color:#FFBF00"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456397764-pourpre.png) no-repeat;
padding-left:15px;}
 
a span[style="color:#DE1B1B"] strong {
background:url(http://image.noelshack.com/fichiers/2016/08/1456397712-hv.png) no-repeat;
padding-left:15px;}

Infos: ligne 30 ce code:

Code:

max-width: 90%;

Tu peut changer le chiffre et t'amuser à valider pour tester ta largeur du forum et quand elle te convient ses gagner !

amicalement serge

[FANCH 56]

Bonsoir

Si c'est un widget à installer sur la page d'accueil, c'est normal, que cela décale vers la droite ton forum.
Si tu as un portail, tu mets les widgets sur la portail, et tu mets le lien de ton forum, direction ton portail.

[winatickets]

Bonsoir fanch

ta réponse : Si c'est un widget à installer sur la page d'accueil, c'est normal, que cela décale vers la droite ton forum.

ma réponse: tu te trompe s'est la taille de sont forum qui était trop petite ( je parle largeur du forum initial) juste à l'agrandir pour que sa soit agréable. donc pas la peine d'aller sur le portail ou autre alors qu'il à la solution tout simple sur le précédent poste

amicalement serge

[Jordan Bruyneel]

Bonjour,

serge, j'avais compris ton CSS, en gros tu pensais que le % de mon forum n'était pas à 100%. hors il l'est déjà, je peux meme régler ce % directement dans mon PA sans devoir toucher au CSS.

Franch, je comprend pas trop la logique, pourquoi ne pourrait t'on pas garder le ''forum'' a sa place et forcer le widget à se caler à coté ? car c'est pas comme si mon forum prenait toute la largeur de ma fenêtre

En tout cas, merci de se pencher sur mon cas !

[winatickets]

Bonjour jordan

Attention jordan le faite qu'il soit à un certain pourcentage dans le panneau d'admin , na rien avoir avec le css si surtout lui à été modifié, donc une question:

A tu essayer comme je te les montré de mettre le code rectifié du css, et au passage si oui dans le panneau d'admin il est à combien en % merci amicalement serge

[◦Jay◦]

Bonjour Jordan Bruyneel, pour déplacer votre widget, ajoutez ce code à votre CSS :

Code:

#left{position: absolute;
top:50px;
left: 5px;
}

Vous pouvez régler la hauteur en changeant les valeurs de top:50px puis la marge sur le côté en changeant les valeurs de left: 5px;

Bien à vous.

[Jordan Bruyneel]

bonjour à tous.

et le gangant est : JAY !

winaticket, j'ai essayé avec ton code en entier mais cela ne fonctionne pas. quand je met 100%, j'ai ce que j'ai de base, donc rien ne change. j'ai pensé que le pourcentage dans le PA prenait le dessus sur celui du CSS, fin qu'il avait priorité quoi. mais merci d'avoir essayé de m'aider.

Jay ca fonctionne niquel, avec ca je peux placer ou je veux mon widget au px près niquel !

merci à tous en tout cas !

je vais editer mon premier message avec la solution pour les prochains

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton