Problème de scale d'image + Agenda

3 participants

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

Résolu Problème de scale d'image + Agenda

Message par Karnus Mar 11 Jan 2022 - 17:59

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 08/01-2021
Lien du forum : https://avefortuna.forumactif.com/forum

Description du problème

Bonjour Smile

J'ai crée il y a quelques temps un forum pour mon association de JDR et Wargames, et nous avons un petit soucis et une requête...

Le soucis: Deux de nos membres ont un aperçu du forum qui n'est pas comme les autres, je m'explique:
L'image en background n'est pas proportionnée et ca ne ressemble plus a rien, tout est décalé.
Chez l'un de ces deux membres, la résolution de son pc est de 1366x768 (avant qu'elle ne me le dise je savais même pas que c'était possible...), du coup est ce que le probleme viens de là ??? Et pourquoi l'image ne se scale pas automatiquement ? Du coup j'avais trouvé un code pour faire un autoscale mais le seul résultat est une disparition pure et simple du background. Du coup comment faire ? Et ce probleme d'affichage est le même si on tente de visualiser le forum sur un portable en version web (je sais pas si je suis très clair...)

La requête: Nous avons activé le calendrier, et nous aimerions pouvoir le mettre au milieu de la page en haut de l'index du forum (là où se trouve la chatbox lorsqu'elle est activée) pour en avoir une meilleure visualisation. Là aussi j'ai tenté des codes trouvés ici mais celà m'affiche seulement un double "null", et étant une grosse bille en prog... Laughing

Si une âme charitable pouvais venir à mon aide... Merci I love you I love you
Karnus

Karnus
Nouveau membre

Messages : 5
Inscrit(e) le : 11/01/2022

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

Résolu Re: Problème de scale d'image + Agenda

Message par Toryudo Mar 11 Jan 2022 - 18:23

Bonjour !
Pour votre soucis, ajouter background-size: cover; à l'élément body, dans votre CSS personnalisé, devrait suffire. Cette propriété permet au background de s'adapter à la résolution, de s'agrandir ou de rétrécir en fonction de la résolution de l'écran. Voilà le code :
Code:
body {
  background-size: cover;
}

Pour la requête, est-ce que vous pourriez nous montrer le code que vous avez testé ?
Si quelque chose existe, autant de ne pas réinventer la roue et juste regarder ce qui a bien pu mal se passer. Mais si le code n'était pas adapté ou ne fonctionne vraiment pas, nous pourrons vous confectionner quelque chose, sans problème !
Toryudo

Toryudo
***

Masculin
Messages : 110
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de scale d'image + Agenda

Message par Oka.mi Mar 11 Jan 2022 - 18:30

Problème de scale d'image + Agenda 4qhGdLE
Bonjour et bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Pour votre autre question, je vous invite à poster dans un sujet distinct afin de faciliter les recherches ultérieures.

Merci de votre compréhension,


Problème de scale d'image + Agenda 1213Donnez un titre explicite Problème de scale d'image + Agenda VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Problème de scale d'image + Agenda 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Problème de scale d'image + Agenda FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2150
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de scale d'image + Agenda

Message par Karnus Mar 11 Jan 2022 - 18:31

Pour le code utilisé, c'était celui là, trouvé sur ce forum dans un vieux sujet datant de 2015 Smile

Code:
jQuery(function($){
   if(typeof _userdata.page_desktop === "undefined"){
      $('#page-body').prepend('<div class="calendar" style="display:none;"></div>');
      var d = new Date(), j = d.getDate();
      $('.calendar').load('/calendar table.forumline:nth-child(4)', function(){
         $('span.genmed').each(function(){ var today = $(this).text().match(/\d{2}/); if(today == j) $(this).addClass('thisweek'); });
         var h = $('.thisweek').closest('table[height]').parents('tr').html(), day = $('.thisweek').closest('table[height]').parents('td').html();
         $('.calendar').html('<table><tr><td colspan="7" class="day">'+day+'</td></tr><tr class="week">'+h+'</tr></table>').fadeIn();
         $('a[onmouseover]').on('mouseover', function(){ $('body>div').css('z-index', '10000') });
         $('.week table[height] a.genmed').each(function(){
            var $this = $(this), link = $this.text(), not_anniv = $this.prev('img').hasClass('sprite-tiny_topic'), short_link = link.substr(0, 25)+'...';
            if(not_anniv) $this.text(short_link);
         });
      });
   }
});

Pour le body du CSS, j'ai rien compris Laughing  Je met ca où ?
Merci en tout cas de vous pencher sur mon cas Smile Ca fait plaisir de l'entraide Wink

EDIT: ok j'ai compris, j'ai ajouté le CSS, quand j'ouvre la page sur mobile (version web donc), la background s'affiche une fraction de seconde, a la bonne taille (donc bonne nouvelle) puis disparait pour laisser un fonc blanc (moins bonne nouvelles Laughing )
Karnus

