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.
-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

[Aux experts] Aide CSS pour l'aperçu du blog.

+2
Disney Analysis
FilmsdeLover
6 participants

Page 1 sur 2 1, 2  Suivant

Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Mer 10 Juin 2015 - 13:38

Bonjour,

j'essaye de m'attaquer au module d'aperçu du blog pour essayer de le rendre un peu plus sympa mais je me heurte à un petit problème dont je n'arrive pas à voir la solution.

J'ai réussi à faire en sorte que mes aperçus de billets apparaissent automatiquement dans des colonnes, j'ai pu changer aussi l'aperçu en mettant l'image au-dessus du titre du billet etc mais j'ai un problème avec les titres "longs" qui prennent plus de lignes, comme montré ci-dessous :
blog - [Aux experts] Aide CSS pour l'aperçu du blog. 50c05a01-95e5-4ef6-84ba-da4e6fa653ff
J'ai essayé de spécifier une hauteur pour chaque billet mais après les plus "courts" ne s'alignent pas bien etc donc si quelqu'un a une idée de CSS à ajouter, je suis preneur. Pour les aficionados de Firebug, la page en question est ici pour l'instant : http://www.filmsdelover.com/test/test-page-d-accueil/

Merci ! Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Mer 10 Juin 2015 - 14:27

En rajoutant un height fixe ou un min-height fixe (173px) au div#content.n.clerover.j-blogarticle, cela limite un peu le désordre en effet.
Les titres restent non alignés, mais les contenants le sont
Curieusement, seul le premier billet est plus grand ?
Et en rallongeant tous les titres sur un m^me nombre de lignes, avec des <br /> ?
[img]blog - [Aux experts] Aide CSS pour l'aperçu du blog. Fdl_ti10[/img]
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Mer 10 Juin 2015 - 14:49

La hauteur du billet diffère selon la longueur du titre (et je n'en suis pas encore à me dire "Je vais réduire le titre" même si ça serait plus simple ! Smile et c'est vraiment là mon problème.

J'avais pensé à mettre un height mais comme tu l'as vu, les billets sont alignés par le bas alors que par le haut serait moins dérangeant.

J'ai essayé de trouver une solution CSS pour que le titre des billets trop longs soit automatiquement coupé en fin de 2ème ligne (avec un "..." notamment) mais pas trouvé de solution satisfaisante non plus, même avec text-overflow:ellipsis etc.

Merci quand même d'avoir cherché ! Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Jeu 14 Jan 2016 - 21:12

installation réussie du script (après plusieurs mois de diverses tentatives) jquery Dotdotdot !
Avec un nouveau design, ça fonctionne, atelier fredvig dotdotdot
Je ne parvenais pas à l'installer, car la bibliothèque jQuery était incompatible avec une autre présente sur la page.
Donc…
il est possible de couper les paragraphes trop longs automatiquement !
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Ven 15 Jan 2016 - 9:15

Super, merci, je vais regarder ça et voir comment l'adapter à mon site de la meilleure façon ! Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Ven 15 Jan 2016 - 11:34

Bon courage!
Méfies-toi du tuto de l'auteur, car comme très souvent, il n'indique pas "tout" sur la page d'explications. Il manque parfois quelques CSS indispensables (que j'ai essayé d'indiquer dans mon article).
Je suis parti de sa page d'exemple, et j'ai changé dans le javascript le ciblage des id, par un ciblage à la class, qui me semble plus pratique. (.dot1 à .dot7)
Toutefois, il n'est pas simple d'associer ces class sur un même contenant.
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par Disney Analysis Jeu 4 Fév 2016 - 0:46

Coucou FilmdeLover !

As-tu trouvé la solution au ton soucis ?

Comme tu le sais, j'utilise le même procédé de personnalisation du blog sur mon site (avec 6 modules blog différents sur l'accueil, de sorte à l'automatisme totalement) et ai donc dû faire face à ce soucis également.

J'ai sur mon accueil des articles disposés comme les tiens, à savoir l'image avec le titre en bas (+ la date dans un rond) - mais aussi des modules avec juste l'image sans texte, des modules en colonnes avec le texte apparaissant au survol de la souris (avec sans survol une icône différente pour chaque catégorie de film), et le simple module en ligne dans le même esprit que celui présenté dans un précédent sujet si tu t'en rappelles.

De mon côté, pas de soucis d'alignement, tout est à la même hauteur (je n'aurais pas supporté un "zigzag" du module ^^). Et il n'y a pas des centaines de solutions, il en a 4 exactement.

1/ La plus simple mais celle que je n'ai pas choisi, modifier ton titre pour qu'il passe sur deux lignes sans modification du CSS.

2/ Mettre "..." lorsque le titre est trop long, mais de mon côté c'était impensable.

3/ Fixer une hauteur (height) plus importante pour coller à un titre sur trois (voire quatre) lignes, ainsi plus de soucis. Seul inconvénient, minime toutefois, c'est que les titres courts auront un espace sur les lignes inutilisées. J'ai choisi cette solution et c'est nickel. Attention cependant à modifier la hauteur dans toutes les balises du module sinon ça risque de bugger.

