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.
Le Deal du moment :
WD Green SN350 – Disque SSD interne NVMe M.2 ...
Voir le deal
99.99 €

Réduire les espaces inter-colonnes

2 participants

Aller en bas

Réduire les espaces inter-colonnes Empty Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 2:17

Bonjour,

Dans ma sidebar uniquement, je souhaiterais réduire l'espace vide entre les trois éléments de ma colonne vidéos, afin d'apporter un effet plus "flat", semblable à la galerie images du content. L'espace y est réglé sur 7.

J'imagine qu'il faudra ensuite que j'intervienne pour remettre les lecteurs en taille maximale. Ils devraient être un peu plus hauts, un peu plus larges.

Le width à 100% de l'élément colonne devra rester divisé en trois parts égales avec de fines séparations.

Je galère depuis quelques jours. Il semble impossible de pouvoir réduire les espaces de séparation depuis la colonne entière "cc-m-10544726999".
Celle-ci semble se décomposer en deux parties;
- une première avec les deux premières colonnes,
- puis une deuxième avec la dernière colonne de droite  ".cc-m-hgrid-column.last"

Que faut t-il entrer ? Une valeur de padding ou autre chose ? En pixel ou pourcentage ?
.j-hgrid indique un padding à 0. Cela concerne t-il les bords extérieurs ?

Je ne sais ni quoi prendre, ni quoi mettre. Je suis complètement perdue.
N'hésitez pas si vous avez des pistes Wink

Merci,
Solie
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par FredVig Mar 4 Aoû 2015 - 9:31

a priori, je vois du padding sur .cc-m-hgrid-column et d'autres contenants dérivés : .cc-m-hgrid-column .n
déjà essaye de mettre à 0px >

.cc-m-hgrid-column, .cc-m-hgrid-column .n{padding:0px!important;}

Il faudra ensuite voir sur les largeurs.
Il reste une petite marge que je ne parviens pas à paramétrer, elle vient de la largeur des contenants des vidéos qui est à 31% (sans doute cela est un réglage du module colonne)
EDIT :
Cette "marge" vient de la différence entre la largeur des contenants vidéos et de la largeurs des colonnes : un petit rectangle, dans un grand rectangle… il y a de la marge.


Dernière édition par FredVig le Mer 5 Aoû 2015 - 10:20, édité 1 fois
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par FredVig Mar 4 Aoû 2015 - 10:25

Grosse bidouille… Le module vidéo ne se comporte pas comme le module soundcloud.
Importé sur mon site atelier (voir ici), ça donne :
Code:
/*    module colonne  video*/
       #cc-m-12264234722, .cc-m-hgrid-column{padding:0!important;}
