Ordonner une partie de la page horizontalement.

**Luke spywoker** · 30/08/2016, 16h11

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 :

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

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.

Invité · 30/08/2016, 16h15

Bonjour,

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

Sinon, en CSS, voir : display:flex;

**Luke spywoker** · 30/08/2016, 16h22

Si c'est vraiment nécessaire ?

Parce-que j'ai pas le code sous la mains là.

Invité · 30/08/2016, 16h49

Moi non plus

**Luke spywoker** · 30/08/2016, 17h20

Okay voici le code simplissime:

Code :

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
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...

Invité · 30/08/2016, 17h41

Dans ce genre :

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
<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 css :

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

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

Ordonner une partie de la page horizontalement.

HTML

Vue hybride

Discussions similaires

Partager

Partager