4/ Réduire la taille de la police pour passer de deux à trois lignes, mais cette solution ne fonctionne que lorsque la police de base est déjà assez grande. Dans mon cas c'est le cas donc c'est passé (associé à la solution 3/) mais dans ton cas la police étant déjà tres petite, je te le déconseille sinon ce sera illisible.

Je te conseille donc la solution 3/ qui sera la plus adaptée dans ton cas et la moins gênante visuellement.

J'espère avoir pu t'aider ! Wink
Disney Analysis
Disney Analysis

Messages : 63
Date d'inscription : 11/11/2014
Age : 31
Localisation : France

http://www.disneyanalysis.fr

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Lun 8 Fév 2016 - 19:01

Ok, merci bien ! J'ai lâche l'affaire concernant cette mise en page mais peut-être que j'y reviendrais un jour ou l'autre. Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 7:47

Alors, j'ai mis une height et ça rend pas trop mal tout compte fait. Pour les titres en 3 lignes, l'image est un peu croppée vers le haut mais je préfère ça à l'écart qui existait avant. Cela fait plus propre : http://www.filmsdelover.com/rubriques/ Pour les articles les plus anciens, l'écart est encore visible mais c'est parce qu'à l'époque, je n'avais pas défini un gabarit-type pour les images. C'est en voie de normalisation. Merci en tous cas pour les infos ! Smile
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 10:06

J'ai encore un peu affiné le truc et je suis plutôt content du résultat. J'ai repassé le titre au-dessus de l'image puisque ça n'amenait que des soucis. J'ai diminué la taille des titres pour que ça soit sur deux lignes max et j'ai spécifié une height aux titres pour que les titres sur une ligne soient bien alignés eux aussi.

blog - [Aux experts] Aide CSS pour l'aperçu du blog. 138e4e59-bc4c-44f3-8e3a-8173b5d9eca2
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 10:16

Par contre, si quelqu'un sait comment faire pour que mes titres h2 soient alignés verticalement à l'intérieur de la zone grise, je suis preneur (c'est surtout pour les titres d'une seule ligne à l'intérieur d'un contenant mesuré pour trois lignes max). Merci ! Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par Solie Dim 28 Fév 2016 - 15:56

Très bonne idée d'avoir repassé les titres au-dessus. La première ligne n'est plus rognée par certaines images.

Pour ta dernière question, as-tu essayé line-height ?
 (Exemple; Si tu as mis une height de 40px à ton contenant, line-height: 40px)
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 17:19

Bonne idée la line-height mais en l'essayant, tous mes titres sont sur une ligne et croppés sur la droite. Je n'ai pas la deuxième et troisième ligne éventuelle. Mais on progresse et j'aurais adoré que tu aies trouvé la solution !

En fait, la difficulté est que mes titres ne sont pas une vraie div. C'est une balise H2 agrandie et avec un fond gris, et je ne sais pas comment faire en sorte que le lien du titre h2 soit aligné. C'est sûrement tout bête mais je ne trouve pas. Merci pour ton retour quand même ! Smile
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Dim 28 Fév 2016 - 20:26

Le "vertical alignement", il n'y a guère que FlexBox qui le permettent, mais cela reste encore expérimental. (en plus, je ne vois pas comment cibler H2, ce n'est pas un élément, même avec flexbox)
Je ne sais pas si c'est une bonne idée, car les juxtapositions de titres sur deux lignes et de titres sur trois lignes ne vont plus être alignés.


Dernière édition par FredVig le Dim 28 Fév 2016 - 20:47, édité 1 fois
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par Solie Dim 28 Fév 2016 - 20:40

FilmsdeLover a écrit:En fait, la difficulté est que mes titres ne sont pas une vraie div. C'est une balise H2 agrandie et avec un fond gris, et je ne sais pas comment faire en sorte que le lien du titre h2 soit aligné.
Tu peux peut-être mettre ta balise H2 dans un module texte... Je procède ainsi pour styler et mettre des liens aux titres, exemple dans ma sidebar. Et tu pourras définir une height à ta div. Par contre, si tes colonnes sont fully responsive, comme ici, cette méthode ne fonctionnera pas, car tu te retrouverais vite avec quatre ou cinq lignes sur les petits écrans...
Solie
Solie

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

http://www.voixoff.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Dim 28 Fév 2016 - 21:05

Ou alors… ne pas mettre de hauteur à h2
mettre le fond gris sur le contenant supérieur
et avec flexbox ça pourrait se tenter :
Code:
div#content .n.clearover.j-blogarticle{margin:5px;padding:0px;background-color:#dddcda;display:flex;flex-direction: column;}
div#content .n.clearover.j-blogarticle h2{height:auto; margin:auto;}

FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Dim 28 Fév 2016 - 21:09