Karnus
Nouveau membre

Messages : 5
Inscrit(e) le : 11/01/2022

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

Résolu Re: Problème de scale d'image + Agenda

Message par Toryudo Mar 11 Jan 2022 - 19:12

D'accord pour le script, vous allez pouvoir le remplacer par celui-ci, plus simple :
Code:
$(function(){
   $('#page-body').prepend('<div id="calendarForum"></div>');
   $('#calendarForum').load('/calendar #main-content #calendar');
});

Concernant le background, il fonctionnait bien sur téléphone avant ? Est-ce que vous avez plusieurs navigateurs pour tester si ça fonctionne mieux sur d'autres que celui que vous utilisez ? Je vais essayer de réfléchir à une autre solution en attendant, parce que je n'arrive de toute façon pas à constater sur PC...
Toryudo

Toryudo
***

Masculin
Messages : 110
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de scale d'image + Agenda

Message par Karnus Mar 11 Jan 2022 - 19:21

Alors, le code marche et ca c'est fantastique !!! Mais ca prend une place folle, serait il possible (j'ai l'impression de surabuser) de modifier la taille pour qu'il soit vraiment plus petit ? Genre taille de la tchatbox ?

Concernant le background, oui auparavant il était visible sur mobile, mais à la rigueur si c'est que sur mobile j'en ferai pas une maladie, il y a le pwa pour ca. J'attend surtout une réponse des intéressés voir si le problème est résolu et je reviens vers vous dés que j'en sais plus (probablement ce soir ou demain).

Merci en tout cas Smile
Karnus

Karnus
Nouveau membre

Messages : 5
Inscrit(e) le : 11/01/2022

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

Résolu Re: Problème de scale d'image + Agenda

Message par Toryudo Mar 11 Jan 2022 - 21:39

Hop, vous pouvez ajouter ce CSS pour faire en sorte que ce calendrier prenne moins de place :
Code:
#calendarForum .panel p {
  margin-bottom: 0;
  font-size: 11px;
}
#calendarForum #calendar ul {
  height: 50px;
  font-size: 12px;
}

Il est encore assez grand, mais j'ai peur qu'on ne puisse plus tout voir si on le diminue encore...
En tout cas, vous pouvez jouer sur ces valeurs : font-size, c'est la taille de la police (soit des dates, soit des événements), et height, c'est la taille de chaque case date. On pourra éventuellement modifier d'autres petits éléments, je vous laisse proposer en fonction de ce que vous voulez comme rendu !
Toryudo

Toryudo
***

Masculin
Messages : 110
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de scale d'image + Agenda

Message par Karnus Mer 12 Jan 2022 - 12:19

Salut Smile
Alors pour le calendrier, c'est nickel !!

Pour le background ça donne ça:

https://i.servimg.com/u/f72/20/37/42/98/receiv10.jpg

La barre de navigation (je crois que c'est ça ? Accueil, login, toussa) qui est coupée en 2, le logo central trop gros, ... Et sur mobile background blanc, mais il apparaît l'espace d'une demi seconde. Mais y a du (beaucoup) mieux, merci beaucoup Wink
Karnus

Karnus
Nouveau membre

Messages : 5
Inscrit(e) le : 11/01/2022

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

Résolu Re: Problème de scale d'image + Agenda

Message par Toryudo Jeu 13 Jan 2022 - 17:59

Pour le menu sur deux lignes et le logo, on pourrait imaginer mettre ce CSS :
Code:
@media screen and (max-width: 1600px) {
  #logo img {
    max-width: 400px;
  }
  .mainmenu img {
    max-height: 100px;
  }
}
Ça permet de diminuer la taille des images quand la résolution de l'écran est inférieure à 1600x??? (ce que vous pourrez également voir en modifiant la fenêtre du navigateur)... mais c'est un peu arbitraire, ce sont des valeurs qui sont peut-être correctes pour une résolution, mais pas optimales pour toutes. C'est moins pratique que le cover sur le background, qui lui, s'adapte tout seul comme un grand.

Au pire, vous pouvez essayer avec d'autres valeurs un peu comme vous le voulez, je sais juste que le max-height: 100px; sur le .mainmenu img a l'air optimisé pour toutes les résolutions, il ne passe plus jamais à la ligne grâce à ça !
Toryudo

Toryudo
***

Masculin
Messages : 110
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de scale d'image + Agenda

Message par Karnus Jeu 13 Jan 2022 - 21:11

Et bah c'est super !!! Ca marche nickel !! Merci beaucoup !!
Karnus

Karnus
Nouveau membre

Messages : 5
Inscrit(e) le : 11/01/2022

Voir le profil de l'utilisateur https://avefortuna.forumactif.com/forum
Karnus 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