- ベストアンサー
CSSでの配置方法
今学校の課題でCSSをやっています。 画像を「position」のタグで自分のやりたいように配置できません。 本やHPを参考にまねをしてみているのですが、それでもうまく配置できません。 -------------------------------------- <html> <head> <title>MY RADIO FLYER</title> <link rel="stylesheet" type="text/css" a href="stop.css"> </head> <h1><div class="section"> <img id="top" src="image/myradioflyer.gif"> </div></h1> <h2><div class="section2"> <img id="spec" src="image/spec.gif"> <img id="photo" src="image/photo.gif"> <img id="top photo" src="my radio flyer/a.jpg" alt=""> </div></h2> </html> ------------------------------------------ body {background-color: #ff0000;} div.section{align:center;} div.section2{align:left;} img#top photo{ position: absolute; right:80px; top:40px;} ------------------------- 今こんな感じでやっています。 ひとつひとつの画像それぞれを操りたいのですが、全くできません。 また、配置には関係の無いはずのタグを追加しただけでも、配置が換わってしまったりと、全くもってわからなくなってしまいました。 どなたかよろしければ配置方法教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<h1>（見出し要素）に<div>を入れる必要性がわかりません。 <h1 class="section"> <img id="top" src="image/myradioflyer.gif" alt="見出し"> </h1> .section { text-align:center; } <h2 class="section2"> <img id="spec" src="image/spec.gif" alt=""> <img id="photo" src="image/photo.gif" alt=""> <img id="top-photo" src="my_radio_flyer/a.jpg" alt=""> </h2> .section2 { text-align:left; position:relative;} #top-photo { position: absolute; right:80px; top:40px; } /* position:relative; で、親要素h2（class="section2"）の右上（左上）が起点となる */
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
とりあえず、疑問点を。 div.section{align:center;} div.section2{align:left;} ↓ div.section{ text-align:center; } div.section2{ text-align:left; } img#top photo{ ↓ img#topphoto{ <img id="top photo" src="my radio flyer/a.jpg" alt=""> ↓ <img id="topphoto" src="my%20radio%20flyer/a.jpg" alt="">
お礼
ありがとうございます。
お礼
ありがとうございます。