Problème affichage forum en %

4 participants

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

Résolu Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 11:26

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

Beaucoup d'éléments sont en % et s'adaptent lorsque l'on réduit la taille du navigateur :

Avant réduction
Problème affichage forum en % Screen30

Après réduction
Problème affichage forum en % Screen29

J'aimerai que mon forum ne soit pas en %.

Comment gérer sa taille (par exemple si je veux qu'il ait l'apparence de 60% en taille) sans utiliser les %?

Merci d'avance,
Bien à vous


Dernière édition par Ancients le Ven 18 Mar 2016 - 17:58, édité 1 fois
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par FANCH 56 Ven 18 Mar 2016 - 11:33

Bonjour

Essaies en mettant : auto dans la structure des pages.

Problème affichage forum en % Screen34
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 11:44

Bonjour,

Voici le résultat : ça prend tout l'espace.

Problème affichage forum en % Screen31

Le problème reste lorsque je réduis le navigateur, l'espace s'adapte il y a donc d'autres choses en % :

Problème affichage forum en % Screen32

Comment faire varier la taille du forum et d'autres éléments de manière personnalisée? Y a t-il un tutoriel à cet effet?

Merci Fanch pour votre aide,
Bien à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par winatickets Ven 18 Mar 2016 - 12:03

Bonjour

si tu peut mettre ton code css stp , logiquement dedans tu a la taille de ton forum 

amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Problème affichage forum en %

Message par Miettes Ven 18 Mar 2016 - 12:16

Indique juste la largeur que tu veux. Par exemple, tu veux que ton forum fasse 900px de large au lieu de mettre 80% tu mets juste 900
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 15:24

Et bien maintenant que j'ai un CSS propre (non il n'était pas bordélique!) je vais y voir plus clair.

Alors j'aimerai pouvoir réduire comme je veux la taille du forum (comme on le fait dans le panneau d'admin avec les %) mais sans les % parce que je veux pas que mon forum s'adapte. Je n'ai pas de pixel en tête faudra que je test.

J'aimais bien l'affichage entre 60 %et 75%.

Bien à vous (toi)
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par Miettes Ven 18 Mar 2016 - 15:55

J'aimais bien l'affichage entre 60 %et 75%.
Par rapport à quoi ?

Mon 60% ne correspond pas forcément à ton 60% -_-'
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par winatickets Ven 18 Mar 2016 - 16:40

Bonjour ancient 

apparament tu ne ma pas fournie ton css comme demander, si tu veut qu'on t'aide la moindre des choses est de fournir ce qu'on te demande mais sa fait rien voila un peiit teste avec ce code à coller dans ton css :

Code:
#wrap {
  background:#F2F2F2;
  background-clip:padding-box;
  border:1px solid rgba(0, 0, 0, 0.1);
  min-width:950px;
  padding:30px 5px 0px 5px;
}

le mi-width: sera la taille tu forum en largeur comme tu souhaite 60% en px tu met 600px a la place de 950px .
ensuite lle padding:  te sert à midifier la hauteur du début de ton forum en gros tu peut remplacer le 30px par 0.
la couleur qui fait l'espace du padding est : #F2F2F2 
tu peut la changer à la couleur de ton forum si tu utilise le padding .

voila teste et dit moi si c'est bon 

amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 16:45

Bonjour,

Voici ma css :

Code:
/*** --- GENERAL --- ***/

/*** TYPO ***/

@font-face {
    font-family: NSPFONT;
    src: url('http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-light.woff');
}
 
@font-face {
    font-family: NSPFONT_med;
    src: url('http://us.battle.net/d3/static/fonts/exocet/exocet-blizzard-medium.woff');
}

/* Pas de soulignement au survol des liens */
a:hover {
    text-decoration: none!important;
}

/* Couleur de texte des listes déroulantes */
select {
    color: #999999;
}

/* Taille de typo du fil d'Ariane
(nav au-dessus des boutons "nouveau", "répondre", verrouillé) */
h1.page-title {
    font-size: 12px;
}


/*** BOUTONS ***/
a.button1,
a.button2,
button.button2,
input.button1,
input.button2 {
  background: transparent url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png') no-repeat;
  border:none;
  color:#000!important;
  display: inline-block;
  font-size:10px;
  height:31px;
  line-height: 31px;
  width: 106px !important;
}

/*** Champs "rechercher" ***/

#search-box {
    margin-top: 0px!important;
}

/* Champs de saisi du texte */
input.search {
    background: #ffffff!important; 
    border-radius: 5px;
    box-shadow: 0 0 5px #000;
    font: normal 12px/18px Arial, sans-serif;
    padding: 5px 6px;
}

