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.

Trait de séparation en "texte adaptable"

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

Trait de séparation en "texte adaptable"

Message par les Singuliers Associés le Lun 23 Nov 2015 - 15:34

Bonjour,

Nous avons un site Jimdo (singuliersassocies.org) dans lequel nous utilisons, entre certains éléments, des traits de séparation "custom". Nous avons utilisé une ligen de texte remplie du caractère "/" ce qui donne une jolie ligne de séparation /////////////////////////////////// Smile

Notre problème est que comme cette séparation est du texte, elle n'a pas les caractéristiques de "responsive design" et donc sur certain écran d'ordinateur (4/3) nous avons des retour à la ligne des caractère :


De plus le problème apparait sur iPhone également :


Par contre pas de soucis sur iPad :


Est-il possible de "programmer" notre filet de séparation pour qu'il reste sur une seule ligne quelquefois la largeur ou les proportion de l'écran? Soit en variant la taille de la police ou le nombre de "/".

Je ne suis pas un pro de la prog mais je peux copier / coller du code quelque part Smile)

Merci de vos proposition ou éclairages.

Philippe Demoulin

les Singuliers Associés

Messages : 7
Date d'inscription : 23/11/2015

http://singuliersassocies.org

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par Alain le Lun 23 Nov 2015 - 21:02

Bonsoir,

le plus simple est d'opter pour le trait de séparation que propose Jimdo
http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/trait-de-s%C3%A9paration/
Cordialement
Alain
avatar
Alain

Messages : 134
Date d'inscription : 06/10/2014

http://newtemplates2.jimdo.com/

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par Solie le Mar 24 Nov 2015 - 3:16

Oui, c'est vraiment le plus simple.

Ensuite, mettez ceci dans "Modifier le head" :

Code:
<style type="text/css">
/*<![CDATA[*/
/*trait de separation slash gris*/
.content-options hr {
    height: 6px;
 background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}
/*]]>*/
</style>

ou bien cela :

Code:
<style type="text/css">
/*<![CDATA[*/
/*trait de separation slash bleu*/
.content-options hr {
    height: 17px;
 background: url(http://nuvboutique.com/wp-content/themes/nuv/img/slash.png) repeat-x 0 0;
    border: 0;
}
/*]]>*/
</style>

Le premier code transformera vos traits de séparation en une rangée grise de /, le deuxième en une rangée bleue de /. Par sécurité, hébergez l'image d'un slash en png sur une page cachée de votre site, et renseignez son url.  

Avec cette méthode, vous utiliserez nativement les traits hr de Jimdo et vous ne rencontrerez plus de problèmes de débordements !
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par les Singuliers Associés le Mar 24 Nov 2015 - 15:11

Bonjour,

Merci pour votre réponse rapide.

J'ai saisi le principe de celle-ci et j'ai intégré les modifications au Head :

<style type="text/css">
/*<![CDATA[*/
ul.mainNav1 {margin: auto !important; width: 100% !important;}
ul.mainNav2 {margin: auto !important; width: 100% !important;}

ul.mainNav1 {
padding:10px 90px;
}

ul.mainNav2 {
padding:10px 130px;
}

ul.mainNav1 li a,
ul.mainNav1 li a:visited
{
color: black;
}

ul#mainNav1 li a.current,
ul#mainNav1 li a.current:hover
{
color: #0d82a2;font-weight:bold;
}

ul#mainNav1 li a:hover,
ul#mainNav1 li a.current:visited

{
color: #0d82a2;font-weight:bold;
}

ul.mainNav2 li a,
ul.mainNav2 li a:visited

{
color: #0d82a2;
}

ul#mainNav2 li a.current,
ul#mainNav2 li a.current:hover
{
color: black;font-weight:bold;
}

ul#mainNav2 li a:hover,
ul#mainNav2 li a.current:visited

{
color: black;font-weight:bold;
}


/*trait de separation slash bleu*/
.content-options hr {
height: 17px;
background: url(http://nuvboutique.com/wp-content/themes/nuv/img/slash.png) repeat-x 0 0;
border: 0;
}

/*]]>*/
</style>


Cependant lorsque je choisi un trait de séparation, il reste "basique", il n'est pas modifié par le Head. Ai-je fait une erreur dans le head ou cela vient-il du fait que mon template est un vieux template d'avant la nouvelle interface (je n'ai pas accès au modification de style directement sur les éléments mais je doit aller dans le menu latéral)?

Merci

Philippe


les Singuliers Associés

Messages : 7
Date d'inscription : 23/11/2015

http://singuliersassocies.org

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par Solie le Mar 24 Nov 2015 - 16:03

Peut-être. Je ne peux pas vous répondre car je n'ai pas la possibilité de tester sur un vieux design.

Voici le résultat sur mon site test. C'est un nouveau design. Le trait solid (continu) orange est bien transformé en une suite de "slash".

Il serait curieux que le trait de séparation ne s'appelle pas hr quand-même sur les anciens designs...
Enlevez .content-options du code, commencez à hr pour voir... Cette mention n'est pas très utile, c'est moi qui l'ajoute tout le temps pour préserver ma sidebar de toute modif.

Aussi, mettez le code proprement, séparément de votre premier code de menu. Entouré de ses balises d'entrée et de sortie.
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par les Singuliers Associés le Mar 24 Nov 2015 - 16:51

Après vérification, cela ne marche effectivement pas avec tous les templates mais j'en ai trouvé un qui fonctionne : Barcelona.

Merci pour vos conseils

Philippe

les Singuliers Associés

Messages : 7
Date d'inscription : 23/11/2015

http://singuliersassocies.org

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par Solie le Mar 24 Nov 2015 - 17:45

Ah, carrément. Vous avez sauté le pas pour un nouveau design... Bravo !

Vos 3 premiers traits de séparation sont clean à présent. Bon courage pour le réajustement de vos éléments, et n'oubliez pas de sauvegarder l'image slash http://nuvboutique.com/wp-content/themes/nuv/img/slash.png que nous avons volée à un pauvre malheureux ^^ On ne connaît pas les modifications qu'il pourrait apporter à son site Wink

Cordialement,
Solie
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

Message par les Singuliers Associés le Mar 24 Nov 2015 - 18:07

Ca ne devrait pas prendre trop de temps (j'ai quand même ouvert un nouveau post pour salir si quelqu'un savait comment changer le fond des menu déroulants de ce nouveau template - http://www.jimdoforum.fr/t945-modification-du-fond-des-menus-deroulants-du-template-barcelona)
Pour l'image, c'était déjà fait de multiple fois le temps de trouver la taille idéale Smile

Bonne soirée à vous et merci encore

Philippe

les Singuliers Associés

Messages : 7
Date d'inscription : 23/11/2015

http://singuliersassocies.org

Revenir en haut Aller en bas

Re: Trait de séparation en "texte adaptable"

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