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.

Réduire les espaces inter-colonnes

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

Réduire les espaces inter-colonnes

Message par Solie le 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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par FredVig le 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

_________________
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 : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par FredVig le 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…

_________________
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 : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par FredVig le 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…

_________________
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 : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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

avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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.
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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 ?
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par FredVig le 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 ?

_________________
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 : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

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

J’évoquais cette marge là, j'imagine qu'elle a un nom...

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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par FredVig le 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.



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



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 >

- Sur Chrome ça donne >


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

_________________
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 : 1794
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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

avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

Message par Solie le 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
avatar
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Réduire les espaces inter-colonnes

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