質問編集履歴

1

書籍の改善

2020/08/05 00:31

投稿

nguyenseiji
nguyenseiji

スコア156

test CHANGED
File without changes
test CHANGED
@@ -1,15 +1,341 @@
1
- 文字の大きさや長さが動的に変るので
2
-
3
-
4
-
5
- 字数が多いと画像が指定した位置に設置されないです
6
-
7
-
8
-
9
- どんなに文字が多くても別の文字列や画像などが(別でinputから取得したデータ)影響を受けないようにしたいですが
10
-
11
- 何か良い方法はありますでしょうか
12
-
13
-
14
-
15
- phpやjavascriptしたら使用可能で
1
+ タイトルが動的に変動するのですが
2
+
3
+ タイトルの文字数が多くても少なくても
4
+
5
+ 説明の表示開始位置を同じ場所からしたいです
6
+
7
+
8
+
9
+ タイトル(画像太文字でclass="tittle")
10
+
11
+ 説明文(画像通常文字 class="explanation")
12
+
13
+
14
+
15
+ 画像はすべて同じサイズです
16
+
17
+
18
+
19
+ またタイトルそして説明文の両方とも文字数を制限させる予定ですので
20
+
21
+ 多くなりすぎる事はないです
22
+
23
+
24
+
25
+ メンズの画像タイトルですとタイトル文字が少ないのでその下にある説明文(人間観察の~)が画像の
26
+
27
+ 中央付近から表示されているのですが
28
+
29
+
30
+
31
+ レディースの画像ですとタイトルが3段構造になっておりその為,説明文も画像の下付近から開始されています
32
+
33
+
34
+
35
+ どうにかして説明文を画像の中央付近からどんなにタイトルが長くても表示させたいです....
36
+
37
+
38
+
39
+
40
+
41
+ mysqlのデーターから取得した情報を表示しているファイルです
42
+
43
+
44
+
45
+ ```html
46
+
47
+ <?php
48
+
49
+
50
+
51
+ try{
52
+
53
+ ini_set('display_errors', "On");
54
+
55
+
56
+
57
+ if($_GET["id"] !== ""){
58
+
59
+
60
+
61
+ $id = $_GET["id"];
62
+
63
+
64
+
65
+ }elseif($_GET["id"] !== ""){
66
+
67
+
68
+
69
+
70
+
71
+ $id = $_GET["id"];
72
+
73
+
74
+
75
+ }elseif($_GET["id"] !== ""){
76
+
77
+
78
+
79
+ $id = $_GET["id"];
80
+
81
+
82
+
83
+ }
84
+
85
+
86
+
87
+ ini_set('display_errors', "On");
88
+
89
+ require_once("../confidential/detabaseAccses.php");
90
+
91
+
92
+
93
+ $sql = $sql = "SELECT * FROM hagoli WHERE id=$id";
94
+
95
+
96
+
97
+ $stmt = $dbh->query($sql);
98
+
99
+
100
+
101
+ foreach($stmt as $rec){
102
+
103
+
104
+
105
+ $price = $rec["price"];
106
+
107
+
108
+
109
+ $image1 = $rec["image1"];
110
+
111
+
112
+
113
+ $explanation = $rec["explanation"];
114
+
115
+
116
+
117
+ $tittle = $rec["tittle"];
118
+
119
+
120
+
121
+ }
122
+
123
+
124
+
125
+
126
+
127
+ }catch(PDOException $e){
128
+
129
+ print "表示エラー";
130
+
131
+ print "<br>";
132
+
133
+ die($e->getMessage());
134
+
135
+ }
136
+
137
+
138
+
139
+ ?>
140
+
141
+
142
+
143
+
144
+
145
+ <!DOCTYPE html>
146
+
147
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
148
+
149
+
150
+
151
+ <head>
152
+
153
+
154
+
155
+ <link rel="stylesheet" href="./hagoli.css">
156
+
157
+
158
+
159
+ </head>
160
+
161
+
162
+
163
+ <body>
164
+
165
+
166
+
167
+ <!-- 検索欄 -->
168
+
169
+ <form action="" method="POST">
170
+
171
+ <input type="text" placeholder="検索欄" name="look" class="search">
172
+
173
+ <input type="submit" value="検索" name="search" class="searchButton" >
174
+
175
+ </form>
176
+
177
+
178
+
179
+ <!--タイトル画像-->
180
+
181
+ <?php print '<img class="image1" src="../image/'.$id.'/'.$image1.'" >'; ?>
182
+
183
+
184
+
185
+ <br>
186
+
187
+
188
+
189
+ <!--タイトル-->
190
+
191
+ <span class="tittle"><?php print $tittle; ?></span>
192
+
193
+
194
+
195
+ <br>
196
+
197
+
198
+
199
+
200
+
201
+ <!--説明文-->
202
+
203
+ <span class="explanation"><?php print $explanation; ?></span>
204
+
205
+
206
+
207
+ </body>
208
+
209
+
210
+
211
+ </html>
212
+
213
+
214
+
215
+
216
+
217
+ ```
218
+
219
+
220
+
221
+
222
+
223
+ ```css
224
+
225
+ .search{
226
+
227
+
228
+
229
+ width: 50%;
230
+
231
+ height: 32px;
232
+
233
+ margin-left: 370px;
234
+
235
+
236
+
237
+
238
+
239
+
240
+
241
+ }.searchButton{
242
+
243
+
244
+
245
+
246
+
247
+
248
+
249
+ width: 50px;
250
+
251
+ height: 30px;
252
+
253
+
254
+
255
+
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+ }.image1{
264
+
265
+
266
+
267
+ width: 550px;
268
+
269
+ height: 550px;
270
+
271
+ object-fit: cover;
272
+
273
+ margin-left: 300px;
274
+
275
+
276
+
277
+ }.tittle{
278
+
279
+
280
+
281
+
282
+
283
+ position: relative;
284
+
285
+
286
+
287
+
288
+
289
+ font-size: 25px;
290
+
291
+ left: 1000px;
292
+
293
+ bottom: 520px;
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
302
+
303
+ }.explanation{
304
+
305
+
306
+
307
+
308
+
309
+
310
+
311
+ position: relative;
312
+
313
+
314
+
315
+
316
+
317
+ left: 1000px;
318
+
319
+ bottom: 320px;
320
+
321
+
322
+
323
+
324
+
325
+
326
+
327
+ }
328
+
329
+ ```
330
+
331
+
332
+
333
+
334
+
335
+
336
+
337
+ ![イメージ説明](fc024feac2cfa36c4e9f640dfcc8c16d.jpeg)
338
+
339
+
340
+
341
+ ![イメージ説明](8c9eee8ad14158cae43be32f2272fcc6.jpeg)