Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Apparence des codes modifiés selon la résolution d'écran des utilisateurs

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

Résolu Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 10:44

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :
Écran de mon co-admin:
Apparence des codes modifiés selon la résolution d'écran des utilisateurs Unknown
Mon écran:
Apparence des codes modifiés selon la résolution d'écran des utilisateurs Unknown
Sur mon smartphone en version web:
Apparence des codes modifiés selon la résolution d'écran des utilisateurs IMG_3420
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis le début de l'installation des codes
Lien du forum : http://esteria.forumactif.com

Description du problème

Bonjour à tous,

Je reviens vers vous pour une nouvelle difficulté :

J'ai remarqué il y a un moment, que j'avais des problèmes de résolution entre ce que je code sur mon pc de bureau et ce qui s'affiche ensuite sur mon ordinateur portable, mon téléphone et l'écran de mon co-admin. Initialement, j'avais ce souci pour la bannière mais a priori j'ai réussi à régler le souci.

Toutefois, le souci se pose toujours pour la barre de navigation, le bouton de notifications et les catégories notamment (le QEEL n'étant pas encore codé).

Comment est-il possible de faire pour que l'apparence que j'ai du forum sur un support soit identique pour d'autres supports de résolution différente ?
En recherchant une solution, j'ai lu qu'il fallait essentiellement coder le positionnement avec des relatives et absolute et c'est ce que j'ai fait.

Voici le CSS correspondant :

Code:
/******************************************************
         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;
}

/* Mise en page du bouton Notification */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
  display:block!important;
  position:absolute;
  top:52em;
  right:10px;
  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:650px!important;
  right:100px;
  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;
  padding:5px!important;
  font-size:12px!important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
  color:#ffffff;
}
/******************************************************
         NAVIGATION
*******************************************************/
.navigest
{
  height: 65px;
  background-color:#ffffff;
}
.est_navig
{
  display: flex;
  height: 36px;
  background-color: #ffffff;
  justify-content: center;
  margin: auto;
  border-bottom: 1px solid #314E70;
  margin-bottom: -200px;
}
.est_navig a
{
  font: 16px 'Playfair Display', sans serif;
  color: #314E70;
  text-transform: uppercase;
  text-align: center;
  padding: 0 15px;
  transition: all 0.2s linear;
  line-height: 52px;
}
/***********************************************************
         HEADER
***********************************************************/
body
{
  background-color: #D4E5E4;
}
.bodylinewidth
{
  width: 950px;
  margin: 0 auto;
}
#i_logo {
  width: 100%;
  margin-top: -30px;
  margin-bottom: -52px;
}
.bodyline
{
 width: 950px;
 padding: 0;
}
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;
    }

Merci beaucoup par avance pour votre aide Smile


Dernière édition par pizinette le Jeu 20 Fév 2020 - 17:46, édité 1 fois
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 14:25

Pour la ligne qui passe au milieu du texte, le fait de passer la hauteur de la div.est-navig (vu que la ligne est tracée avec sa border bottom) d'une valeur en px à une valeur en % devrait permettre un affichage plus correct :
Code:
.est_navig
{
  display: flex;
  height: 75%;
  background-color: #ffffff;
  justify-content: center;
  margin: auto;
  border-bottom: 1px solid #314E70;
  margin-bottom: -200px;
}

Pour ce qui est des notifications, la position est absolue donc elle devrait être la même pour tous les supports, cependant sa position depuis le haut (top) est en "em", qui est une unité relative à la taille de la police de caractère, ce qui fait que cette position peut varier en fonction de la taille des polices de caractères du support.

Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 14:54

Bonjour Kardo,

Merci beaucoup pour ta réponse.
J'ai modifié le height pour 75%. Si ça rend bien sur mon smartphone, c'est trop espacé sur l'ordinateur et si je le règle bien sur l'ordinateur (à 60%) ça nous fait de nouveau la barre sur le texte sur le smartphone... Mon co-admin n'étant pas là je n'ai pas pu regarder ce que ça faisait sur son ordinateur.

Pour le bouton de notification, ça faisait la même chose avec les pixels, j'ai lu justement que dimensionner en em permettait une adaptation au support donc j'ai essayé. Je l'ai remis en pixels du coup mais comme tu peux le constater, j'ai toujours le même souci d'un support à l'autre.
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 15:29

En y regardant de plus près, j'ai remarqué qu'il y avait des images vides dans la navigation essayes de voir ce que ça donne en les retirant ou en ajoutant :
Code:
.est_navig a img{
    display:none;
}

Pour les notifications tu souhaites les afficher à quel endroit ? J'ai peur de ne pas bien comprendre...
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 15:36

Ah ça a marché pour le trait de la barre de navigation, merci beaucoup cheers
C'est le fait d'avoir mis dans la gestion des images les éléments de la navigation vides que ça a créé ça ?

Du coup, pour la notification ou les catégories, c'est dû à la même chose ?
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 15:40

