En-tête non responsive
Autore: ZUB ART Dominique
Visite 1917,
Followers 1,
Condiviso 0
Bonjour,
Dans l’entête de mes sites responsives, j’ai remarqué que si l’on peut modifier la grandeur des images pour qu’elles rentrent correctement selon les dimensions des écrans, il n’en est pas de même pour les textes.
Exemple : j’ai un texte de bienvenue en taille 14. Sur l’écran d’un ordinateur, c’est parfait.
Mais dès qu’on visualise sur un écran smartphone, le texte est surdimensionné et cela n’est pas beau.
MAIS si à ce niveau, je le réduis la taille de la police à 11 par exemple, cela la change à tous les niveaux ! et je me retrouve avec un message de bienvenue tout petit et ridicule sur ordinateur.
Quelque chose m'a échappé ?
Merci d'avance
Dominique
Postato il
Bonjour.
Peux-tu mettre les URL(s) des sites concernés.
Si toutefois il s'agit su site Zub Art, chez moi sur PC/Tablette/Smartphone, l'entête est parfaitement responsive.
JSP.
Autore
Bonjour Jean-Serge,
Merci pour ta rapidité !
Concernant mon site zubart.com, c'est bon puisqu'il s'agit d'une image et que les images sont modifiables palier par palier, d'une façon indépendante.
C'est avec des textes que cela est pénible (je dirais même stupide) car si je mets mes textes en 14 pour que ce soit beau sur un ordinateur, c'est de plus en plus "grossier" dans les formats intermédiaires pour être impossible à "caser" en format smartphone (c'est notamment sur ce site que je refonds => http://ohpank.com/op)
Et si je passe la police en 11 par exemple sur le palier "smartphone", ça change cette donnée dans tous les paliers et je me retrouve alors avec un tout petit texte sur un ordinateur.
Merci d'avance !
Dominique
Bonjour.
Sur ce que j'en vois sur mon Smartphone, je pense que tu devrais essayer de redimensionner ton objet dans la résolution Smartphone .
Personnellement je copie l'objet dans chaque résolution.
J'adapte l'objet à la résolution et je le rend invisible dans les autres résolutions.
JS.
Suite ...
Je ne change pas la taille du texte mais les dimensions de l'objet.
Autore
Si je comprends bien, il suffit que je recrée intégralement et à chaque fois mon texte sur les paliers que je veux modifier (avec mes nouveaux paramètres) au lieu d'essayer de modifier le texte du premier palier qui se copie automatiquement sur les paliers suivants ?
C'est la façon dont je procede et je n'ai jamais rencontré de problème.
Tu peux essayer.
JSP.
Mais logiquement on doit pouvoir modifier un objet dans une résolution sans impacter ce même objet dans les autres résolutions ...
Bonjour Dominique,
Avez-vous regardé comment se comportent vos objets d'entête pour chacune des définitions ?
Pour chacune des définitions, vous devez replacer vos objets ; certains pourront être éventuellement cachés dans les basses résolutions. Nul besoin de modifier la taille de votre texte, c'est seulement l'objet texte que vous allez réduire.
Voir ma PJ
Je reste à votre disposition si besoin.
Cordialement,
Danielle
Autore
D'abord merci à vous pour vos réponses mais je suis désolée car j'ai l'impression de ne pas comprendre ce que vous me dites :(
Alors je vais résumer le déroulement des choses pour que vous puissiez peut-être trouver à quel moment je ne fais pas correctement les choses.
Pour créer mon entête de page, je suis allée sur "Contenu du Modèle" et me suis d'abord placée sur le palier "suppérieur à 960px"
J'ai ajouté :
mon logo que j'ai mis en 321/326px
un texte simple écrit en police taille 14
le module Animated Image avec un texte en police taille 14
Lorsque je suis passé sur le palier "compris entre 720pxet 960px"
j'ai réduit mon logo à 272/284px
j'ai laissé mon texte simple en police taille 14
j'ai laissé le texte du module Animated Image en police taille 14
Lorsque je suis passé sur le palier "compris entre 480px et 720px"
j'ai réduit mon logo à 229/223px
j'ai passé mon texte simple de la taille 14 à la taille 8 =>du coup mon texte est passé à 8 dans mes 2 paliers précedents...
j'ai laissé le texte du module Animated Image en grandeur 14
Lorsque je suis passé sur le palier "inférieur à 480px"
j'ai réduit mon logo à 184/191px
j'ai laissé mon texte simple à la taille 8
j'ai passé mon texte du module Animated Image en grandeur 9 =>du coup mon texte est passé à 9 dans mes 3 paliers précedents...
Conclusion : les modification sur l'image de mon logo se passe bien et ne se répercute jamais sur les paliers précédents contrairement aux textes.
Que fallait-il donc que je fasse ?
=>du coup mon texte est passé à ...
Tu crée un objet texte dans le premier "pallier".
Tu le rend invisible dans les "palliers" inférieurs. (Pour cela tu te places sur le deuxième "pallier" et tu sélectionnes Invisisble pour cet affichage et affichages inférieurs).
Tu crées le même objet texte dans le deuxième pallier.
Tu le rend invisible dans les "palliers" inférieurs. (Pour cela tu te places sur le troisième "pallier" et tu sélectionnes Invisisble pour cet affichage et affichages inférieurs).
Etc.
Ainsi ils sont indépendants les uns des autres, tu peux donc modifier l'objet texte dans un "pallier" sans impacter les autres "palliers".
Voici un lien vers un projet exemple.
JSP
Hello,
Danielle lorsque tu réduis l'objet texte, cela ne réduit pas le texte (police) donc le texte est rogné à l'affichage. !!!
Mais la description de Dominique est elle un comportement normal... et dans ce cas l'explication de Jean-Serge est OK.
Mais perso pour je comprends plutôt.
On crée une entête /pied de page dans la définition la plus haute (logo, texte ..)
Ensuite ces objets sont automatiquement répercutés dans les définitions inférieurs... et l'on change la taille des objets et contenus (taille police par exemple) à chaque niveau de définition , sans que cela perturbe ni le niveau supérieur, ni le niveau inférieur.
Après il reste l'option cacher, pour créer des objets sur un niveau en particulier... et c'est ca c'est plutôt bien.
Enfin moi c'est comme cela que je pense que la logique devrait être
Cordialement.
Autore
Merci Jean-Serge ! La voilà l'explication qui me manquait : rendre les objets /textes invisibles.
Tu viens de me sauver (la vie) mon travail !
Merci encore et très belle journée
Dominique