Problème de scale d'image + Agenda
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème de scale d'image + Agenda
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
BonjourJ'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...
Si une âme charitable pouvais venir à mon aide... Merci
Re: Problème de scale d'image + Agenda
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 :
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 !
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 !
Re: Problème de scale d'image + Agenda
Bonjour et bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
Pour votre autre question, je vous invite à poster dans un sujet distinct afin de faciliter les recherches ultérieures. Merci de votre compréhension, |
Donnez un titre explicite à votre sujet pour améliorer son référencement Remerciez le message qui vous a aidé pour le mettre en évidence Cochez lorsque votre problème est résolu pour faciliter le travail des modérateurs L'aide par MP n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre |
Re: Problème de scale d'image + Agenda
Pour le code utilisé, c'était celui là, trouvé sur ce forum dans un vieux sujet datant de 2015
Pour le body du CSS, j'ai rien compris Je met ca où ?
Merci en tout cas de vous pencher sur mon cas Ca fait plaisir de l'entraide
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 )
- 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 Je met ca où ?
Merci en tout cas de vous pencher sur mon cas Ca fait plaisir de l'entraide
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 )
Re: Problème de scale d'image + Agenda
D'accord pour le script, vous allez pouvoir le remplacer par celui-ci, plus simple :
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...
- 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...
Re: Problème de scale d'image + Agenda
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
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
Re: Problème de scale d'image + Agenda
Hop, vous pouvez ajouter ce CSS pour faire en sorte que ce calendrier prenne moins de place :
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 !
- 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 !
Re: Problème de scale d'image + Agenda
Salut
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
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
Re: Problème de scale d'image + Agenda
Pour le menu sur deux lignes et le logo, on pourrait imaginer mettre ce CSS :
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 !
- Code:
@media screen and (max-width: 1600px) {
#logo img {
max-width: 400px;
}
.mainmenu img {
max-height: 100px;
}
}
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 !
Re: Problème de scale d'image + Agenda
Et bah c'est super !!! Ca marche nickel !! Merci beaucoup !!
Sujets similaires
» Problème avec la disposition dimage
» PROBLEME AVEC MON CODE HTML de mon agenda
» Widget ...A votre Agenda
» agenda
» Coller Forum Portail Agenda ...
» PROBLEME AVEC MON CODE HTML de mon agenda
» Widget ...A votre Agenda
» agenda
» Coller Forum Portail Agenda ...
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum