htmlの装飾でcssが効かない

Question

PHPの中にhtmlのid属性で指定したものを別のファイルに記載したcssファイルを使って装飾を
したいのですが反映されず困っています

3か所反映させていのですが
1か所は反映されていますので問題なくcssはインクルードできております
『反映した場所』
print '<img id="image1" src="../image/'.$rec["image1"].'">';

『反映していない場所』
print '<span id="ti">'.$rec["tittle"].'</span>';
print '<span id="price">'.$rec["price"].'円</span>';

 <?php

 try{
    ini_set('display_errors', "On");

     $sql = "SELECT * FROM hagoli";

    $stmt = $dbh->query($sql);
    
         foreach($stmt as $rec){
          
        print '<span id="ti">'.$rec["tittle"].'</span>'; 

        print '<span id="price">'.$rec["price"].'円</span>';

        print '<img id="image1" src="../image/'.$rec["image1"].'">';
      
    
              
     
         }



}catch(PDOException $e){
    print "表示エラー";
    print "<br>";
    die($e->getMessage());
  }


?>

#image1は問題なく反映しました

#image1{
        width: 250px;
        height: 250px;
        object-fit: cover; 

}#ti{

    margin-top: 100px;
    
}#price{

margin-top: 50px;



}

実装したいのは画像にあるお姉さんの画像とPHP参考書1000円を
水色で囲ったところに持ってきたいです

Answer 1

spanは、インライン要素なので、左右marginのみ有効です。

もし、margin-top を有効にしたいなら、divタグにしてください。
ただし、divにすると改行されてしまいます。

インライン要素=改行されない要素に margin-top を設定する意味がないですよね。
具体的にどのようなレイアウトにしたいのかを具体的に説明されるといいでしょう。

---

質問にレイアウト画像が追加されたので、それに対しての追記です。

まず、下記のようなHTMLが出力されるようにPHPを組んでください。

<div class="container">
    <div class="product">
        <img class="image1" src="https://placehold.jp/250x250.png">
        <div class="ti">商品1</div>
        <div class="price">100円</div>
    </div>
    <div class="product">
        <img class="image1" src="https://placehold.jp/250x250.png">
        <div class="ti">商品2</div>
        <div class="price">200円</div>
    </div>
    <div class="product">
        <img class="image1" src="https://placehold.jp/250x250.png">
        <div class="ti">商品3</div>
        <div class="price">300円</div>
    </div>
    <div class="product">
        <img class="image1" src="https://placehold.jp/250x250.png">
        <div class="ti">商品4</div>
        <div class="price">400円</div>
    </div>
</div>

• 一つの商品を productクラスのdivタグで囲む。
• 商品名と価格はdivタグで囲む。
• imgタグはdivタグの前に置く。
• 全体を containerクラスのdivタグで囲む。

CSSは下記のように設定してください。

.container {
  display: flex; /* 子要素を横並びにする */
  flex-wrap: wrap; /* 折り返しを許可する */
}
.product {
  margin: 10px;
}
.image1{
  width: 250px;
  height: 250px;
  object-fit: cover; 
}
.ti{

}
.price{

}

Codepenサンプル

Comments

[nguyenseiji]

データーベースから foreachでタイトルと画像と価格を取得しているのですが
ECサイトのようなデザインにしたくて
画像の下にタイトルその下に価格を表示したいのです

[nguyenseiji]

横にどんどん商品を並べていく感じです

[hatena19]

「ECサイトのようなデザイン」のようなデザインといわれてもいろいろなECサイトがありますので、画像でご希望のレイアウトを提示できませんか。
あと、PHPではなく出力されるHTMLコードを提示したほうが回答がつきやすいと思います。

さらに、id は一つの文書内で重複は許されません。複数の商品を並べるなら、classで指定しないとダメですよ。

[nguyenseiji]

失礼しました
画像の方追加しましたのでご参考にお願いいたします
idの重複はできないのですね?!

ありがとうございます classに変更します

[nguyenseiji]

htmlコードは上記に記載のコードがすべてになります

[nguyenseiji]

ありがとうございます
作って頂いたサンプルコードなのですが
データーベースにある商品数だけ動的に商品を横に並べるため
一度、試してみたのでがうまくforeachを使って商品がmysqlに登録されている
分だけ表示する事ができませんでした

ですが下記のサイトを参考に一応横並びは成功したので記載させて頂きます。
頂いたサンプルコードですがforeachなどを使った場合でも使用できるのでしょか?
自分で為してみたのですがどうしてもうまくできず...

別の方法になってしまいますが成功はしたので記載させて頂きます
参考サイト->https://cc.musabi.ac.jp/kenkyu/cl1/html5/css_lay01.html

[nguyenseiji]

<?php

try{
ini_set('display_errors', "On");

$sql = "SELECT * FROM hagoli";

$stmt = $dbh->query($sql);

foreach($stmt as $rec){

print '<figure class="gazo-box">';

print '<img class="image1" src="../image/'.$rec["image1"].'">';

print '<br>';

print '<span class="ti">'.$rec["tittle"].'</span>';

print '<br>';

print '<span class="price">'.$rec["price"].'円</span>';

print '</figure>';

}

}catch(PDOException $e){
print "表示エラー";
print "<br>";
die($e->getMessage());
}

?>

[nguyenseiji]

.image1{
width: 250px;
height: 250px;
object-fit: cover;

}.ti{

margin-top: 100px;

}.price{

margin-top: 50px;

}figure.gazo-box{

margin-left: 50px;
float: left;

}

[nguyenseiji]

頂いたコードですが

foreachを使ってデーターにある分だけ動的に商品を増やせる
場合はすいません...

ごしきてき頂けると助かりますm

[hatena19]

主さんが提示しているのはPHPコードです。私の提示したのはHTMLコードです。
PHPを実行するとHTMLコードが出力されます。(HTMLには foreach はありません。)
私が提示したHTMLコードが出力できるようにPHPコードを記述してください。

[hatena19]

主さんがコメントに提示したコードでも一応横並びにはなるので、別にいいのですが、
float: left; で横並びにするのは古い手法です。現在は私の提示した display: flex; を使う方法か主流です。
その辺は興味があったら、調べてみてください。
例えば、
FloatとFlexboxについて - Qiita
https://qiita.com/koseiinfratop/items/d569b019823a1c00fae2

[hatena19]

いちおうPHPコード

<?php

try{
ini_set('display_errors', "On");

$sql = "SELECT * FROM hagoli";

$stmt = $dbh->query($sql);

print '<div class="container">';

foreach($stmt as $rec){

print '<div class="product">';

print '<img class="image1" src="../image/'.$rec["image1"].'">';

print '<div class="ti">'.$rec["tittle"].'</div>';

print '<div class="price">'.$rec["price"].'円</div>';

print '</div>';

}

print '</div>';

}catch(PDOException $e){
print "表示エラー";
print "<br>";
die($e->getMessage());
}

?>

[nguyenseiji]

そうだったんですね！
あやうく古い手法で記載しるところでした
ありがとうございます

サイトの方も読ませていただきます！