Alignement Texte et texte enrichi

**bernie74** · 06/11/2015, 09h47

Bonjour

Dans un tableau, j'ai 2 champs l'un à coté de l'autre.
Un vient d'une variable texte , et l'autre d'un texte enrichi.

Je n'arrive pas à aligner proprement les 2 textes , comme vous pouvez le voir sur l'image.
Y a t'il une solution simple ?
Cordialement

Bernie

**Christophe P.** · 06/11/2015, 10h56

Bonjour,

quel est le code HTML associé à cette image ?

**bernie74** · 06/11/2015, 11h06

Ca vient d'un fichier Xsl :

Code html :

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

1
2
3
4
5
6
7
<table >
    <tr>
        <td  style="width:70px;height:20px;text-valign:top;" ><B><xsl:value-of select="concat(substring(@Date, 9, 2), '/', substring(@Date, 6, 2), '/', substring(@Date,1,4))" /> </B></td>
        <td > ...... </td>
	<td ><xsl:value-of disable-output-escaping="yes" select="@Titre" /> </td>
    </tr>
</table>

Le text-valign:top; est un essai qui ne change rien.

**Christophe P.** · 06/11/2015, 12h28

La première cellule (balise "td") possède un style que la deuxième n'a pas. En mettant le même style dans les deux (ou en supprimant le premier) les contenus devraient s'aligner.

**bernie74** · 06/11/2015, 13h43

Même sans style, j'ai toujours ce décalage.

**Christophe P.** · 06/11/2015, 13h50

Et en supprimant aussi :

Code :

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

disable-output-escaping="yes"

ce n'est pas mieux ?

**Jacques Beauregard** · 06/11/2015, 13h53

Ou sinon en nous fournissant le code HTMl généré complet ?
navigateur ==> F12

**bernie74** · 06/11/2015, 16h06

Christophe P. > si j'enlève la variable disable-output-escaping="yes" , ca ne marche pas: j'obtiens ca :

Jacques Beauregard > j'avais essayé de le faire , mais j'ai un erreur d'active X . Dès que j'y arrive , je mets le code.

Invité · 06/11/2015, 16h29

Bonjour,

text-valign n'existe pas. C'est vertical-align.

vertical-align : la propriété vertical-align ne fonctionne que pour les cellules (<td></td>) ou les éléments de type inline-block.

**bernie74** · 06/11/2015, 21h59

Voici le texte :

Code :

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

1
2
3
4
5
6
7
8
9
<table>
	<tbody>
		<tr>
			<td><b>28/10/2015</b></td>
			<td> ...... </td>
			<td><div class="ExternalClassFE3E7E4000CF45C9AF9A11129A931D3C"><p>test</p></div></td>
		</tr>
	</tbody>
</table>

C'est la balise <p> qui peut faire ca ?

jreaux62 > Ok

Invité · 07/11/2015, 00h41

Les <div> et <p> n'ont pas grand intérêt, si ?

Et cette class "ExternalClassFE3E7E4000CF45C9AF9A11129A931D3C", c'est quoi ?

Code :

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

			<td class="ExternalClassFE3E7E4000CF45C9AF9A11129A931D3C">test</td>

**NoSmoking** · 07/11/2015, 19h18

Bonjour,
l'utilisation d'une TABLE ne me paraît pas judicieuse, quoiqu'il en soit l'utilisation de line-height devrait régler ton problème.

Exemple sur base d'une liste OL

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
ol.saints {
  padding: 0;
  list-style: none;
}
ol.saints li {
  width:15em;
  line-height:1.5em;
}
ol.saints li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ".................................."
}
ol.saints span:first-child {
  padding-right: 0.25em;
  font-weight:bold;
  background: white;
  font-size:1.25em;
}
ol.saints span + span {
  float: right;
  width:5em;
  padding-left: 0.25em;
  background: white
}
</style>
</head>
<body>
<div id="main">
  <ol class=saints>
    <li><span>07.11.2015</span><span>Karine</span></li>
    <li><span>08.07.2015</span><span>Geoffroy</span></li>
    <li><span>09.07.2015</span><span>Théodore</span></li>
  </ol>
</div>
</body>
</html>

**bernie74** · 07/11/2015, 22h18

jreaux62 > Le première texte que j'ai donné , vient d'un fichier Xsl d'une bibliothèque de style de Sharepoint.
Le second texte est le résultat en html.
La seule chose que je peux gérer est le fichier Xsl, l'autre c'est ce que me ressort sharepoint.

J'ai posé la question ici parce que la syntaxe du fichier xsl ressemble à de l'html, peut être qu'il y a une petite différence.

**bernie74** · 09/11/2015, 10h13

A priori, j'ai trouvé une solution en mettant :
style="vertical-align:super" pour le texte de gauche
et style="vertical-align:sub" pour le texte de droite.

Je ne sais pas si c'est propre mais ca à l'air de marcher.
Merci à tous .

**NoSmoking** · 10/11/2015, 21h35

Je ne sais pas si c'est propre...

mon avis qui n'engage que moi bien sûr : je dirais que c'est une horreur

Alignement Texte et texte enrichi

HTML

Discussions similaires

Partager

Partager