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.

Responsive design

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

Responsive design

Message par steph080968 le Mar 16 Mai 2017 - 17:17

Binjour
J'essaye desesperement d'obtenir un peu d aide de la communauté.
Je n'arrive pas a comprendre ce qui ne marche pas sur mon site au niveau des images utilisees en head sur ma page d a cueil et les autres pages (slder en page accueil et image fixe differente sur ttes les autres pages). Impossible de bien "cadrer" ces images. Je voudrais en hauteur une image de 350px en a cueil et 200 sur le reste. J'ai donc "forçé" ca dans le head, mais ca ne sisualise pas bien et encore
Moins avec un smartphone. J'ai en fait forcé a 350 et 200px le jtlp-header-image mais je pense que je confond entre cela et
Le background...
Merci d un petit coup de main
Le site :
Https://accuwatt.jimdo.com

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Mar 16 Mai 2017 - 19:22

Je ne comprend pas trop vos codes, mais en tout cas :
il manque des {
dans vos media query
relisez bien votre code, vous allez trouver :
par exemple
Code:
@media screen and (min-width: 1024px)
(ici il faut une accolade)
#page-2212482857 .jtpl-header--image {height: 200px;}

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Mar 16 Mai 2017 - 20:47

Merci beaucoup. A vrai dire, je suis tout sauf un pro dans ce domaine mais je dois faire ce site pour ma petite boite... le truc c'est -je pense- que je ne comprends pas des choses qui vont vous sembler toutes simples... en fait je n'arrive pas à trouver le moyen d avoir deux hautzurs pour mon "image" de header (si c'est le bon terme..). En lecture sur un PC , je voudrais 350 pixels pour l'image (slider) de la page d accueil et 200 pixels pour l autre image destinée a toutes les autres pages du site. Et je n'arrive pas pour les pages hors accueil (je ne sais pas pourquoi) à dimensionner correctement mon espece de fond bleu avec la ligne blanche qui se termine normalement a droite par une sorte de "logo". Quoique je fasse, impossible d'avoir l'image en hauteur 200px que je souhaite, sauf à inserer une image avec bcp d'espace "vierge" en png en dessous... et quand je teste sur smartphone, c'est la cata... donc je me dis que ce n'est peut etre pas qu'un pb de responsive design, mais que je ne sais pas bien insérer les images du header... je modifie dans le head jimdo le parametre "jtpl-image-header" en forcant 350 ou 200 px selon que je suis sur la page d a cueil ou sous les autres, mais je me demande si c'est cela qu il faut faire... c'est peut etre le "background" qu il faut modifier... les media queries n ont aucun impact sur le site en visu smartphone...
Sus perdu... help
Merci bcp d'avance

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Jeu 18 Mai 2017 - 17:15

Bonjour,

En substance j'aimerais avoir une image header pour la page d'accueil en 350 px de haut (celle-ci est un slider) et une autre image en 200px pour toutes les autres pages du site (celle-ci est une image fixe).

Comment faut-il que je procède pour que cela fonctionne correctement à la fois en lecture PC et en visu responsive?

Mille merci d'avance.

PS : peut être que je ne poste pas ce message là où il faut. Je ne sais pas, pouvez-vous me dire?

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Jeu 18 Mai 2017 - 20:25

Ne mettez pas d'image avec logo ou texte dans cette zone arrière-plan : elle n'est pas constante, elle peut disparaitre ou être déformée, et il n'y a rien à faire à cela. Mettez une image de remplissage, un fond, une illustration, quelque chose de secondaire.
Vous pouvez aussi la supprimer totalement avec du code.
Votre code est correct, si vous corrigez les oublis de }
Ajoutez ensuite votre logo dans l'espace consacré (si il existe) ou en haut de contenu de vos pages.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Jeu 18 Mai 2017 - 20:50

Merci bcp. Mais alors où puis je mettre mon smider de page d'accueil? Pour les autres pages, ok c'est une image fixe sans texte... le crai souci est peut être que je confonds jtpl-image-header et..autre xhise...
Je ne sais pas. Je coudrais juste arriver à xe que j'ai évoqué. J'espère que c'est jouable
Merci encore
Stephane

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Ven 19 Mai 2017 - 13:38

Il faut bien comprendre le dilemme :
Sur jimdo, la têtière EST le fond de site.
Ils ont choisi de faire en sorte qu'elle soit proportionnelle pour satisfaire la responsivité.
Mais cela implique que le contenu risque de ne pas être toujours entièrement visible. On ne peut donc pas y mettre de logo ou de titre.
On peut "fixer" cette image, mais on perd la responsivité…

Dans votre cas :
Le slider de page d'accueil est bon. il y a seulement une image trop large (défense). Mettez des images de même proportions dans le slider.
Les titres sur les images n'apparaitront pas de façon sûre. S'ils sont important, il faudra les insérer en légende d'image et modifier leur apparence avec du code. Ce n'est pas très simple à réaliser. J'ai réalisé cela sur https://www.maison-des-arts-martiaux-tours.com/ mais je n'ai jamais essayé sur un slider fond d'écran. Je ne sais pas si on peut ajouter des légendes. A priori, j'essaierai une méthode similaire à ce que je vous recommande pour les autres pages :
Mettez un fond fixe en fond de site.
Votre code de modification de hauteur permet de placer le menu secondaire.
Puis, ajoutez votre bannière fixe en haut du contenu de chaque page.
Évidemment, elle ne fera pas toute la largeur de la page, mais ça peut se modifier avec du code (voir les tutos sur ce forum).
Le problème est que cela ne peut apparaître qu'au dessous du menu secondaire, et pas au dessus. Là encore, du code peut permettre de "remonter" ce contenu, mais vous aller créer de nouveaux risques de comportements imprévus selon les navigateurs.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Ven 19 Mai 2017 - 16:55

Merci bcp. Tres précis et pro... je vois que je devrais probablement changer de stratégie. Juste une question, si je fixe la hauteur mais que j'utilise des media queries pour fixer celle ci selon les ecrans, ca pourrait le faire? Oublions les titres des images, en effet ca va etre trop compliqué pour moi. D avance merrci encore

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Sam 20 Mai 2017 - 0:17

oui, ça doit fonctionner sans pb

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Sam 20 Mai 2017 - 8:12

Merci à vous. Je vais essayer

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Sam 20 Mai 2017 - 10:41

Juste une question, car je ne sais pas du tout. Vous pouvez accéder au code de mon head jimdo? Je vais essayer de "bricoler" ce jead ce week end. Pourriez vous me dire où je fais des erreurs? Ou dois je vous envoyer le code?
Merci bcp et bon we

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Sam 20 Mai 2017 - 16:46

Relisez les posts, je vous ai indiqué ou regarder vous oubliez des accolades

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par steph080968 le Mar 4 Juil 2017 - 11:34

Bonjour,

J'essaye encore (sans y parvenir) de faire en sorte que mon slider dans le head de la page d'accueil de mon site puisse avoir une hauteur plus etroite sur un smartphone.
J'essaye donc ceci et çà ne marche pas.... Si quelqu'un peut m'aider, ce serait génial.
Merci d'avance.

@media only screen and (max-device-width:640px) {
/* mobile */
#page-2207494157 .jtpl-header--image {height: 100px;}
}

Site :
https://accuwatt.jimdo.com/

steph080968

Messages : 14
Date d'inscription : 06/04/2017

http:// https://accuwatt.jimdo.com/

Revenir en haut Aller en bas

Re: Responsive design

Message par FredVig le Mar 4 Juil 2017 - 20:26

Code:
@media (max-width:650px) {
#page-2207494157 .jtpl-header--image {height: 100px;}
}
Mais ça devrait le faire déjà par défaut
Ce sont vos codes css n°4 qui perturbent la responsivité par défaut.

Changez les codes du CSS n4 en ne les appliquant que pour une largeur de fenêtre mini :
Code:
@media (min-width:650px) {
vos codes
}

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: Responsive design

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

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