Ordonner une partie de la page horizontalement.

Version imprimable

30/08/2016, 16h11
Luke spywoker

Ordonner une partie de la page horizontalement.
Salut les HTML,

J'ai le problème suivant:

j'aimerai présenter une image et plusieurs lignes de texte et d'images sur la même ligne horizontale:

En faites: c'est pour la présentation d'un livre dont la couverture est a a gauche et à sa droite plusieurs lignes de texte et des étoiles (images).
Code:

1 2 3 4 5 6 +++++++++ ligne de texte N° 1 +++++++++ ligne de texte N° 2 ++<img>++ ligne de texte N° 3 +++++++++ <img><img><img><img><img> +++++++++ ligne de texte N° 4
Et j'y arrive mais avec l'ancienne technique: c.a.d un tableau...

ce qui pose le problème des images a droite (qui est en faite un tableau d'images: des étoiles) qui s'étire si j'ajoute du texte sur les lignes 1,2,3 ou 4.

Le problème doit se résoudre facilement sans utilisé des méthodes barbares, mais comme cela fait quelques années que j'ai pas fait cela, ça me pose problème.

Merci pour vos réponses éclairées illuminant les ténèbres de mon ignorance.
30/08/2016, 16h15
Invité

Bonjour,

commence par montrer ton code.
Ca fera une base de travail.

Sinon, en CSS, voir : display:flex;
30/08/2016, 16h22
Luke spywoker

Si c'est vraiment nécessaire ?

Parce-que j'ai pas le code sous la mains là.
30/08/2016, 16h49
Invité

Moi non plus :aie:

Okay voici le code simplissime:

Code:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Books</title>
<meta charset='utf-8'>
<meta name='keywords' lang='en' content="">
<meta name='description' lang='en' content="">
<meta name='robots' content='index,nofollow'>
<meta name='googlebot' content='index,nofollow'>
 
 
<link href="../CSS/main_stylesheet.css" media="all" rel="stylesheet" type="text/css" />
 
<!-- Unused <script src='../dev-files/JQuery/jquery-1.6.2.min.js' type="text/javascript"></script> -->
 
<!-- Unused <script src="../dev-files/JQuery/jquery-1.11.3.min.js" type="text/javascript"></script> -->
 
<!-- Self-implemented javascript-JQuery images gallery. -->
<!-- Unused <script src="../javascript/images_gallery.js" type="text/javascript"></script> -->
<!-- Unused <script type="text/javascript">gallery=new Gallery() ;</script> -->
 
<!--    Centralise the import of the highlight.js syntax highlight plug-in stylesheet.   -->
<!-- Unused <link href="../CSS/highlight_stylesheet.css" media="all" rel="stylesheet" type="text/css" /> -->
 
<!-- Unused <script src="../javascript/highlight.pack.js"></script> -->
<!-- Unused <script>hljs.initHighlightingOnLoad();</script> -->
 
<style>
.credits_table {  text-align : left ; margin : auto ; border-collapse : collapse ; border-width: 5px ; padding : 8px ; margin-right : 76% ; width : 72% ;  }
 
.credits_table_cells { text-align: left ; border-width: 8px ;  border-width: 5px ; color : #002b36 ; padding : 4px ; }
</style>
 
</head>
 
<body>
 
<div class="centered">
 
<h1 class="underlined">Books</h1> <!-- Title of the Micro Music Player project. -->
 
<h2>Introduction</h2> <!-- Bref introducy to the Micro Music Player project. -->
 
<div class="marging">
 
<blockquote><p>I used to read programming and computer books since more than 5 years and I think I have read a lot...</p>
<p>So I think it's time for me to publish on my website good books to read critics advices.</p>
<p>I will describe for you different aspect of the books:</p>
<ul>
  <li>The didactic of the author</li>
  <li>How the book is written (the style from the author).</li>
  <li>About the codes if their are some and the codes explanations.</li>
  <li>My opinion about the book and a personnal comment describing the book generally.</li>
</ul> 
</blockquote>
 
</div>
 
<h2>Books list</h2>
 
<div class="marging">
 
<!-- The problem begin here -->
 
<a href="./covers/Using%20the%20C%2B%2B%20Standart%20Template%20Libraries.jpg" style="text-decoration : none ; color : black ;">
<table>
<caption><b>Using the C++ Standart Template Libraries</b></caption>
 
<tr>
 
<td rowspan="4"><img src="./covers/Using%20the%20C%2B%2B%20Standart%20Template%20Libraries.jpg" height="160" alt="Cover of the book: Using the C++ Standart Template Libraries"></td>
 
<td class="credits_table_cells"><b>Author:</b></td>
 
<td class="credits_table_cells">Ivor Horton (Senior)</td>
 
</tr>
 
<tr>
 
<td class="credits_table_cells"><b>Release year:</b></td>
 
<td class="credits_table_cells">2015</td>
 
</tr>
 
<tr>
 
<td class="credits_table_cells"><b>Quality:</b></td>
 
<td class="credits_table_cells">
<div style="background-color : #000000 ; border-style : ridge ; border-color : #FFFF00 ; padding : 1px ; border-radius : 25px ;">
<div style="text-align : center ;">
<img src="./covers/starred.png" alt="star">
<img src="./covers/starred.png" alt="star">
<img src="./covers/starred.png" alt="star">
<img src="./covers/starred.png" alt="star">
<img src="./covers/semi-starred.png" alt="star">
</div>
</div>
</td>
 
</tr>
 
<tr>
<td class="credits_table_cells"><b>Keywords:</b></td><td>C++11, C++14, STL.</td>
</tr>
 
</table>
</a>
 
<!-- The problem end here -->
 
</div>
 
<footer>
<hr>
<a href="../index.html" style="text-align :center ;" title="Return to main page.">Return to main page.</a>
</footer>
 
</div> <!-- End of main container -->
 
<!--
<footer>
<img src="../dev-files/images/ln_validated.gif" alt="HTML5 Page validation logo">
</footer>
-->
 
</body>
</html>

de ma table qui BUG dur pour faire 2 opérations !!!

PS: Comme vous le voyez j'écrit mon site en HTML5 à la main.

Et le problème est la disposition...

Dans ce genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article>
  <header>
    <h1>Using the C++ Standart Template Libraries</h1>
  </header>
	<div class="flex">
		<figure>
			<img src="...." alt="Cover of the book: Using the C++ Standart Template Libraries" />
		</figure>
		<div>
			<p><label>Author: </label>Ivor Horton (Senior)</p>
			<p><label>Release year: </label>2015</p>
			<p><label>Quality:</label><span style="display:inline-block;">img alt="star" src="./covers/starred.png"><img alt="star" src="./covers/starred.png"><img alt="star" src="./covers/starred.png"><img alt="star" src="./covers/starred.png"><img alt="star" src="./covers/semi-starred.png"></span></p>
			<p><label>Keywords:	C++11, C++14, STL.</p>
		</div>
	</div>
</article>

Code:

1
2
3
4
5
article { display:block; border:1px solid #ccc; }
article > header > h1 { text-align:center; }
article > div.flex { display:flex; }
article > div.flex > figure, article > div.flex > div { flex: 1 1 auto; }
article > div.flex > figure img { mas-width:100%; }

Utilisation des flexbox en CSS

02/09/2016, 07h39
Luke spywoker

Merci beaucoup pour cette réponse éclairée,

je n'ai pas encore tester ton bout de code, mais je vais le faire dès que j'aurai le temps.

Désolé d'avoir été un peu agressif dans le poste précédent, je me suis laisser emporter et j'en suis désolé.

Je ne connais pas grand chose au monde de la programmation web, bien que le HTML ne soit pas un langage de programmation, mais ton code a l'air plus propre que le miens en tout cas.

Quand au probable problèmes de compatibilités des flexbox je pense qu'il n'y pas de problème ou je me trompe ?

Cordialement, Luke Spywoker.