Ecart en trop entre le titre et le texte de la section.

**Neelix57** · 26/06/2023, 13h44

Bonjour,

J'affiche sur une page, les caractéristiques inhérentes à une série télévisée (producteurs, réalisateurs, acteurs).

Certaines séries contiennent des périodes. Sur celles-ci, j'ai un écart entre le titre de la section 'DISTRIBUTION' et la liste du casting.

Je ne parviens pas à réduire cet écart. Pour cela, il me faudrait pouvoir appliquer des paramètres différentes aux balises <span> qui affichent
la période et aux balises <p> qui affichent les acteurs et rôles.

Voici le résultat escompté:
Nom : screen1.png
Affichages : 91
Taille : 314,2 Ko

Nom : screen1.png
Affichages : 91
Taille : 314,2 Ko

Voila ce que j'obtiens:
Nom : screen2.png
Affichages : 85
Taille : 331,2 Ko

Voila mon code PHP:

Code php :

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
<!-- CAST SECTION DISPLAY -->
<h2 class="seriesSubtitles">DISTRIBUTION</h2>
<div>
	<?php
		// Cast Query
		$sql = <<<SQL
			SELECT S.seriesId, CP.characterId AS charId, P.personId, seriesTitle, characterName AS charName, personName, appearanceOrder AS appOrder, period, periodNumber AS periodNum FROM CASTING AS C
			JOIN SERIES AS S ON S.seriesId = C.seriesId
			JOIN PERSON AS P ON P.personId = C.personId
			JOIN CHAR_PLAYED AS CP ON CP.characterId = C.characterId
			WHERE S.seriesId = :seriesId
			ORDER BY periodNum, appOrder
			SQL;
 
		$castQuery = $pdo->prepare($sql);
		$castQuery->bindParam(':seriesId', $seriesId, PDO::PARAM_INT);
		$castQuery->execute();
		$rows = $castQuery->fetchAll();
 
		if ($rows[0]['period'] == '-') {
		    foreach ($rows as $row) {
		        $cast[$row['charName']][] = $row['personName'];
                   }
		    foreach ($cast as $char => $persons) {
		        echo '<p class="castAndCrew">', implode(' -> ', $persons), " : {$char}</p>";
		    }
		} else {
		    foreach ($rows as $row) {
		        $cast[$row['period']][$row['charName']][] = $row['personName'];
		    }
		    foreach ($cast as $period => $chars) {
		        echo "<span id='castSubtitle' class='castAndCrew'>".$period."</span>";
		        foreach ($chars as $char => $persons) {
		            echo '<p class="castAndCrew">', implode(' -> ', $persons), " : {$char}</p>";
		        }
		    }
		}
	?>	
</div>

Et mon CSS:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
@font-face {
	font-family: "Bookman Old Style";
	src: url("../fonts/bookman.ttf") format("truetype");
}
 
.series {
	display: flex;
	font-size: 12px;
	text-align: center;
}
 
figure.poster {
flex: 50%;
	position: fixed;
	top: 1em;
	left: 15rem;
 
}
img.seriesImage {
 
	width: 100px;
	box-shadow: 3px 3px 4px 3px rgba(255, 255, 255, 0.6);
	border-radius: 2px;
}
.imageText {
	position: absolute;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	bottom: 8px;
	font-size: 18px;
}
article.seriesRecord {
	flex: 50%;
}
.castAndCrew {
	font: 12px "Bookman Old Style";
	line-height: 30%;
	color: #000;
	margin-top: 1.5rem;
}
p.castAndCrew {
	margin-bottom: -0.7rem;
}
span.castAndCrew {
	display: inline-block;
	position: relative;
	top: 1.2rem;
	padding-bottom: 0.7rem;
}
.seriesTitle, .seriesSubtitles, .castAndCrew {
	font-family: "Bookman Old Style";
	font-weight: bold;
}
.seriesTitle {
	font-size: 22px;
	color: #ff0000;
}
#spinOff { /*Utilisation d'une balise <span>*/
	position: relative;
	font: 16px "Bookman Old Style";
	font-weight: bold;
	color: #ff0000;
	top: -1rem;
}
 
.seriesSubtitles {
	font-size: 14px;
	color: #000;
	padding-top: 2rem;
	padding-bottom: 0.2rem;
}
 
.retour {
	display: block;
	padding-top: 2rem;
}
.retour > span {
	margin-top: 2rem;
}
.retour a {
	font-size: 18px;
	font-weight: bold;
	text-decoration: underline;
	color: #0000ff;
}

**NoSmoking** · 28/06/2023, 11h27

Bonjour,
il nous faudrait le code HTML généré pour pouvoir faire une analyse judicieuse !

**Neelix57** · 30/06/2023, 09h22

Bonjour,

Merci de vous occuper de mon cas, voici le code généré:

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
<h2 class="seriesSubtitles">DISTRIBUTION</h2>
<div>
	<span class="castAndCrew">1984-1986</span>
	<p class="castAndCrew">Jan Michael Vincent : Springfellow «Spring» Hawke</p>
	<p class="castAndCrew">Ernest Borgnine : Dominic Santini</p>
	<p class="castAndCrew">Jean Bruce Scott : Caitlin O'Shennessy</p>
	<p class="castAndCrew">Alex Cord : Michael «Archangel» Goldsmith Briggs III</p>
	<p class="castAndCrew">Deborah Pratt : Gabrielle / Marella</p>
	<span class="castAndCrew">1987</span>
	<p class="castAndCrew">Barry Van Dyke : St. John Hawke</p>
	<p class="castAndCrew">Geraint Wyn Davies : Major Mike Rivers</p>
	<p class="castAndCrew">Michele Scarabelli : Jo Santini</p>
	<p class="castAndCrew">Anthony Sherwood : Jason Locke</p>	
</div>

**NoSmoking** · 30/06/2023, 11h11

Bon, vu la structure HTML et le CSS associé il y a abus de margin dans tous les sens et de positionnements farfelus, il faut faire simple voire certaines fois rien

Sur base du HTML suivant, utilisation de balises à mon sens plus sémantiques :

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
<div class="liste">
  <h2>DISTRIBUTION</h2>
  <dl>
    <dt>1984-1986</dt>
    <dd>Jan Michael Vincent : Springfellow «Spring» Hawke</dd>
    <dd>Ernest Borgnine : Dominic Santini</dd>
    <dd>Jean Bruce Scott : Caitlin O'Shennessy</dd>
    <dd>Alex Cord : Michael «Archangel» Goldsmith Briggs III</dd>
    <dd>Deborah Pratt : Gabrielle / Marella</dd>
  </dl>
  <dl>
    <dt>1987</dt>
    <dd>Barry Van Dyke : St. John Hawke</dd>
    <dd>Geraint Wyn Davies : Major Mike Rivers</dd>
    <dd>Michele Scarabelli : Jo Santini</dd>
    <dd>Anthony Sherwood : Jason Locke</dd>
  </dl>
</div>

le simple CSS suivant devrait répondre à ton attente :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.liste {
  font: 12px "Bookman Old Style";
  line-height: 1.5;       /* pour donner un peu d'air */
}
.liste h2 {
  font-size: 14px;
}
.liste dt {
  margin-bottom: .5em;
  font-weight: 700;
}
.liste dd {
  margin: 0;              /* indentation par défaut */
}

Il est souvent préférable de faire simple

**Neelix57** · 30/06/2023, 21h39

Merci pour ton aide NoSmoking.

Mais c'est vrai, c'est plutôt le foutoir dans mon CSS.

J'ai l'intention d'y remédier.

Ecart en trop entre le titre et le texte de la section.

CSS

Discussions similaires

Partager

Partager