Aligner des <p> qui sont dans des <div> différents.

**JonasM** · 09/05/2016, 20h29

Bonjour à tous,

Ceci est ma deuxième intervention sur le forum - je suis novice et autodidacte et je rencontre un problème que je n'arrive pas à résoudre malgré des heures de tentatives - j'espère que vous pourrez m'aider.

Dans le cadre d'une édition électronique d'un texte romanesque dont il existe deux versions (variantes textuelles), je souhaiterais générer en HTML un affichage parallèle des deux versions du texte ; mon souhait serait que les paragraphes concernés (voire les autres) se correspondent en vis-à-vis.

Mon texte est balisé en XML-TEI et en voici la structure (mais peut-être n'est-ce déjà pas un bon balisage source... ?) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<TEI>
<teiHeader>...</teiHeader>
<body>
<div ana="version1_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
<div ana="version2_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
</body></TEI>

Qui génère un HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="body">
<div class="version1_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
<div class="version2_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>

Je me demande comment aligner en CSS ces <p class="alignes">, sachant qu'ils se trouvent dans deux <div> différents. Peut-être est-ce impossible ?

Voici ma tentative de CSS (je suis encore plus novice...), mais je vois parfaitement qu'elle n'est pas viable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
p.alignes {
 display:block;
 width:48%;
 margin: 0px 0px 0px 0px;
}

Je vous remercie par avance pour l'aide que vous voudrez bien m'apporter.
Jonas.

Invité · 09/05/2016, 21h00

Bonjour,

la question principale est : "quelle différence entre les classes "version1_du_texte" et "version2_du_texte" ?

Une solution pourrait être :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="version1_du_texte palignes"><p ana="X">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
<div class="version2_du_texte palignes"><p ana="X">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
div.version1_du_texte.palignes p {
 display:block;
 width:48%;
 margin: 0px 0px 0px 0px;
}
div.version2_du_texte.palignes p {
 display:block;
 width:48%; /* ??? */
 margin: 0px 0px 0px 0px;
}

**JonasM** · 09/05/2016, 21h35

Bonjour jreaux62 et merci pour ton aide !

Je pense avoir été plutôt imprécis dans mon exposé.
En fait, chacun des deux <div> comprend une centaine de paragraphes ; parmi eux, certains sont des copies conformes, d'autres présentent des variantes de quelques mots, et certains paragraphes sont présents dans la <div> qui correspond à la version 1 du texte mais absents dans l'autre, et réciproquement.

Grossièrement, mon HTML ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="version1_du_texte">
<p>Bonjour</p>
<p>Il était une fois</p>
<!-- + de nombreux autres paragraphes -->
</div>
<div class="version2_du_texte">
<p>Bonjour vous</>
<p>Il était une fois</p>
<p>Coucou, je suis un paragraphe supplémentaire par rapport à l'autre div</p>
</div>

En écrivant ça, je réalise qu'à mon avis, il faut absolument que je crée une ancre pour lier les paragraphes équivalents d'un div à l'autre (ou bien, un attribut commun)...
J'obtiendrais alors ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="version1_du_texte">
<p class="1">Bonjour</p>
<p class="2">Il était une fois</p>
<p class="3"/>
<!-- + de nombreux autres paragraphes -->
</div>
<div class="version2_du_texte">
<p class="1">Bonjour vous</>
<p class="2">Il était une fois</p>
<p class="3">Coucou, je suis un paragraphe supplémentaire par rapport à l'autre div</p>
<!-- + de nombreux autres paragraphes -->
</div>

Le problème qui demeure concerne l'alignement des paragraphes alors qu'ils sont dans deux blocs <div> différents.
Je me demande si la solution ne serait pas d'insérer dans un seul et unique <div> mes deux versions du texte l'une à la suite de l'autre.

J'ai l'impression d'être un peu confus dans mes explications, j'en suis désolé - je tourne en rond depuis une bonne demi-journée et ça me tape sur le système - je vais faire une petite pause et revenir ensuite...

Merci !

Aligner des <p> qui sont dans des <div> différents.

Positionnement en CSS

Discussions similaires

Partager

Partager