C'est possible que ça soit ça, bien que vide, la balise image restait et donc les styles qui lui sont propres aussi
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 15:43

Parce que pour le bouton de notification j'ai toujours le souci.
C'est comme si sur le smartphone, le forum était zoomé. Il n'y a pas le même espace sur les côtés du forum (à gauche et à droite du message d'accueil et des catégories) que sur l'ordinateur.
Du coup là par exemple je tente de positionner le bouton notification et quand je le mets bien sur l'ordi, sur le smartphone je l'ai sur le message d'accueil...
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 15:57

Pour la position horizontale, tu devrais essayer de changer ton "right" pour une position relative à la taille de l'écran, par exemple avec "right:10vw" tu seras à 10% de la droite de l'écran.

vw = "view width", soit la largeur de l'écran et ça valeur est un pourcentage (100vw = 100% de la largeur de l'écran)
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 16:03

Du coup toutes mes valeurs de placement, je devrais mettre à chacun des valeurs en vw plutôt qu'en pixels ?
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 16:10

J'ai bien peur que ça puisse différer suivant les cas, notamment avec la position abosule/relative et d'autres facteurs peuvent entrer en compte suivant ce que tu souhaites obtenir, c'est ce qui complique un peu le responsive.
Sinon il faudrait faire des css qui changent en fonction de la taille de l'écran (les media queries), mais ça serait plus long à expliquer.
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 16:17

Ah j'ai lu quelque chose là dessus.
C'est le code où on considère un max-width et un min-width ?
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Ven 7 Fév 2020 - 16:25

Exact !
En résumé, les styles, dans la media query la plus basse dans le css qui remplit les conditions d'affichage, écraseront ceux définit plus haut dans le code (dans le css de base ou dans les media queries précédentes).
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Ven 7 Fév 2020 - 17:06

Donc il faudrait que j'ajoute en plus de mon css les éléments de position pour les différents écrans possibles.
C'est bien ça ?
Comment on peut savoir quoi mettre du coup sans forcément connaître les résolutions d'écran des utilisateurs ?
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Lun 10 Fév 2020 - 15:47

Rien ne t'obliges à tout changer, les media-queries sont plus pour des gros changement d'apparence en fonction des écrans (un menu horizontal qui devient un "menu hamburger" par exemple), sinon essaye de jouer avec les tailles relatives et ça devrait suffire dans la majorité des cas.
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Lun 10 Fév 2020 - 16:27

Je t'avoue que je les connais de nom mais je ne les ai jamais utilisés :/
Je ne sais pas trop comment ça marche.
Te serait-il possible de m'aider à les coder s'il te plaît ?
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Mar 11 Fév 2020 - 12:18

Up Smile
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Kardo le Mar 11 Fév 2020 - 14:10

Comme je l'ai dit, tu peux très bien faire un forum s'adaptant aux différentes tailles d'écrans sans utiliser de media-queries, l'utilisation de tailles et positions relatives suffisant pour la grande majorité des cas, je n'aurais pas le temps de t'aider là dessus, mais il existe beaucoup de tutos sur le net assez clairs.
Kardo

Kardo
**

Messages : 86
Inscrit(e) le : 06/12/2019

Voir le profil de l'utilisateur https://www.forum.forumactif.com
Kardo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Mer 12 Fév 2020 - 21:42

J’y pensais mais comme je suis sur un forum phbb2. N’est-il pas possible de gérer ce positionnement en utilisant le codage en tableau?
Parce que j’ai voulu coder l’apparence de mes messages et ça me fait toujours ces soucis alors que je ne positionne qu’avec du relative et de l’absolute :/
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Sam 15 Fév 2020 - 9:27

Up Smile
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par Riizbaie le Sam 15 Fév 2020 - 15:00

Hello,

durant très longtemps, j'utilisais des relatives et des absolute jusqu'au jour où j'ai découvert flex.
je te conseille de regarder de ce coté. Pour le moment, je n'ai pas le temps de jeter un oeil sur tes codes. Travaillant sur la maj de mon forum + une commande de codage. Mais display:flex aide beaucoup pour les différentes résolutions.
Riizbaie

Riizbaie
***

Messages : 101
Inscrit(e) le : 27/09/2016

Voir le profil de l'utilisateur https://elastic-fantastic.forumsrpg.com/
Riizbaie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Lun 17 Fév 2020 - 17:03

Je vais regarder, merci beaucoup.
Je reviens vers vous pour vous dire si ça a marché ou non.
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence des codes modifiés selon la résolution d'écran des utilisateurs

Message par pizinette le Jeu 20 Fév 2020 - 17:45

Bonjour,

Après vérifications, j'ai changé tous mes positionnement absolute en relative et je n'ai plus le problème.
Merci encore pour votre aide cheers
pizinette

pizinette
****

Féminin
Messages : 431
Inscrit(e) le : 22/01/2008

Voir le profil de l'utilisateur http://esteria.forumactif.com
pizinette a été remercié(e) par l'auteur de ce sujet.

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


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