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.

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

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

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

Message par FilmsdeLover le 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 :

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

Message par FredVig le 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][/img]

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

Messages : 58
Date d'inscription : 11/11/2014
Age : 25
Localisation : France

http://www.disneyanalysis.fr

Revenir en haut Aller en bas

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

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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


_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

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

http://www.voixoff.com

Revenir en haut Aller en bas

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

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


_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

et en prime… ça aligne aussi les contenants dont les images sont moins hautes !

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

Wow. Tu l'as fait. MERCI. Smile

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
Utilisateur de Jimdo depuis 2009 qui peut être grognon parfois si vous ne cherchez pas dans l'Aide Jimdo avant de poser des questions. Je ne bosse pas pour Jimdo.
A consulter : Tutoriels et guides pour Jimdo.
avatar
FilmsdeLover

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

http://www.filmsdelover.com

Revenir en haut Aller en bas

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

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

_________________
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: [Aux experts] Aide CSS pour l'aperçu du blog.

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

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

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