Q&A
再現できるコードも具体的な説明もなしにアドバイスは不可能です。
質問の最後も結ばれたようには思えない半端な切り方になっています。
つけられたタグいずれとの関連性も不明な内容です。
タイトルが動的に変動するのですが
タイトルの文字数が多くても少なくても
説明文の表示開始位置を同じ場所からにしたいです
タイトル(画像太文字でclass="tittle")
説明文(画像通常文字 class="explanation")
画像はすべて同じサイズです
またタイトルそして説明文の両方とも文字数を制限させる予定ですので
多くなりすぎる事はないです
メンズの画像タイトルですとタイトル文字が少ないのでその下にある説明文(人間観察の~)が画像の
中央付近から表示されているのですが
レディースの画像ですとタイトルが3段構造になっておりその為,説明文も画像の下付近から開始されています
どうにかして説明文を画像の中央付近からどんなにタイトルが長くても表示させたいです....
mysqlのデーターから取得した情報を表示しているファイルです
html
1<?php 2 3try{ 4 ini_set('display_errors', "On"); 5 6if($_GET["id"] !== ""){ 7 8 $id = $_GET["id"]; 9 10}elseif($_GET["id"] !== ""){ 11 12 13 $id = $_GET["id"]; 14 15}elseif($_GET["id"] !== ""){ 16 17 $id = $_GET["id"]; 18 19} 20 21ini_set('display_errors', "On"); 22require_once("../confidential/detabaseAccses.php"); 23 24$sql = $sql = "SELECT * FROM hagoli WHERE id=$id"; 25 26$stmt = $dbh->query($sql); 27 28 foreach($stmt as $rec){ 29 30 $price = $rec["price"]; 31 32 $image1 = $rec["image1"]; 33 34 $explanation = $rec["explanation"]; 35 36 $tittle = $rec["tittle"]; 37 38 } 39 40 41}catch(PDOException $e){ 42 print "表示エラー"; 43 print "<br>"; 44 die($e->getMessage()); 45 } 46 47?> 48 49 50<!DOCTYPE html> 51<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 52 53<head> 54 55<link rel="stylesheet" href="./hagoli.css"> 56 57</head> 58 59<body> 60 61<!-- 検索欄 --> 62<form action="" method="POST"> 63 <input type="text" placeholder="検索欄" name="look" class="search"> 64 <input type="submit" value="検索" name="search" class="searchButton" > 65 </form> 66 67 <!--タイトル画像--> 68 <?php print '<img class="image1" src="../image/'.$id.'/'.$image1.'" >'; ?> 69 70 <br> 71 72 <!--タイトル--> 73 <span class="tittle"><?php print $tittle; ?></span> 74 75 <br> 76 77 78 <!--説明文--> 79 <span class="explanation"><?php print $explanation; ?></span> 80 81</body> 82 83</html> 84 85
css
1.search{ 2 3 width: 50%; 4 height: 32px; 5 margin-left: 370px; 6 7 8 9}.searchButton{ 10 11 12 13 width: 50px; 14 height: 30px; 15 16 17 18 19 20}.image1{ 21 22 width: 550px; 23 height: 550px; 24 object-fit: cover; 25 margin-left: 300px; 26 27}.tittle{ 28 29 30 position: relative; 31 32 33font-size: 25px; 34 left: 1000px; 35 bottom: 520px; 36 37 38 39 40}.explanation{ 41 42 43 44 position: relative; 45 46 47 left: 1000px; 48 bottom: 320px; 49 50 51 52}
失礼いたしました
修正しましたので
ご確認いただけると嬉しいです
これまでの回答と同じ指摘から入らねばならないので、読み返してきてください。
SQLインジェクション対策、XSS対策など基本的なところが全て皆無のひどい実装です。
参考にしている資料を変えるところからお願いします。
回答1件
0
ベストアンサー
とりあえずの解決方法を提示します。
css
1.tittle{ 2 display: block; 3 height: 0; 4}
が、あなたのレイアウトの仕方は早晩行き詰ると思うので、老婆心ながらきちんと勉強をした方がいいと思いますよ。
「フレックスボックス」や「グリッドレイアウト」などでググってみてください。
投稿2020/08/05 01:57
総合スコア36960
あなたの回答
tips
プレビュー
