Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Rejoignez le forum, c’est rapide et facile

Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.
Communauté francophone - Jimdo
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

3 participants

Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Gbyman Ven 18 Sep 2015 - 10:11

Bonjour

Je suis nouveau sur Jimdo et je travail actuellement sur la création d'un site.
Pour le Header j'ai pris l'option diaporama. J'ai ensuite créé plusieurs images qui défilent en haut du site.
jusque là tout va bien.

Mais voila un amis a regardé ce que je testais et il a remarqué que chez lui  ( écran 1360x768 ) l'image ne s'affichait pas en entier. Le haut de l'image manque.

En cherchant, j'ai compris que JIMDo adaptait l'image en fonction de la largeur de l'écran. Mon écran étant plus " carrée" que le sien, l'image s'affiche normalement sur mon mac et déborde sur son PC portable 17 pouce.

Ma question est : suis-je obligé de travaillé avec des images "plus rectangulaires" afin d'être certain que cela s'affiche bien sur tous les types d'écrans. Ou existe-t-il un code afin d'ajuster l'image à la fois en largeur et en hauteur ( au risque de déformer un peu l'image).

Merci d'avance.

Nicolas

Gbyman

Messages : 5
Date d'inscription : 18/09/2015

http://fjfrance.jimdo.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Solie Ven 18 Sep 2015 - 10:39

Bonjour,

Ce n'est pas un header, mais un arrière-plan que vous avez. Vos images semblent être un plein écran. La partie que vous voyez sur le haut, diffère selon la taille des écrans. De plus, vous avez mis du texte dans vos images, ce qui est à proscrire pour des images de background avec ce genre de design. C'est ceci qui donne à votre ami une impression de "débordement".

Si vous ajoutez une légère transparence au fond de votre contenu (actuellement blanc opaque), vous devriez, votre ami sur son PC 17" ou vous-même sur votre Mac, voir plus précisément comment s'affichent vos images.

Avec le design que vous avez choisi (on dirait Zurich), vous mettez très en avant votre arrière-plan. La partie supérieure des images restera toujours plus visible que la partie basse, cachée par le background de votre contenu, et à un niveau plus ou moins ouvert, selon la taille des écrans. Et en position portrait sur un iPad par exemple, ce sera encore très différent...

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Image14

Le slider proposé par Jimdo dans le module "Galerie d'Images" vous permettra sans problèmes d'obtenir le résultat que vous semblez vouloir réaliser.
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Gbyman Ven 18 Sep 2015 - 12:25

Bonjour Solie,
merci pour votre réponse rapide.

C'est bien le thème Zurich. Bravo.
Pour le moment j'utilise l'option diaporama en arrière plan et en plein écran.

L'idée et de mettre en haut ( et qui reste en haut) du site un diaporama qui prend la largeur totale de l'écran. C'est pour cela que le fond de contenue n'est pas transparent afin de donne l'impression que l'image d'arrière plan reste en haut et ne suit pas pas la descente.

L'option slider serait très bien, mais deux questions :
Peut-on l'ancrer en haut de la page ?
Existe t-il un code pour que ce module spider prenne toute la largeur de l'écran ?

Je tiens a préciser que je ne suis pas particulièrement attaché au thème Zurich.

Merci d'avance.
Nicolas

Gbyman

Messages : 5
Date d'inscription : 18/09/2015

http://fjfrance.jimdo.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Solie Ven 18 Sep 2015 - 13:24

Oui, choisissez un design avec un arrière plan moins conséquent. Vous pourrez mettre un fond d'arrière-plan blanc.

Dites-nous quand vous aurez fait ceci. Mes camarades Jimdo Expert pourront alors inspecter votre site et vous aider, avec un peu de code, à positionner votre slider à la place que vous souhaitez Wink

Bien cordialement,
Solie
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Gbyman Ven 18 Sep 2015 - 13:37

Bonjour,

Merci pour votre aide Smile
je mets donc un arrière plan blanc et je positionne un slider en haut que vous pourrez modifier ( mettre sur toute la largeur avec rien au dessus) grâce à vos amis . C'est bien cela ?

Je le fait tout de suite et dites d'avance merci à vos amis Smile

Merci.

Nicolas

Gbyman

Messages : 5
Date d'inscription : 18/09/2015

http://fjfrance.jimdo.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 13:46

Il est préférable - dans votre cas précis (image avec texte visibles sur la m^me zone) - de fixer l'arrière-plan de body en diaporama.

Si vous avez déjà mis du code dans modifier le Head, insérez en plus :
Code:
div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li {
    background-position: center top!important;;
  background-size: 100% auto!important;}
Dans certains cas, le texte pourrait disparaître sous la bande blanche du contenu principal. Mais cela peut s'ajuster en augmentant l'espace du Header (car, si, il y en a un ici, mais il est vide sur ce site…) Smile
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Solie Ven 18 Sep 2015 - 13:46

Oui, mais ce n'est pas moi qui vais vous aider. Ce sont les experts de ce forum.