/*** CHAMPS SAISI DE TEXTE ***/
.inputbox {
    color:#00B4FF;
}

/* Ajout de bordure au survol */
.inputbox:hover {
    border: 1px solid #00B4FF;
}


/*** COULEURS ***/

/*Couleur pour les Admins*/
#M14_Color_Admin.inner .postbody .content{
  color: #00B4FF !important;
}

/*Couleur pour les Modos*/
#M14_Color_Modo.inner .postbody .content{
  color: red !important;
}

/*** BLOC FORUM ***/

/* On décale le début du forum de 300px du haut */
#wrap{
  margin-top: 300px;
}

/* On annule le padding sur le bloc qui contient le logo & la barre de nav par défaut */
.headerbar,
#logo {
    padding: 0;
}

/* Pas de couleurs de fond */
/* #wrap = le bloc général du forum */
/* .headerbar = le bloc qui contient le logo + la BDN par défaut */
/* #cp-main .panel = le contenu du bloc "ChatBox" */
#wrap,
.headerbar,
#cp-main .panel {
    background-color: transparent;
}


/*** --- TOOLBAR - NOTIFICATIONS --- ***/

/*Suppression de la couleur de fond des Notifications*/
#fa_notifications{
  background-color: #000000 !important;
  color: #fff !important;
}

/*La partie notification*/
#notif_list{
  bottom: 0% !important ;
  position: fixed !important;
  right: 0px !important;
}

/*Le bouton de fermeture partie Notifications*/
#M14_close_see_all{
  color: red !important;
  cursor: pointer !important;
  height: 10px !important;
  left: 10px !important;
  position: absolute !important;
  text-align: left !important;
  text-decoration: none !important;
  width: 10px !important; 
}

/*** --- FOND --- ***/

/*** VIDEO ***/
#video-background {
 background: url('http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg') repeat-x;
    background-size: cover;
  left: 50%;
    position: fixed;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
    z-index: -100; 
}

/*** --- BARRE DE NAVIGATION --- ***/

/* Supprime les bordures de la BDN */
ul.navlinks{
  border:none;
}

/* L'image de fond */
#BDN {
  background: url('http://i68.tinypic.com/27wzomv.png') no-repeat 0 0;
  height: 111px;
  position: fixed;
  top: 0;
  width: 60%;
}
 
/* La liste de lien */
#BDN.linklist.navlinks li{
  display: inline-block;
  height: 35px;
  margin-top: 19px; /* pour placer comme il faut la liste par rapport à l'image de fond */
  font: normal 13px/35px "NSPFONT_med","Palatino Linotype", "Arial", serif;
  letter-spacing: 2px;
}

/*** --- FOOTER --- ***/

/* On centre le contenu du footer */
#page-footer .inner {
    text-align: center;
}

/*** Liste des liens de bas de page ***/

/* Mettre le bouton "Accueil" hors de l'écran */
.footer-home { 
    left: -500px;
    position: absolute;
    top: -500px;
}

/* On annule le floattant des liens pour qu'ils soient centrés */
#page-footer ul.linklist li.rightside {
    float: none;
}

/*** --- INDEX - HOME ***/

/*** GENERAL ***/
.table-index1,
.table-index2,
.table-index3{
  height: 185px;
    width: 307px;
}

.table-index1 > div,
.table-index2 > div,
.table-index3 > div{
  display: inline-block;
    width: 252px;
    word-wrap: break-word;
    color: #000000
}

/*** IMAGE 1 ***/
.table-index1 {
    background: url('http://i65.tinypic.com/1zluhlj.png') no-repeat center -7px; 
}
 
.table-index1:hover {
    background-position: center -201px;
}

/*** IMAGE 2 ***/
.table-index2 {
    background: url('http://i65.tinypic.com/2h7ib6t.png') no-repeat center -7px;
}
 
.table-index2:hover {
    background-position: center -199px;
}

/*** IMAGE 3 ***/
.table-index3 {
    background: url('http://i67.tinypic.com/257odxy.png') no-repeat center -7px;
}
 
.table-index3:hover {
    background-position: center -199px;
}

/*** INDEX - CATEGORIE ***/

/* Nom des catégories */
.table-title h2 {
    color: #f3e6d0;
    font: normal 18px/1 "NSPFONT","Palatino Linotype", "Arial", serif;
    letter-spacing: -1.5px;
    text-shadow: 0 0 5px #241209;
}

/* Lien / nom des forums */
a.forumtitle {
    font-size: 12px;
}

/*** --- INDEX - QEEL ***/
.qeel {
    background-image:url('http://i84.servimg.com/u/f84/19/42/85/35/fond_a14.png');
}

/* Supprimer l'image "qui est en ligne" par défaut */
.img-whois {
    display: none;
}

/*** --- DANS UN MESSAGE --- ***/

/*** EDITEUR DE TEXTE ***/

/*  Partie supérieur contenant les outils */
 
div.sceditor-toolbar {
    background-color: #131210 !important;
    border-color: #00B4FF!important;
    border-width: 2px!important;
}

/* suppression boutons code, date, heure et mode*/
a.sceditor-button-code,
a.sceditor-button-date,
a.sceditor-button-time,
a.sceditor-button-source {
    display: none;
}

/* Groupes de bouton */
div.sceditor-group {
    background: #333333 !important;
    border: 1px outset #000000 !important;
    border-radius: 5px !important;
}

/* Bouton */
a.sceditor-button {
  background: #777777 !important;
    border-radius: 30px !important;
}

/* Bouton survolé */
a.sceditor-button:hover{
  background: #AD835A !important;
}

/* Bouton actif */
a.sceditor-button.active{
    background: #c2c2c2 !important;
}

/* zone de saisi de message */
#textarea_content {
    min-width: 702px;
}

/* largeur de l'éditeur */
.sceditor-container {
    width: 710px!important;
}

.sceditor-container iframe,
.sceditor-container textarea {
    color: #00B4FF !important;
    font-size:12px !important;
    line-height: 16px;
    width: 100% !important;
}

/*** REPONSE RAPIDE ***/
 
.sceditor-container.ltr.sourceMode,
.sceditor-container.ltr.wysiwygMode  {
    background-color: #12110f !important;
    border-color: #131210!important;
    max-height: 450px!important;
    width:100% !important;
}

/*** CITATION ***/

blockquote {
    background-color: #1b1915!important;
    border-color: #999999!important;
    border-width: 1px!important;
    border-style: double;
}

/*** PAGINATION ***/

/* Mise en page des liens */
.pagination span a:active,
.pagination span a:link,
.pagination span a:visited {
    background-color: #12110e;
    border: 1px solid #000000;
    color: #AD835A!important;
    display: inline-block;
    font-size: 9px;
    text-decoration: none;
}

/* Le texte en gras */
.pagination span strong{
    background-color: #12110e;
    border: 1px solid #000000;
    color: #999999;
    font-size: .9em;
    text-decoration: none;
}

/*** BLOC SIGNATURE ***/
.signature_div {
    color: #00B4FF!important;
    font: normal 12px/1 "Arial", sans serif!important;
    text-align: center!important;
}

/* Taille max des images dans les signatures */
.signature_div img{
    max-width: 500px !important;
    max-height: 200px !important;
}

/*** MESSAGE ***/
/* (Colonne du posteur + du contenu du message) */
.post {
    background: #12110f url('http://eu.battle.net/d3/static/images/layout/cms/post_bg.jpg');
    background-size: cover;
  border:2px solid #000;
}

/*** ZONE DU MESSAGE ***/
.post .postbody .content {
  line-height: 1.7em;
    margin-left: 10%!important;
    margin-right: 10%!important;
}

/* Hover sur les posts hide buttons */
.postbody ul.profile-icons {
  opacity: 0;
}

.post:hover .postbody ul.profile-icons {
    opacity: 1;
}

/*** PARTIE CONCERNANT LE POSTEUR ***/
.postprofile {
    border-color: #322e2e;
    font: normal 11px/1 "Arial", sans serif!important;
  padding: 5px 0 0 8px;
    text-align: center;
}

/* Aligner le texte "Battle Tag" et l'image */
.postprofile .label,
.postprofile .label img[alt="Battle Tag"]{
  display: inline-block;
  vertical-align: middle;
}

/* Icone des profils (profil, mp, mail, site, ...) */
ul.profile-icons {
    list-style: none;
    margin-top: 10px;
    margin-right: 0px!important;
}

/*** --- AUTRES --- ***/

/* Position des images "icône du sujet" */
dd.dterm {
    background-position: 85%!important;
}


/*** TWITCH ***/

/* L'image du bouton */
#M14_btn_slide:before{
  background: url('http://i84.servimg.com/u/f84/19/42/85/35/14573010.png') no-repeat;
  content: "";
  height: 64px;
  left: 200px;
  position: absolute;
  width: 64px;
}

