Gestion du flux dans une balise pre

**friendofweb** · 19/09/2015, 15h29

Bonjour,

Habituellement, lorsque je veux exprimer du code dans une page htm, je le mets entre les balises code et là je découvre la balise pre qui est intéressante pour garder l'indentation d'un code ! Cependant, je voudrais savoir s'il est possible de réduire la marge générée.

Voici ce que j'ai essayé :

essai sans succès

Code htm :

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
 
	<div id="codesource">
	<pre>
	<code>
		h2.font {
			font: italic bold 30px Verdana, Helvetica, Arial, sans-serif;
			}
		h3.font {
				font: bold 6em Times, Garamond;
				}		
	</code>
	</pre>
    <p>
    Je voudrais réduire la marge du flux contenu dans les balises <em>code</em> vers la gauche <em>en gardant l'indentation !</em>
    </p>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
div {border: 1px solid green; width: 700px;}
pre {
  background: silver; width: 700px;
  margin-left: 0px; /* inutile, valeur par défaut*/
  padding-left: 0px; /* ne fonctionne pas */
  text-align: left; /* ne fonctionne pas ! */
}
code {margin-left: 0px;} /* n'est pas pris en compte */
p {text-align: center; color: #A05631;}
em {color: green;}

Je me demande si c'est faisable en CSS.

**NoSmoking** · 19/09/2015, 15h56

Bonjour,
TOUS les blancs contenus entre les balises début et fin sont affichés tels qu'ils le sont dans le code original, c'est le Preformatted Text.

Néanmoins tu peux faire ce que tu veux avec l'élément PRE
exemple :

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Balise PRE</title>
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
pre {
  background:#EEF;
}
.decalage {
  margin-left:-1em;
}
</style>
</head>
<body>
<pre><code>
  h2.font {
    font: italic bold 30px Verdana, Helvetica, Arial, sans-serif;
  }
  h3.font {
    font: bold 6em Times, Garamond;
  }
</code></pre>
<pre class="decalage"><code>
  h2.font {
    font: italic bold 30px Verdana, Helvetica, Arial, sans-serif;
  }
  h3.font {
    font: bold 6em Times, Garamond;
  }
</code></pre>
</body>
</html>

**friendofweb** · 19/09/2015, 16h07

Excellent ! Merci !
~~Je vais méditer.~~

Voilà, j'ai médité, pour obtenir la marge désirée, je dois utiliser la touche de tabulation.
J'arrive à :

centrer
aligner à gauche (comportement par défaut)
aligner à droite (seulement avec float et s'il y a un paragraphe après, ça pose problème car le paragraphe ne passe pas à la ligne.)
Je ne suis pas parvenu à déplacer l'élément "pre" en utilisant "margin-right". Est-ce normal ?

Voici le lien de mes tests : tests
~~je continurai à chercher les réponses demain.~~

Un peu de lecture : alignement float

Résulats de la lecture : tests2

Si je pouvais savoir pourquoi margin-right n'est pas pris en compte (sans texte après la balise "pre"), ça m'arrangerait.

**NoSmoking** · 20/09/2015, 11h07

Si je pouvais savoir pourquoi margin-right n'est pas pris en compte (sans texte après la balise "pre"), ça m'arrangerait.

dans le code que je t'ai fourni plus haut modifie .decalage en

Code :

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

1
2
3
4
.decalage {
  margin-left:5em;
  margin-right:5em;
}

les marges sont bien prises en compte.

Pour le reste je vois que tu te débrouilles bien

Une petite remarque personnelle, pourquoi ne pas mettre tes "découvertes/conclusions" dans la discussion plutôt que dans le C#dePen ?

**friendofweb** · 20/09/2015, 11h57

Merci, j'essaye d'avoir pour le lecteur une vision synthétique et n'écrire que les conclusions, pour arriver à une conclusion finale, avec enfin, un code source finale.
Ce qui permet de ne pas surcharger de données le serveur de developpez.com. L'inconvénient est que du coup je surcharge le site codepen.io, mais bon, c'est un peu à ça qu'il sert

Pour info, je dois partir, à plus tard !

**NoSmoking** · 20/09/2015, 15h56

Ce qui permet de ne pas surcharger de données le serveur de developpez.com. L'inconvénient est que du coup je surcharge le site codepen.io, mais bon, c'est un peu à ça qu'il sert

sur DVP tu as l'assurance que cela survivra et que ta discussion sera facilement retrouvable contrairement à l'anonymat de x milliers, voire plus, de codes dont on ne sait pas si ils fonctionnent !

Pour en revenir au sujet les éléments PRE sont des éléments comme les autres donc avec les mêmes propriétés CSS et la même gestion dans le flux.

**friendofweb** · 20/09/2015, 19h59

Voilà, en fait, il fallait que je comprenne que ça dépend aussi de la largeur de la balise pre et que finalement, il ne faut pas réduire la largeur, mais s'occuper des marges... Il y a quand même un inconvénient à la balise pre, c'est qu'en gérant le flux avec le clavier, le code html n'est pas bien indenté, donc pas très propre !

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
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="test3.css" />
	</head>
	<body>
		<h1>Gestion du flux et alignement de la balise "pre" (tests)</h1>
		<p id="p0">
			L'intérêt de la balise <code>pre</code>
			est (pour moi, pour l'instant) de pouvoir garder l'indentation, lorque l'on veut communiquer un code.
			<br />
			Le Code dans la balise <code>pre</code>, n'est qu'un exemple !
		</p>
		<br />
		<pre id="centre"><code>h2.font {
		font: italic bold 30px Verdana,
		Helvetica, Arial, sans-serif;
		}
h3.font {font: bold 6em Times, Garamond;}</code></pre>
		<br />
		<p id="p1">
		Apparemment, le flux de données, les espacements, se gèrent avec le clavier.<em> (Alignement de pre à gauche (par défaut))</em>
		</p>
		<pre id="test"><!-- alignement à gauche --><code>h2.font {
		font: italic bold 30px Verdana,
		Helvetica, Arial, sans-serif;
		}
h3.font {font: bold 6em Times, Garamond;}</code></pre>
		<p id="p2">
			Marge de gauche, gérée avec le <b>clavier</b> <em>(espace entre le début de <code>pre</code></pre> et la déclaration <code>
			h2</code> - alignement à droite, via float)</em>
		</p>
		<!-- La marge est gérée via le clavier, la touche tab -->
		<!-- alignement à droite, via float -->
		<pre id="testmarge"><code>	h2.font {
		font: italic bold 30px Verdana,
		Helvetica, Arial, sans-serif;
		}
	h3.font {font: bold 6em Times, Garamond;}</code></pre>
		<p id="attention">
			float, c'est bien mais le texte d'après ne passe pas à la ligne et je n'ai pas réussi l'alignement à droite via margin-right.
			<em>Il faut alors utiliser <code>clear:both;</code></em>
		</p>
		<br />
		<p id="p4">
			On constate que la marge supérieur du dernier <code>pre</code>, n'est pas égale à la marge du bas !
			Il faut alors jouer avec <code>margin-top: -3px</code>
		</p>
		<!-- br, car display: inline -->
		<br />
		<!-- Alignement à droite test -->
		<pre id="predroitetest">{propriété: valeur;}</pre>
		<code>margin-right</code> n'est pas pris en compte. Suis-je obligé d'utiliser <code>float</code>?
		<p id="p5">
			<code>margin-right</code>, est en fait pris en compte, mais il y a une largeur qui est définie à 160px
			<br />
			En définissant par exemple <code>margin-right: 5em;</code> et <code>margin-left: 86em;</code>, on obtient le décalage vers la droite.
		</p>
		<!-- Alignement à droite succès ! -->
		<pre id="predroiteok">{propriété: valeur;}</pre>
	</body>
</html>

Code css :

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
58
 
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
  background: #D9DDDD;
}
h1 {text-align: center;}
/**** balise pre ****/
/* centre, test, testmarge, */
#centre {
  margin:auto;
  background: silver; width: 352px;
}
/* Alignement par défaut (gauche) */
#test {
  background: silver;
  width: 352px;
}
/* alignement à droite */
#testmarge {
  float: right;
  background: silver; 
  width: 353px;
}
/* test alignement à droite avec margin, échec */
#predroitetest {
	background: silver;
	width: 160px;
	display: inline;
	margin-right: 0px;
	}
