Q&A
画像の上に文字を載せたい（添付画像のようにしたい）のですがうまくいきません。
今は、画像の下の文字列が来てしまっている状態です。
<img src=hukidasi.png> という画像に、
「
<div id="left"><ul><li><span class="price">01. </span><span class="price_title">入場券</span><span class="price_title2"> (お一人につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">02. </span><span class="price_title">テント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">03. </span><span class="price_title">ロッジ券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥8,000</span> </li> <li><span class="price">04. </span><span class="price_title">グランピングテント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥ <span class="price">¥12,000</span> </li> <p id="tickets_higaeri">＊日帰り利用（16日限定）を希望される場合も入場券をお求めください。</p> </ul> </div>
」
以上のリストを載せたいのです。
html <div id="tickets"> <h1 class="section2">tickets</h1> <h2>チケットについて</h2> <p class="line"><img src="sen.png"></p> <p class="about_sentence">------------------------------------------------</p> <div id="gazou"> <div id="tickets_sheet"><img src=hukidasi.png></div> <div id="left"> <ul><li><span class="price">01. </span><span class="price_title">入場券</span><span class="price_title2"> (お一人につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">02. </span><span class="price_title">テント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">03. </span><span class="price_title">ロッジ券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥8,000</span> </li> <li><span class="price">04. </span><span class="price_title">グランピングテント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥ <span class="price">¥12,000</span> </li> <p id="tickets_higaeri">＊日帰り利用（16日限定）を希望される場合も入場券をお求めください。</p> </ul> </div> </div> </div> <!--ticket--> css #tickets{ background-color: #F7F5F0; } #tickets_sheet{ padding-top: 25px; } #gazou{ position: relative; } #tickets_sheet img{ width: 936px; height: 582px; } .price_title{ font-size: 18px; font-weight: 500; } .price_title2{ font-size: 15px; } #tickets ul li{ line-height: 1; padding-bottom: 27px; } #tickets_higaeri{ font-size: 12px; color: #696969; } #left{ position: absolute; left: 0; right: 0; margin: auto; } #left ul{ display: inline-block; text-align: left; }
以下のようにしたいです。
追記です。今の状態です↓
html <div id="tickets"> <h1 class="section2">tickets</h1> <h2>チケットについて</h2> <p class="line"><img src="sen.png"></p> <p class="about_sentence">説明文ーーーーーーーーーーーーー</p> <div id="left"> <ul><li><span class="price">01. </span><span class="price_title">入場券</span><span class="price_title2"> (お一人につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">02. </span><span class="price_title">テント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> </li> <li><span class="price">03. </span><span class="price_title">テント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥8,000</span> </li> <li><span class="price">04. </span><span class="price_title">テント券</span><span class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥ <span class="price">¥12,000</span> </li> <p id="tickets_higaeri">＊説明文</p> </ul> <h3>チケットに含まれるもの</h3> <ul><li>－－－－－－－－－－－－－－－－－－－</li> <li>－－－－－－－－－－－－－－－－－－－－</li> <li>－－－－－－－－－－－－－－－－－－－－</li></ul> <p>＊説明文<br> ＊説明文</p> <p>説明文</p> </div> </div> <!--ticket--> css #tickets{ position: relative; background-color: #F7F5F0; padding: 20px; } .price_title{ font-size: 18px; font-weight: 500; } .price_title2{ font-size: 15px; } #tickets ul li{ line-height: 1; padding-bottom: 27px; } #tickets_higaeri{ font-size: 12px; color: #696969; } #left{ position: absolute; left: 0; right: 0; margin: auto; width: 936px; height: 582px; background-image: url(hukidasi.png); } #left ul{ display: inline-block; text-align: left; } コード
回答1件
0
案1
#left に position: absolute; が設定してあるので、あとは top: で適切な位置を指定すればいいでしょう。
css
1#left { 2 position: absolute; 3 top: 25px; /* 追加 */ 4 left: 0; 5 right: 0; 6 margin: auto; 7}
案2
あるいは、
imgタグではなく、CSSのbackground-imageに画像を設定してはどうですか。
HTMLの id=gazou や id=tickets_sheet のブロックは不要になります。
html
1<div id="gazou"> 2 <div id="left"> 3 <ul> 4 <li><span class="price">01. </span><span class="price_title">入場券</span><span class="price_title2"> 5 (お一人につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> 6 </li> 7 <li><span class="price">02. </span><span class="price_title">テント券</span><span class="price_title2"> 8 (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥3,000</span> 9 </li> 10 <li><span class="price">03. </span><span class="price_title">ロッジ券</span><span class="price_title2"> 11 (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ <span class="price">¥8,000</span> 12 </li> 13 <li><span class="price">04. </span><span class="price_title">グランピングテント券</span><span 14 class="price_title2"> (ひと組につき一枚必要) </span>‥‥‥‥‥‥‥‥‥ <span class="price">¥12,000</span> 15 </li> 16 <p id="tickets_higaeri">＊日帰り利用（16日限定）を希望される場合も入場券をお求めください。</p> 17 </ul> 18 </div> 19</div>
css
1#gazou{ 2/* position: relative; */ 3/* 以下追加 */ 4 background-color: #b8ebd3; 5 padding: 20px; 6} 7#left{ 8/* position: absolute; 9 left: 0; 10 right: 0; */ 11 margin: auto; 12/* 以下追加 */ 13 width: 936px; 14 height: 582px; 15 background-image: url(https://placehold.jp/150/9599de/868bd1/936x582.png?text=gazou); 16}
投稿2019/12/16 03:54
編集2019/12/16 08:23
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/16 05:17
2019/12/16 05:22
2019/12/16 06:16
2019/12/16 06:17
2019/12/16 08:00
2019/12/16 08:25
2019/12/17 02:11
2019/12/17 09:39
2019/12/20 08:24
2019/12/20 10:07