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

[pizinette]

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:

Mon écran:

Sur mon smartphone en version web:

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

[Kardo]

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.

[pizinette]

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.

[Kardo]

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

[pizinette]

Ah ça a marché pour le trait de la barre de navigation, merci beaucoup
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 ?

[Kardo]

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

[pizinette]

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

[Kardo]

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)

[pizinette]

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

[Kardo]

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.

[pizinette]

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

[Kardo]

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).

[pizinette]

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 ?

[Kardo]

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.

[pizinette]

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]

Up

[Kardo]

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.

[pizinette]

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]

Up

[Riizbaie]

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.

[pizinette]

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

[pizinette]

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