0

これが私が達成したいことです：

 _____________________________________________________________________________
|    option             option               option            option         |
|_____________________________________________________________________________|
  |  image  |         |  image  |          |  image  |       |  image  |
  |_________|         |_________|          |_________|       |_________|

ボタンではなくオプションのみのメニューバー。さらに、画像は下半分だけに表示されます。私はこれを試しました：

HTML

<div class="m_img"> <img src="image1.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image2.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image3.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image4.png" width="60px" height="30px"> </div>
<div id="menu_bar" class="centered">
    <a class="m_button" href="javascript:change(0)"> text0 </a>
    <a class="m_button" href="javascript:change(1)"> text1 </a>
    <a class="m_button" href="javascript:change(2)"> text2 </a>
    <a class="m_button" href="javascript:change(3)"> text3 </a>
</div>

CSS

.m_img {
     float: left;
     width: 250px;
     z-index: 1;
}
.m_button {
     float: left;
     width: 250px;
     font-size: 110%;
     z-index: 2;
}

ただし、メニューバーが下がり、画像が重ならないようにします。どうすれば設定できるか考えていますか？

4

1 に答える 1

0

HTML：

<div style="width:400px; background-color: red; font-size:1em; height:1em">
    <span class="menup option">option1</span>
    <span class="menup option">option2</span>
    <div style="z-index: -1; width: 100%; position:relative; top:-0.5em;">
        <span class="menup">menu1</span>
        <span class="menup">menu2</span>
    </div>
</div>

CSS：

.menup { background-color: blue; width: 6em; display: inline-block; margin-left: 1em; margin-right: 1em; }
.option { background-color: green; }

http://jsfiddle.net/mK4bJ/1/を参照してください

コメントがありましたら、ぜひお聞かせください。

于 2013-01-20T12:23:54.197 に答える