/* Alignement à droite OK ! */
#predroiteok {
	background: silver;
	margin-right: 5em;
	margin-left: 86em;
	}
/****  Paragraphes ****/
#attention {
  width: 90%;
  color: #365ADB;
  background: #BCF4D5;
  clear:both; /* Passage à la ligne du paragraphe */
}
p {
  background: #C6F2EC;
  text-align: center;
  color: #A05631; 
  border: 1px solid black; /* Pour voir les marges */
  width: 85%;
  margin: auto;
}
 
#p5 {margin-top: 20px;}
em {color: #F2828C;}
code {color: blue;}

**NoSmoking** · 22/09/2015, 21h36

Il y a quand même un inconvénient à la balise pre, c'est qu'en gérant le flux avec le clavier, le code html n'est pas bien indenté, donc pas très propre !

je ne vois pas ce que tu veux dire par là, le code contenu dans une balise PRE est "reporté" tel qu'écrit, tabulation, retour ligne, espace...mais n'est aucunement mis en forme par le navigateur lorsqu'il rencontre cette balise.

D'autre part tu peux tout à fait jouer avec la largeur et également avec les propriétés CSS comme par exemple

Code :

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

1
2
3
4
5
pre {
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
}

**friendofweb** · 24/09/2015, 11h58

Bonjour,

Ce que je veux dire, c'est que les blancs dans la balise pre sont transcris en visuel dans le navigateur, mais que la conséquence est qu'il n'y a pas d'indentation propre dans le code source (lignes 23, 32 et 43 du dernier code html). Je jetterai un oeil aux propriétés que tu proposes plus tard, car pour l'instant, je suis sur un autre souci.

Merci pour ton intérêt !

Cordialement,

**friendofweb** · 13/11/2016, 10h17

Bonjour,

J'ai trouvé une manière de faire intéressante, en relation avec cette discution, dont voici un aperçu : ici
Je ne peux pas trop m'attarder sur ce sujet pour l'instant, car je décortique les propriétés d'un tutoriel... Et j'ai besoin de me concentrer sur une chose à la fois...

Gestion du flux dans une balise pre

CSS

Discussions similaires

Partager

Partager