Автоматически перемещать меню для эффективного использования пространства?
0 Rob Jeffrey [2015-01-19 15:54:00]
Я пытаюсь создать дружественную к устройству версию веб-сайта, но у меня возникают некоторые проблемы с меню. Я буду бороться, чтобы соответствовать всем этим на экране ipad без прокрутки, но это поможет, если меню автоматически переместится, чтобы заполнить пустое пространство.
Синие области - это меню, а черные области - впустую. Есть ли способ заставить мое меню перемещаться в нижней части вышеприведенного меню?
HTML
<ul><t2>Home</t2>
</ul>
<ul><t2>Academic Life</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>A Catholic Education</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>Sporting & Co-Curricular</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>Music & The Arts</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>Sixth Form</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>Information</t2>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<ul><t2>News</t2>
</ul>
<ul><t2>Events</t2>
</ul>
CSS -
body {
background-color: #000;
}
ul {
list-style-type: none;
width: 48%;
min-width: 460px;
padding: 0;
background-color: blue;
font-family: Gill Sans MT;
color: #fff;
display: inline;
float: left;
font-size: 40px;
position: relative;
}
t2 {
font-size: 100%;
}
li {
font-size: 80%;
padding-left: 3%;
}
@media all and (orientation:landscape) {
ul {
width: 32%;
min-width: 300px;
font-size: 30px;
}
.menuicon {
width: 100px;
}
#menu {
padding-top: 105px;
}
}
Любая помощь была бы чрезвычайно оценена! Благодарю.
html css mobile position menu
1 ответ
0 Billy [2015-01-19 17:13:00]
теперь корректно вложенные пробелы были из-за того, что они были отдельными списками, меняли t2 на h2, что я предполагаю, что вы имели в виду, я могу ошибаться, но я никогда не слышал об этом в теге, если я ошибаюсь, который, как я помню, когда-то был в 1982 году о моем имени подружек подруг, затем изменил css h2 на t2 и изменил html-теги. не касались css кроме этого
body {
background-color: #000;
}
ul {
list-style-type: none;
width: 48%;
min-width: 460px;
padding: 0;
background-color: blue;
font-family: Gill Sans MT;
color: #fff;
display: inline;
float: left;
font-size: 40px;
position: relative;
}
h2 {
font-size: 100%;
}
li {
font-size: 80%;
padding-left: 3%;
}
@media all and (orientation:landscape) {
ul {
width: 32%;
min-width: 300px;
font-size: 30px;
}
.<ul>
<li>
<h2>
Home
</h2>
</li>
<li>
<ul>
<li>
<h2>
Academic Life
</h2>
</li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li>
<ul>
<li>
<h2>A Catholic Education</h2>
</li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li>
<ul>
<li>
<h2>Sporting & Co-Curricular</h2>
</li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li>
<ul>
<li>
<h2>Music & The Arts</h2>
</li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li><li><ul><li><h2>Sixth Form</h2></li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li><li><ul><li><h2>Information</h2></li>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li>
<ul>
<li><h2>News</h2></li>
</ul>
</li>
<li><ul><li><h2>Events</h2></li>
</ul>
</ul>