28234 sujets

CSS et mise en forme, CSS3

[Résolu] Régler la hauteur d'un br

Bonjour

Dans une opération de réfection d'un site ancien, je tombe sur de multiples occurrences de <br><br>.
Plutôt que modifier les centaines de page qui contiennent ces @#§µ*!!! j'aimerais bien pouvoir réduire la hauteur des lignes.
J'ai essayé 
br + br{line-height:50%;}
mais ça ne donne aucun résultat alors que 
br + br{display:none;}
fonctionne très bien.
Pas mieux avec 
br + br{font-size:50%;}


Une idée?
gcyrillus a écrit :
tu peut aussi essayer font-size + vertical-align Smiley smile 
br {
  font-size:2em;
  vertical-align:top;
}

http://codepen.io/gc-nomade/pen/zqPqWy


Merci de ta réponse
De façon intéressante, ça ne semble marcher que si on donne une taille plus grande que 1em, c'est à dire en augmentant l'interligne.
Si on met à 0.5em, il ne se passe rien, du moins en apparence (sous FF)
Une idée?
Edit: même résultat sous Chrome
Modifié par PapyJP (05 Apr 2016 - 08:54)
Modérateur
PapyJP a écrit :


Merci de ta réponse
De façon intéressante, ça ne semble marcher que si on donne une taille plus grande que 1em, c'est à dire en augmentant l'interligne.
Si on met à 0.5em, il ne se passe rien, du moins en apparence (sous FF)
Une idée?
Edit: même résultat sous Chrome


Le line-height du conteneur ne change pas lui. par contre as tu vraiment envisager : 
br + br {display:none;}


http://codepen.io/gc-nomade/pen/GZOEmv

<edit/>parce que j'y vois la ta solution simple quand même Smiley smile quelle est ta raison de ne pas vouloir en faire usage ?
Modifié par gcyrillus (05 Apr 2016 - 10:56)
Oui, j'ai bien mis 
br + br{display:none;}
mais ce que je cherche à faire c'est avoir un interligne un peu plus grand quand il y a deux <br>, en gros <br> + <br> = 1,5 ou 1,25 <br>
Je comprends bien pourquoi ça ne marche pas, mais y a t il une solution?
La c... c''est bien sûr d'avoir des <br> en séquence, il y en a des dizaines par page dans des centaines de pages, je ne vais pas aller à la chasse et remplacer tout ça par des <p> qu'on peut styler correctement avec un margin ou un padding selon ce qu'on veut faire.
Les <p> sont des balises enveloppantes, il faut trouver le début et la fin, mais on ne peut pas avoir n'importe quoi dans un <p>..., bref très dur de faire ça par programme.
Bonjour,
PapyJP a écrit :
Je comprends bien pourquoi ça ne marche pas, mais y a t il une solution?

Je ne pense pas...
PapyJP a écrit :
Les &lt;p&gt; sont des balises enveloppantes, il faut trouver le début et la fin, mais on ne peut pas avoir n'importe quoi dans un &lt;p&gt;..., bref très dur de faire ça par programme.

À la rigueur, remplacer toutes tes séries de <br><br><br>... par un <p class="separation"></p>...
Bon au niveau sémantique, tu vas me dire, on est pas top ! Smiley confused
SolidSnake a écrit :

À la rigueur, remplacer toutes tes séries de <br><br><br>;... par un <p class="separation"></p>>...
Bon au niveau sémantique, tu vas me dire, on est pas top ! Smiley confused

De toute façon je n'en suis pas à mettre des balises sémantiques dans ces pages, elles sont toutes bourrées de <span> et de <table> en cascade. Toute la sémantique que l'on reconnait à l’œil disparait dans le code HTML. Pour remettre de la sémantique, il faudrait un outil d'intelligence artificielle, mais ça fera exactement 50 ans à la fin de cette année que j'entends dire que l'intelligence artificielle est pour l'an prochain! C'est vrai qu'on progresse, mais je serai mort avant de voir un programme de ce genre.

Par ailleurs je ne peux pas simplement lancer un programme de "find and replace", car ce n'est pas tout simplement <br><br>, c'est parfois avec des espaces et des lignes vides entre les <br>, des <br> et des <br/>, des <br class="xxx"> etc. C'est fou les variations qu'on peut faire!

Sauf si quelqu'un a une idée géniale à me proposer, je crois que je vais laisser tomber!
Je ne sais pas si l'idée est géniale, mais elle est possible... si on arrive à prendre en compte tous les cas de figure : notepad++ a un système de Rechercher/Remplacer avec lequel on peut utiliser les expressions rationnelles. Il n'est probablement pas le seul.
Smiley sweatdrop Smiley smile
Zelena a écrit :
Je ne sais pas si l'idée est géniale, mais elle est possible... si on arrive à prendre en compte tous les cas de figure : notepad++ a un système de Rechercher/Remplacer avec lequel on peut utiliser les expressions rationnelles. Il n'est probablement pas le seul.
Smiley sweatdrop Smiley smile

La règle du jeu est de ne pas modifier les fichiers, donc Notepad++ n'est pas la solution que je recherche.
Sinon j'ai effectivement essayé "<br.*>\s*<br.*>"
voici ce que ça donne si je cherche cette expression depuis le début du fichier:
http://paralletes.free.fr/tests/photo/br-br.jpg
ça ne donne pas le résultat souhaité.
Mais peut être y a-t-il une erreur dans mon expression régulière?
Modérateur
PapyJP a écrit :
Oui, j'ai bien mis 
br + br{display:none;}
mais ce que je cherche à faire c'est avoir un interligne un peu plus grand quand il y a deux &lt;br&gt;, en gros &lt;br&gt; + &lt;br&gt; = 1,5 ou 1,25 &lt;br&gt;

okay, la je comprend mieux ton dilemme Smiley smile mais du coup je ne vois pas de solution avec display ni float. Cependant, avec firefox + float : http://codepen.io/gc-nomade/pen/MyOVox est ce le résultat recherché ?

Si oui, reprendre l'idée du font-size mais en l'applicant via javascript. Il te faut alors compter les <br/> adjacents , mettre en display:none ceux en trop et adapter a la voler le font-size (font-size X (br X 10%) ) ou qui va bien a l'unique <br/> encore actif.
Modifié par gcyrillus (05 Apr 2016 - 22:25)
A priori, sous Notepad, cette expression régulière devrait fonctionner :
(\s*<\s*BR\s*/?\s*>)+

Testé OK sur une séquence de <BR/> consécutives avec ou sans "/", des espaces, tabulations, etc.
Mais si tu ne veux pas modifier les fichiers, ceci est sans utilité. Smiley biggrin
sepecat a écrit :
Mais si tu ne veux pas modifier les fichiers, ceci est sans utilité. Smiley biggrin

Mais si, c'est utile! Pas sur ce problème peut être mais si ça améliore ma compréhension du fonctionnement de Notepad++ et de l'utilisation des expressions régulières, ça n'est jamais inutile.
Merci de ton aide
Grâce à vos propositions et à une nuit de sommeil, j'ai trouvé la solution suivante: je fais un "Rechercher/Remplacer" en JS au chargement de la page, avec un <p> stylé comme je veux.
Merci d'avoir contribué à ma réflexion.
Sujet clos
Aller à