.cc-m-hgrid-column{width:33.335%!important;}
.cc-m-hgrid-column .n{padding:0 0 0 0!important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
.cc-m-hgrid-column.last{float:left;}

Note qu'il faut forcer la largeur du module soundcloud à 100%, hauteur auto

Les éléments video et soundCloud sont insérés en centré dans la colonne.

Reste à vérifier ça sur ton site responsive…
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 14:49

Hello Fred,

Merci de ton aide Wink Je viens de mettre le code. Je ne l'aurais jamais trouvé celui-là !!!

Bon, je ne vais pas pouvoir le laisser car il agit sur toutes les colonnes du site. Tout est devenu très anarchique.

L'espacement entre les deux premiers contenants est ok. Par contre, il est absent entre le deuxième et le troisième. SoundCloud et B. Solo se touchent.

L'élément colonne n'atteint plus la marge de droite. Peut-être parce qu'elle est à présent à 99% ?

Le lecteur SoundCloud était déjà en width 100% mais je passe son height de 163 à 170 pour qu'il reste synchro avec les lecteurs YouTube. En auto, c'est trop petit.

Ici, une capture de ton site
Réduire les espaces inter-colonnes Image29
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par FredVig Mar 4 Aoû 2015 - 15:11

Solie a écrit:il agit sur toutes les colonnes du site.
Tu peux utiliser des identifiants plus précis :
cibler la classe .cc-m-hgrid-column, mais uniquement dans le contenant
#cc-m-10544726999
ça devrait faire
#cc-m-10544726999 .cc-m-hgrid-column{…
Pour les écartements, il faut doser les padding et width sur ton site, dans l'inspecteur.

Marge droite : es-tu sûre d'avoir placé tes vidéos en centré dans les colonnes ?
éventuellement, place-les : la première à gauche, soundCloud au centre, espace détente à droite…
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 15:13

Tu peux regarder, je laisse le code
Code:
<style type="text/css">
/*<![CDATA[*/
/*    module colonne  video*/
      #cc-m-12264234722, .cc-m-hgrid-column{padding:0!important;}
.cc-m-hgrid-column{width:33.335%!important;}
.cc-m-hgrid-column .n{padding:0 0 0 0!important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
.cc-m-hgrid-column.last{float:left;}
/*]]>*/
</style>
un moment Wink


Dernière édition par Solie le Mar 4 Aoû 2015 - 15:26, édité 1 fois
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 15:16

Sur tablette, tout est collé. Il n'y a même plus le petit espace entre TF1 et SoundCloud

Réduire les espaces inter-colonnes Image30
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 15:21

Oups, B.Solo n'était pas centré ! Je viens de le faire.

Les lecteurs SoundCloud ne sont pas justifiables nativement.

Sur ordi (Netbook), j'ai maintenant deux mini marges égales entre les trois lecteurs. A l'œil nu, je dirais pour te donner une idée, qu'elles pourraient correspondre à du 2px, si je me réfère à la border-top orange de SoundCloud qui fait 2px. Il faudrait que cette largeur soit doublée, je pense, pour que l'espacement soit proche de ceux de la galerie images.

Peut-être que du coup, de très légers espacements apparaîtront sur tablettes Neutral
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 16:01

Avec l'indentifiant colonne,

Code:
<style type="text/css">
/*<![CDATA[*/
/*    module colonne  video*/
       #cc-m-10544726999 .cc-m-hgrid-column{padding:0!important;}
.cc-m-hgrid-column{width:33.335%!important;}
.cc-m-hgrid-column .n{padding:0 0 0 0!important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
.cc-m-hgrid-column.last{float:left;}
/*]]>*/
</style>

le reste du site est toujours touché. Et les boutons de partage se sont fait la malle ! Lol

Je laisse ce code un moment si tu veux voir le résultat.
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 17:05

FredVig a écrit:
Il reste une petite marge que je ne parviens pas à paramétrer, elle vient de la largeur des contenants des vidéos qui est à 31% (sans doute cela est un réglage du module colonne)
Je cherche…

C'est cette petite marge qui m'a fortement agacée ces derniers jours. Ses propriétés ne sont affichées nulle part dans l'inspecteur. Ne serait-ce pas ceci le border-spacing en CSS ?
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par FredVig Mar 4 Aoû 2015 - 19:30

Solie a écrit:Avec l'indentifiant colonne,

Code:
<style type="text/css">
/*<![CDATA[*/
/*    module colonne  video*/
       #cc-m-10544726999 .cc-m-hgrid-column{padding:0!important;}
.cc-m-hgrid-column{width:33.335%!important;}
.cc-m-hgrid-column .n{padding:0 0 0 0!important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
.cc-m-hgrid-column.last{float:left;}
/*]]>*/
</style>
le reste du site est toujours touché.

Mon idée était de cibler pour CHAQUE modif :

Code:
<style type="text/css">
/*<![CDATA[*/
/*    module colonne  video*/
       #cc-m-10544726999 .cc-m-hgrid-column{padding:0!important;}
#cc-m-10544726999 .cc-m-hgrid-column{width:33.335%!important;}
#cc-m-10544726999 .cc-m-hgrid-column .n{padding:0 0 0 0!important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
#cc-m-10544726999 .cc-m-hgrid-column.last{float:lef!important;}
/*]]>*/
</style>
ça dit quoi ?
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mar 4 Aoû 2015 - 20:48

J’évoquais cette marge là, j'imagine qu'elle a un nom...
Réduire les espaces inter-colonnes Marge10
C'est elle qui complète les 31%. Et c'est sur elle qu'il devrait être possible de travailler (border-spacing ? column-gap ?). Mais l'inspecteur n'indique pas ses propriétés.

Avec l'identifiant colonne, ça n'affecte plus les autres colonnes du site. Sinon, ça se comporte comme cet après-midi. Voir mes précédents message Wink
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par FredVig Mer 5 Aoû 2015 - 10:11

Un petit rectangle, dans un grand rectangle, de là vient la marge. Pour le changer, il faut changer les largeurs des 2 vidéos, le SoundCloud étant déjà à 100% dans son contenant.

Réduire les espaces inter-colonnes Zod10

Quand c'est du padding ou margin, il apparait dans une autre couleur sur l'inspecteur.
(comme on peut le voir en violet sur ton image, qui a dû être réalisée AVANT de mettre le code anti padding) Wink

Réduire les espaces inter-colonnes Marge10

Border-spacing, c'est pour les cellules de tableau.
Column-gap pourrait intervenir, mais je n'en vois pas dans le code.

Concernant les différences d'un navigateur à l'autre, (largeur de gouttière variable) ce sera compliqué à paramétrer d'un point de vue général.
Il faudra jouer du @media et faire un traitement particulier pour chaque. Ou alors, se contenter d'une configuration "acceptable" dans la plupart des cas.
Par exemple, "sur tablette"… Cela suppose au moins 30 navigateurs différents !

Tu as bien relevé ce problème avec mon exemple atelier :
- Sur Firefox ça donne >
Réduire les espaces inter-colonnes Z_tiff10
- Sur Chrome ça donne >
Réduire les espaces inter-colonnes Zz_tif10

Après, Jimdo se décarcasse pour éviter ce genre de problème, par exemple, en imposant des marges automatiques dans les colonnes, proportionnelles au contexte. (Mais… Solie ne veut pas de marges! ) Wink
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mer 5 Aoû 2015 - 14:09

Solie n'a pas l'habitude de parler d'elle à la troisième personne. (Mais... Si ! Solie voudrait de petites marges!) Very Happy

Réduire les espaces inter-colonnes Image31
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

Message par Solie Mer 5 Aoû 2015 - 21:38

Donc, dans notre code, j'ai cherché à entrer ceci :

#cc-m-10544726999 .cc-m-hgrid-column .n {
   padding: 4px !important;
}

Ça entrait en conflit avec la première ligne du code. Si j'y indique aussi un padding à 4px, le lecteur YouTube de droite part en couille. Idem si je laisse le !important sur le 0.

J'ai donc entré ce code:
Code:
<style type="text/css">
/*<![CDATA[*/
/*  reduction espace inter-colonne video sidebar */
       #cc-m-10544726999 .cc-m-hgrid-column{padding:0;}
#cc-m-10544726999 .cc-m-hgrid-column{width:33.335%!important;}
#cc-m-10544726999 .cc-m-hgrid-column .n{padding: 4px !important;}
#cc-m-12264234722 > div:nth-child(1), #cc-m-12264235622 > div:nth-child(1){width:99%!important;height:auto!important;}
#cc-m-10544726999 .cc-m-hgrid-column.last{float:lef!important;}
/*]]>*/
</style>

- Sous Safari iPad, les deux premiers lecteurs se touchent. Le dernier espace est ok.
- Sous Firefox, l'espacement entre les trois lecteurs est carrément nickel.
- Sous Chrome ? Aucune idée...

Si quelqu'un passe par ici, une petite capture de la sidebar sous chrome serait la bienvenue  Wink
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Réduire les espaces inter-colonnes Empty Re: Réduire les espaces inter-colonnes

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