[Aux experts] Aide CSS pour l'aperçu du blog.
+2
Disney Analysis
FilmsdeLover
6 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
[Aux experts] Aide CSS pour l'aperçu du blog.
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 !
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 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]
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 ! 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é !
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é !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 !
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
Super, merci, je vais regarder ça et voir comment l'adapter à mon site de la meilleure façon !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 !
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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)
Pour ta dernière question, as-tu essayé line-height ?
(Exemple; Si tu as mis une height de 40px à ton contenant, line-height: 40px)
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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 !
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 !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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...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é.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
Ou alors… ne pas mettre de hauteur à h2
mettre le fond gris sur le contenant supérieur
et avec flexbox ça pourrait se tenter :
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;}
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
et en prime… ça aligne aussi les contenants dont les images sont moins hautes !
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
Félicitations !
"Puissante la force de FlexBox être dans ta famille"
Flexbox : Il faudrait vraiment généraliser cette fonction, car c'est bien supporté par les navigateurs, et idéal pour l'adaptative.
"Puissante la force de FlexBox être dans ta famille"
Flexbox : Il faudrait vraiment généraliser cette fonction, car c'est bien supporté par les navigateurs, et idéal pour l'adaptative.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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>
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>
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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.
Re: [Aux experts] Aide CSS pour l'aperçu du blog.
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.
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.
Page 1 sur 2 • 1, 2
Sujets similaires
» Changer HTML pour créer marge pour le texte du blog
» Aide sur article de blog et comparateur de prix
» Design pour Blog
» Blog sans commentaires et flux RSSBonjour, J'ai installé dans la barre latérale de mon site un flux RSS (merci Amaranthe!) permettant de s'abonner à mes articles de blog. Or, pour un autre site, j'envisage de faire la même chose avec de "faux" articles
» pas de menu a droite pour activer le blog.
» Aide sur article de blog et comparateur de prix
» Design pour Blog
» Blog sans commentaires et flux RSSBonjour, J'ai installé dans la barre latérale de mon site un flux RSS (merci Amaranthe!) permettant de s'abonner à mes articles de blog. Or, pour un autre site, j'envisage de faire la même chose avec de "faux" articles
» pas de menu a droite pour activer le blog.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|