Blocs pour éviter les veuves et orphelines

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous !

J'ai remis dernièrement mon CV à jour. Dans l'idée de suivre ce que je fais, je l'ai réalisé sous forme de page web "tout en un" (donc JavaScript et CSS directement dans le code de la page). J'avais fait en sorte qu'à l'impression, ce ne soit pas complètement illisible et mal organisé (donc quelques styles @media print), mais il y avait un truc qui m'a posé problème, et qui me le pose encore. Je l'avais réglé en spécifiant un page-break-before: always sur un élément où je pouvais passer sur une autre page.

Le problème, c'est au niveau de ce page-break-before forcé que ça me gène. A chaque ajout conséquent, je dois donc voir ce qu'il se passe à l'impression, et le déplacer au besoin.
Je me demandais s'il y avait un moyen de définir des blocs qui passent à la page suivante automatiquement, sans que leur contenu ne soit réparti sur plusieurs pages ?

Merci d'avance  :)

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0
Auteur du sujet

Apparemment, c'est supporté à partir de IE 8 et Fx 19 pour les plus en retard, donc ça devrait le faire.

J'étais passé totalement à côté, merci beaucoup  :)

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0
Auteur du sujet

Je savais que j'avais bien fait de ne pas signaler le sujet comme résolu  ^^

A un moment, j'ai une structure comme celle-ci dans mon CV :

1
2
3
4
5
6
<section class="experience vcalendar">
    <h2 id="Career">Work experience</h2>
    <div id="…" class="vevent">
        <!-- … -->
    </div>
    <!-- … -->

Début de la liste de mes expériences professionnelles

Le souci que j'ai désormais, c'est que si les blocs .vevent ne sont plus répartis sur plusieurs pages, ils sont orphelins, donc le titre est seul à la fin de la page précédente. Est-ce qu'il y a moyen de faire en sorte qu'il reste avec le premier .vevent sans changer la structure HTML ?
Actuellement, j'ai ce CSS :

1
2
3
4
5
6
7
section>h2 {
    page-break-after: avoid;
}
.half, .section, .vevent, .vcard {
    page-break-inside: avoid;
    page-break-before: avoid;
}

Ce que j'ai tenté pour ne pas avoir d'orphelins sur une page

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0

Est-ce que les .vevent d'une <section> remplissent la hauteur d'une page ? Si oui je pense que le problème vient d'un "conflit" entre leur page-break-before: avoid; et le page-break-after: avoid; de <h2>, du coup la logique voudrait qu'on supprime page-break-before: avoid;

+0 -0
Auteur du sujet

Mmm… J'ose te demander ce que tu as essayé ? Parce que j'aurais envie de mettre des page-break-before: avoid sur les différents blocs .half:first-child, .section:first-child, .vevent:first-child, .vcard:first-child

Edit

Ah, mais c'est inutile ainsi, j'ai les titres avant ce que je souhaiterais cibler  >_<

Édité par Ymox

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0

Coucou,

Alors que je cherchais tout à fait autre chose, je suis tombée (rassurez-vous, je me suis pas faite mal) sur cet article d'Alsacréations sur le média-print qui y fait allusion avec les propriétés "orphans" et "widows"

Ça pourrait peut être répondre à ton besoin

Édité par Amrom

+1 -0

Le problème c'est que ces éléments sont trop hauts, du coup tu ne laisses pas de choix au navigateur qui coupe où il peut. Si tu remplaces ton

1
2
3
4
.half, .section, .vevent, .vcard {
    page-break-inside: avoid;
    page-break-before: avoid;
}

par

1
2
3
.what {
    page-break-inside: avoid;
}

je pense que tu comprendras.

+1 -0
Auteur du sujet

Oui, effectivement. Mais je me rends compte que je gère mal ces blocs .what, je devrais y avoir des séparations dans le HTML entre chaque trucs qui s'y trouvent, et là, ce n'est pas le cas : j'ai stupidement mis des <br />  >_<

Je modifie pour avoir des "sous-blocs", et je vais regarder avec ces orphans et widows, qui pourraient effectivement m'aider dans ce sens. Appliquées sur les bons blocs et conjointement à des page-break-before: avoid, je pourrais avancer peut-être…

Edit

Cette histoire de sous-blocs m'a permis de mieux répartir mes données, donc le problème n'était pas vraiment dans la mise en page, mais dans la sémantique  :-°

Édité par Ymox

Evitez qu'on vous dise de les lire : FAQ PHP et Symfony 2Tutoriel WAMP • Cliquez 👍 pour dire merci • Marquez vos sujets résolus

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte