-1

携帯電話を横向きにしようとすると、Web ページに問題が発生します。縦向きの場合、Web ページは正常に表示されますが、切り替えようとすると、ボタンがバナーの上に表示されます。

足にヘッダーとボタンのバナーがあります（ただし、すべて本文にあり、divは異なります）

これは私のコードです：

<body>  
<div data-role="page" id="home"  >
<div data-role="content">   
    <h2 id="banner">WebPage</h2>
    <div class="main_menu">
        <ul data-inset="true" data-role="listview">
            <li data-theme = "a"><a href="#button1">Button 1</a></li>
            <li data-theme = "a"><a href="#button2">Button 2</a></li>
            <li data-theme = "a"><a href="#button3">Button 3</a></li>
            <li data-theme = "a"><a href="#button4">Button 4</a></li>
            <li data-theme = "a"><a href="#button5">Button 5</a></li>
        </ul>       
    </div> <!-- /main_menu -->
</div> <!-- /content -->
</div> <!-- /page -->
</body>

私のCSS：

h2#banner {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:transparent url(icons/banner1.png) no-repeat left 10px;
width:146px;
height:162px;
margin:-10px auto -150px auto;
text-indent:-9999px;
}

.main_menu{
position:fixed; 
width:93%; 
height:0px;  
bottom:250px;
}

/* Home page banner landscape */
.landscape h2#banner {
background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
width:333px;
height:290px;
margin:-10px auto -175px auto;
text-indent:-9999px;
}

縦向きと横向きのモードでバナーとボタンの間の距離を同じに保ちたいです。それが不可能な場合は、バナーの下のボタンを横向きに保ちますが、重ならないようにします。

4

1 に答える 1