■問題点:CSSでポジションの設定がうまくいかない
↓うまくいかなかった設定
親ボックスに position:relative; 画像にposition:absolute;を設定。一つ目の画像のみ位置設定が効くが2.3個目が効かない。
CSS
#menubord{
width:700px;
height:700px;
float:right;
padding:0px;
position:relative;
background-color:red;
}
.menu_a{
position:absolute;
left:20px;
top:10px;
.menu_b{
position:absolute;
left:50px;
top:10px;
}
.menu_c{
position:absolute;
left:1200px;
top:10px;
}
HTML
<div id=”menubord”>
<p class=”menu_a”><img src=”../img/menubord01.png”></p>
<p class=”menu_b”><img src=”../img/menubord02.png”></p>
<p class=”menu_c”><img src=”../img/menubord03.png”></p>
</div>
→→→→→→→→
ボックスを横に3つ並べて、それぞれに画像を入れる事で回避。この方法が正しいかどうかはわからない。