-1
У меня есть некоторые проблемы с моей веб-страницей, когда я пытаюсь превратить мобильный телефон в ландшафтном режиме. Если он находится в портрете, веб-страница отображается нормально, но если я попытаюсь переключиться, мои кнопки появятся над баннером.сохранить пропорцию веб-страницы аспекта в мобильном телефоне (перекрытие)
У меня есть баннер для заголовка и кнопок в ноге (но все в теле, diferents дивы)
Это мой код:
<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;
}
Я хочу сохранить одинаковое расстояние между баннером и кнопками в портретном и ландшафтном режимах, или если это невозможно, держите кнопки под баннером в ландшафте, но не перекрывайтесь.
попробуйте со СМИ. – vishalkin
Я не то, что есть, можете ли вы привести пример? – Biribu