Réduire les espaces inter-colonnes
2 participants
Page 1 sur 1
Réduire les espaces inter-colonnes
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
Merci,
Solie
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
Merci,
Solie
Re: Réduire les espaces inter-colonnes
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.
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
Re: Réduire les espaces inter-colonnes
Grosse bidouille… Le module vidéo ne se comporte pas comme le module soundcloud.
Importé sur mon site atelier (voir ici), ça donne :
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…
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…
Re: Réduire les espaces inter-colonnes
Hello Fred,
Merci de ton aide 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
Merci de ton aide 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
Re: Réduire les espaces inter-colonnes
Tu peux utiliser des identifiants plus précis :Solie a écrit:il agit sur toutes les colonnes du site.
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…
Re: Réduire les espaces inter-colonnes
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>
Dernière édition par Solie le Mar 4 Aoû 2015 - 15:26, édité 1 fois
Re: Réduire les espaces inter-colonnes
Sur tablette, tout est collé. Il n'y a même plus le petit espace entre TF1 et SoundCloud
Re: Réduire les espaces inter-colonnes
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
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
Re: Réduire les espaces inter-colonnes
Avec l'indentifiant colonne,
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.
- 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.
Re: Réduire les espaces inter-colonnes
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 ?
Re: Réduire les espaces inter-colonnes
Solie a écrit:Avec l'indentifiant colonne,le reste du site est toujours touché.
- 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>
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>
Re: Réduire les espaces inter-colonnes
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
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
Re: Réduire les espaces inter-colonnes
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)
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! )
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)
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! )
Re: Réduire les espaces inter-colonnes
Solie n'a pas l'habitude de parler d'elle à la troisième personne. (Mais... Si ! Solie voudrait de petites marges!)
Re: Réduire les espaces inter-colonnes
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:
- 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
#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
Sujets similaires
» Réduire les espaces inter-colonnes (Design Stockholm)
» reduire l'espace entre le titre et la navigation
» Réduire les espaces entre logo et barre de navigation dans Stockholm
» Blog sur deux colonnes
» modifier les espaces
» reduire l'espace entre le titre et la navigation
» Réduire les espaces entre logo et barre de navigation dans Stockholm
» Blog sur deux colonnes
» modifier les espaces
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|