/*Le bloc du slide*/
#M14_btn_slide{
  height:64px;/*on donne une hauteur toujours en relation avec la hauteur de l image*/
  left:-205px;/*on cache le bloc*/
  position:fixed;/*on fixe le slide*/
  text-align:center;/*on centre le lien*/
  top:60px;/* on le positionne a 60px du haut du fofo*/
  width:200px;/*on lui donne une largeur en relation avec l image*/

  /*La transition*/
  -webkit-transition: left 0.5s ease-in-out;
  -moz-  transition: left 0.5s ease-in-out;
  -o-    transition: left 0.5s ease-in-out;
        transition: left 0.5s ease-in-out;
}

/*Le slide effectue par le script*/
#M14_btn_slide.margin{
  left: 0;
}

/* Iframe dans le bouton */
#frametwitch {
  border: 1px solid black;
  height: 100%;   
  width: 100%;
}

/*** MISE EN PAGE PARTIE PUB FA (haut du forum) ***/
div#main-content{
    background: url('http://oi63.tinypic.com/1zldtgl.jpg') repeat;
    border: 2px solid #000;
    border-radius: 10px;
    padding:5px;
}

/*** MESSAGE PRIVE ***/

/* On redonne leur taille de base aux images */
form[action="/privmsg?folder=inbox"] .postprofile img {
    width: inherit;
    height: inherit;
}
 
/* Mais on fait en sorte que l'avatar fasse 64px*64px */
form[action="/privmsg?folder=inbox"] .postprofile > dt > img:first-child,
.postprofile dt img {
    background-color: #000;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    border: 1px solid #483A30;
    border-bottom-color: #3D2F26;
    border-radius: 3px;
    border-top-color: #887465;
    height: 64px;
    overflow: hidden;
    padding: 1px;
    width: 64px;
}

/*** MODIFICATION PROFIL ***/

/* couleur des onglets (informations, préférences...) */
#tabs .activetab a span {
    color: #00B4FF;
}

/* Couleur des liens survolés "Nom d'utilisateur, adresse mail, mdp" */
fieldset dl:hover dt label {
    color: #FAF8F7;
}

/*** GESTION OPACIY ***/

/* Dans les messages (.post) */
/* Pour le tableau contenant les widgets du portail (.portal) */
.portal,
.post {
    opacity: 0.9 !important;
}

/*** MENTION TAG (@ #) ***/
a.mentiontag.tooltipstered {
    color: #00B4FF;
}

Bien à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par winatickets Ven 18 Mar 2016 - 17:12

Bonjour regarde bien dans ton code tu a sa :

code a écrit:/*** BLOC FORUM ***/

/* On décale le début du forum de 300px du haut */
#wrap{
  margin-top: 300px;
garde ton code de coté et essaye de le remplacer par ce que je t'es dit stp !


Code:
#wrap {  background:#F2F2F2;  background-clip:padding-box;  border:1px solid rgba(0, 0, 0, 0.1);  min-width:950px;  padding:30px 5px 0px 5px;}

le mi-width: sera la taille tu forum en largeur comme tu souhaite 60% en px tu met 600px a la place de 950px .
ensuite lle padding:  te sert à midifier la hauteur du début de ton forum en gros tu peut remplacer le 30px par 0.
la couleur qui fait l'espace du padding est : #F2F2F2 
tu peut la changer à la couleur de ton forum si tu utilise le padding .

voila teste et dit moi si c'est bon 

amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 17:25

Bonjour,

J'ai laissé votre code en place pour que vous puissiez regarder. A part enlever la marge du top, je ne vois pas de changement.

Bien à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par winatickets Ven 18 Mar 2016 - 17:53

Bonjour tu a mis à 600px ? dans le code que je t'ai fournit et en meme temp dans le panneau dadmin dans la taille mes le même nombre

di moi si ses bon amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 17:56

Bonjour,

Ça m'a l'air de fonctionner! Par contre le 600 ne correspond pas au 60% (cela rend bcp trop étroit) j'ai donc mit 950px.

Merci à vous, je reviens vers vous si un problème m'apparait.

Bien à vous
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage forum en %

Message par winatickets Ven 18 Mar 2016 - 17:57

ba voila jsuis content tu voi pourtant fait pas partie du staff mais quelques connaissance , sa fait plaisir surtout mais en résolu dans ton premier message amicalement serge
avatar

winatickets
****

Messages : 221
Inscrit(e) le : 20/02/2015

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

Résolu Re: Problème affichage forum en %

Message par Ancients Ven 18 Mar 2016 - 17:58

Merci Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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