Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
3 participants
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Images / Galeries d'images
Page 1 sur 1
Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
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
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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...
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.
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...
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.
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
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
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
Bien cordialement,
Solie
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
Bien cordialement,
Solie
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
Bonjour,
Merci pour votre aide
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
Merci.
Nicolas
Merci pour votre aide
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
Merci.
Nicolas
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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 :
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;}
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
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
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
Voilà, avec FredVig, vous êtes entre de bonnes mains !
A bientôt.
A bientôt.
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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;}
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
… 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.
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
… 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;}
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
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
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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...
Nos designs seront très bientôt responsive, et votre arrière-plan s'affichera aussi sur les mobiles
Le code que FredVig vous a proposé est super sur petit écran. Votre Diaporama rend parfaitement...
Nos designs seront très bientôt responsive, et votre arrière-plan s'affichera aussi sur les mobiles
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
Pour les cas particulier, il faut prévoir une alternative de secours.effectivement sur mon iphone le diaporama ne s'affiche pas
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.
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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
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
Re: Taille de l'image en Fonction de la résolution des écrans (fond d'écran diaporama)
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.
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.
Sujets similaires
» Changer "couleur de fond" en "image de fond"
» dimensions diaporama
» La résolution diminue après téléchargement sur Jimdo
» Responsive: Étendre le menu hamburger à des écrans plus larges
» Ajout de commentaire dans le head
» dimensions diaporama
» La résolution diminue après téléchargement sur Jimdo
» Responsive: Étendre le menu hamburger à des écrans plus larges
» Ajout de commentaire dans le head
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Images / Galeries d'images
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|