Attention à vos textes toutefois. Eux, il faudra les centrer dans les images. Sinon, vous aurez le même problème dès lors que vous passerez votre slider en pleine largeur
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Solie Ven 18 Sep 2015 - 13:49

Voilà, avec FredVig, vous êtes entre de bonnes mains !

A bientôt.
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 13:49

Vous pouvez aussi fixer la largeur du diaporama, mais vous aurez des bandes vides latérales sur les écrans grands :
Code:
div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li {
    background-position: center top!important;;
  background-size: 1200px auto!important;}
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 13:53

… et comme le souligne Solie, si vous comptez que votre site soit visible sur Ipad, ce type de fond en diaporama est à proscrire, à moins que cela ne soit qu'une décoration, car les navigateurs d'Ipad souffrent d'un bug quasi impossible à contourner.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 14:05

… Et avec un gros logo transparent dans le compartiment logo, ou un peu de code, vous pouvez afficher le fond d'écran en plus grand :
Code:
.tpl-spacing {
    min-height: 1000px;!important;}
et agrandir le diaporama jusqu'à 2000px de large (1770 px me semble pas mal)
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Gbyman Ven 18 Sep 2015 - 14:12

Bonjour FredVig

Merci Merci Merci pour votre aide.
J'ai utilisé votre code et cela a l'air d'aller mieux. Sur mon écran il y a deux bandes blanches sur les cotés.

J'ai fait le test et effectivement sur mon iphone le diaporama ne s'affiche pas. par contre sur min ipad 3 cela marche.

je regarde tous cela, fait encore quelques test et je reviendrai surement vers vous. MERCI encore pour vos précieux conseils.

Nicolas

Gbyman

Messages : 5
Date d'inscription : 18/09/2015

http://fjfrance.jimdo.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Solie Ven 18 Sep 2015 - 14:35

Oui, aucun souci d'arrière-plan avec le mode Diaporama. C'est même le moyen le plus simple pour forcer les images à se fixer sur les iPad.

Le code que FredVig vous a proposé est super sur petit écran. Votre Diaporama rend parfaitement...

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Image17

Nos designs seront très bientôt responsive, et votre arrière-plan s'affichera aussi sur les mobiles Wink
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 17:41

effectivement sur mon iphone le diaporama ne s'affiche pas
Pour les cas particulier, il faut prévoir une alternative de secours.
Par exemple, une image fixe, ou, dans votre cas, afficher la galerie d'image que vous aviez mise sur le conseil de Solie, et qui reprenait les images de fond d'écran.
Vous masquez cette galerie par défaut avec du code.
Ensuite, il faut repérer quel navigateur, ou quelle condition pose problème, et insérer un code conditionnel, une balise @media.
De cette façon, vous dites au navigateur "si tu lis ce site sur "(nom du navigateur)", alors affiche le diaporama #machin".
Bon… ça c'est le principe. La littérature sur le sujet est assez vaste sur Internet.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Gbyman Ven 18 Sep 2015 - 17:56

Bonjour

Merci pour les conseil de l'Iphone, je pense mettre une image fixe.

Mais j'ai encore un problème :
si vous allez sur la page : http://fjfrance.jimdo.com/les-fj/
vous y verrez 2 captures d'écran :
- la première est celle de mon ami qui a une résolution plus faible, l'image et entière on voit bien les gens en bas de la photo, c'est la même image sur Ipad.
- la seconde capture d'écran est celle de mon ordi (Mac portable écran rétina). L'image ne s'affiche pas entièrement. c'est pas facile a expliquer, mais en fait l'image est bien entière, c'est le contenu ( avec les menu et le titre "Fabricants de Joie France") qui remonte trop haut. Je peut baisser ce contenu en scrollant vers le haut mais dés que je le relâche il remonte automatiquement.

C'est pas facile a expliquer... désolé.

La question c'est comment faire pour que comme sur l'Ipad et l'ordi de mon amis, le corps du site démarre en bas de l'image...

n'hésitez pas à me dire si ce n'est pas clair.

Nicolas

Gbyman

Messages : 5
Date d'inscription : 18/09/2015

http://fjfrance.jimdo.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par FredVig Ven 18 Sep 2015 - 18:10

C'est très clair :
Des deux codes que je vous ai proposé, vous avez choisi celui qui met la largeur l'image de fond (enfin, le diaporama) à 100% de la fenêtre navigateur.
Donc, c'est normal.
Vous pouvez le modéliser en redimensionnant la fenêtre de votre propre ordinateur.
Vous êtes obligé de faire un choix : soit l'information donnée par le fond est prévisible (largeur et hauteur fixe) soit le fond recouvre toute la largeur pour un soucis esthétique (largeur et hauteur proportionnelles à la largeur de fenêtre)

Ce type de fond en diaporama est utile pour une information décorative, mais pas pour une information explicite.

Après, il est possible d'entrer dans le code conditionnel, grâce au javascript par exemple, mais là, ça déborde du cadre du forum.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama) Empty Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

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