28172 sujets

CSS et mise en forme, CSS3

[Résolu]Gérer un espacement dans le flot

Bonjour
J'ai un petit problème que j'aimerais traiter uniquement par CSS, mais je bute sur un point.
Voici ce que j'obtiens dans une page avec 
<h2>His wife, Meretites</h2>

upload/1487320729-48769-image1.png
je modifie mon code comme ceci:
<h2 class="clear">His wife, Meretites</h2>

ayant défini 
.clear{clear:all;}

J'obtiens alors
upload/1487320877-48769-image2.png
Voici ce que je veux obtenir:
upload/1487320925-48769-image3.png
Dans l'état actuel du code, je suis obligé de clore la section courante et d'en ouvrir une autre pour obtenir ce résultat

    ..........
</section>
<section>
    <h2>His wife, Meretites</h2>
    ..........

Question: y a-t-il un moyen de définir la classe "clear" pour éviter d'avoir à effectuer cette opération?
Merci de vos conseils
Modifié par PapyJP (17 Feb 2017 - 17:35)
Bonjour, PapyJP.

Je pense qu'il faudrait que vous mettiez davantage de code... ou un lien vers la page.

Smiley smile
Bonjour PapyJP,

Il me semblait qu'au lieu de "all" clear n'avait que trois attributs propres à lui-même dont "both" (les deux côtés).

Et si à cette classe vous ajoutiez une marge haute, qu'en pensez-vous ?
En disant ceci c'est parce que je considère que votre script n'appose la classe clear qu'aux éléments h2 d'une section qui n'en sont pas l'ainé (un équivalent à section > h2:not(:first-of-type) ).
Greg_Lumiere a écrit :
Bonjour PapyJP,

Il me semblait qu'au lieu de "all" clear n'avait que trois attributs propres à lui-même dont "both" (les deux côtés).

Bonjour Greg
C'est une faute de frappe, le style est bien "clear:both;"
la source de cette erreur, c'est que dans le temps on écrivait <br clear="all"> pour "casser" le flot.
Greg_Lumiere a écrit :
Et si à cette classe vous ajoutiez une marge haute, qu'en pensez-vous ?

C'est ce que j'ai commencé à faire, mais ça n'a rien changé: en fait le <h2> étant "flottant", margin:top:xxx; n'agit pas
Greg_Lumiere a écrit :
En disant ceci c'est parce que je considère que votre script n'appose la classe clear qu'aux éléments h2 d'une section qui n'en sont pas l'ainé (un équivalent à section > h2:not(:first-of-type) ).

C'est à peu près cela.
Mon problème vient de ce que les pages à l'origine sont dans un format HTML totalement obsolète, j'ai écrit un programme qui a transformé tout le HTML en gardant le contenu, et cela dans près de 1000 pages!!!
Mon programme a généré une classe "clear" dans les cas jugés opportuns par l’algorithme, et effectivement il a généralement bien fait.
J'en suis à la phase de relecture de toutes les pages pour corriger manuellement ce que l'algorithme n'avait pas compris. C'est au cours de cette relecture, à force de devoir couper des sections à la main, que je me suis demandé s'il n'y avait pas plus simple.

En fait je viens de penser à un truc: si j'ajoute un h2.clear::before{...} je dois pouvoir obtenir ce que je veux.
Je verrai cela à mon retour car je dois m'absenter dans les minutes qui viennent.
PapyJP a écrit :

C'est ce que j'ai commencé à faire, mais ça n'a rien changé: en fait le &lt;h2&gt; étant "flottant", margin:top:xxx; n'agit pas
Évidemment, suis-je bête ? (ne répondez pas svp)

PapyJP a écrit :

En fait je viens de penser à un truc: si j'ajoute un h2.clear::before{...} je dois pouvoir obtenir ce que je veux.
Je verrai cela à mon retour car je dois m'absenter dans les minutes qui viennent.

C'est ce à quoi j'étais justement en train de penser...
Modifié par Greg_Lumiere (17 Feb 2017 - 12:11)
Je viens de faire un petit test, et ceci semble fonctionner
h2.clear::before {
  content: '';
  display: block;
  height: 10rem;
}
L'élément ainsi généré se place au dessus de son parent, occupe toute la place de part son modèle de boite et occupe l'espace correspondant à "la marge" que vous désirez.

Par contre il vous faudra penser à le nettoyer des effets subis par l'héritage (bordures...).
Meilleure solution
Sujet clos
Aller à