et en prime… ça aligne aussi les contenants dont les images sont moins hautes !
blog - [Aux experts] Aide CSS pour l'aperçu du blog. Af_tif10
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 21:18

Wow. Tu l'as fait. MERCI. Smile
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Dim 28 Fév 2016 - 21:53

Bon, c'est parfait. J'ai mis les codes dans ma feuille CSS et je peux donc désormais choisir les pages qui utilisent cette mise en page beaucoup plus facilement avec les classes CSS du body. Si je dois y apporter des modis en plus, tout est centralisé dans ma feuille de style donc c'est appréciable. Il reste encore du boulot pour continuer à uniformiser les dimensions des images d'aperçus mais le plus dur est fait. Merci encore Fred, ton coup de main fut déterminant une nouvelle fois. Wink
FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Lun 29 Fév 2016 - 12:00

Félicitations !
"Puissante la force de FlexBox être dans ta famille" Wink

Flexbox : Il faudrait vraiment généraliser cette fonction, car c'est bien supporté par les navigateurs, et idéal pour l'adaptative.
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par durk23 Mar 12 Sep 2017 - 11:52

Bonjour,
Cette conversation date mais au cas où, quelqu'un pourrait-il m'aider ?
J'ai bien l'affichage de mon blog sur 2 colonnes mais sur la version sur mobile ou tablette, les liens "lire l'article" et "commentaire" ne fonctionnent plus.
Je ne sais plus quoi faire..
Merci d'avance pour votre aide


<style type="text/css">
/*<![CDATA[*/
div.blogselection {
 display: block;
 width: 100%;
}
div.n.clearover.j-blogarticle {
 width: 46%;
 float: left;
 margin-left: 5px ;
 margin-right: 15px;
 margin-bottom: 5px;
 margin-top: 0px;
 height: 100%;
 width: 300px
}
/*]]>*/
</style>

durk23

Messages : 6
Date d'inscription : 31/08/2017

http://www.durk.jimdo.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FilmsdeLover Lun 11 Fév 2019 - 13:30

2-3 ans après la création de ce topic pour une demande spécifique, j'y suis enfin revenu et j'ai résolu le dernier problème qui me faisait tiquer, à savoir la différence de hauteur de box de titres selon que ce titre tenait sur 2 ou 3 lignes. Il y avait 3 pixels d'écart mais ça me saoulait quand même.

C'est désormais aligné, qu'importe que le texte fasse 1, 2 ou 3 lignes. Pour faire simple, le titre H2 est en display:table et height:55px;, et le lien a: à l'intérieur de ce h2 est en display: table-cell et vertical-align:middle.
blog - [Aux experts] Aide CSS pour l'aperçu du blog. 4a8bcac1833a5919effd01f288af8e64

FilmsdeLover
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Lun 11 Fév 2019 - 17:58

Bravo !
Note : les dernières maj de Explorer ne supportent pas bien certaines propriétés de flexbox, (ce qui permet de centrer les contenu horizontalement entre autres) il faut vérifier si ça fonctionne bien.
Mon sytème de prévisualisation ne monte pas les vignettes du blog, mais c'est peut-être bon quand même.
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par yougz Dim 31 Mar 2019 - 0:13

Bonjour,

Je cherchais comment je pourrai faire sur mon blog pour avoir tous mes articles qui s'affichent en page d'accueil sur 3 colonnes différentes.
9 articles en tout visible sans scroller, 3*3 (3 colonnes et 3 lignes horizontales) et je suis tombé sur ton post et j'ai remarqué que ce que tu avais fait sur ton blog était exactement ce que je cherchais à faire.

J'avais déjà fait cette mise en page mais je devais la modifier à chaque article manuellement. Si tu pouvais m'expliquer vite fait comment  tu t'y es pris pour que les articles se mettent à jour automatiquement, si ce n'est pas trop compliqué, ça m'aiderais bien.

Merci par avance.

yougz

Messages : 7
Date d'inscription : 30/03/2019

https://kulturechronik.fr

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par FredVig Dim 31 Mar 2019 - 12:12

Ce post concerne une disposition de Jimdo qui proposait un module aujourd'hui supprimé : "affichage du blog"
Vous ne pouvez afficher vos articles que sur les pages du blog.
il existe de nombreuses fonctions autour du blog, les catégories, les rubriques, la page blog, le design de ces éléments (voir l'aide jimdo) qui peuvent vous permettre de construire une page comme vous le souhaitez, puis de la rediriger depuis votre page d'accueil, ou de la placer en page d'accueil.
Mais il n'est pas possible de recréer une page statique incluant des résumés d'articles de blog, sans avoir une version ancienne du blog Jimdo. La seule possibilité est de placer un fil Rss, et de modifier l'aspect du résumé ainsi constitué à l'aide de css, mais c'est très limité en design.
FredVig
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

blog - [Aux experts] Aide CSS pour l'aperçu du blog. Empty Re: [Aux experts] Aide CSS pour l'aperçu du blog.

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Page 1 sur 2 1, 2  Suivant

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum