Bymas.ru | не расползается

201275291

Тема закрыта by

Wannecca scam
Причина: Ладно пойду копать @media

Всем трям, с наступающим НГ! Но вопрос такой: есть у меня менюха для сайта, меню заточено под планшеты. Как сделать, чтобы когда с компа заходишь кнопки от начала до конца мониторов были (сейчас только до середины монитора компьютера). А лучше чтобы в зависимости от устройства "расползались по всей ширине".
________
посл. ред. 01.01.2017 в 16:53; всего 2 раз(а); by Wannecca

<html>
<meta charset="utf-8">
<title>Русский экспресс</title>
<p align="center"><font size="7" align="center" color="#000000" face="Arial">test</font></p>
<style>
body{
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #FFF,#D1D1D1 );
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}

html{
min-height:100%;
}

.Navigation{
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}

.Navigation li {
height: auto;
width: 988px;
float: left;
text-align: center;
list-style: none;
font:19px "Bonveno", "Century Gothic";
padding: 0;
margin: 0;
background-color: #eee;
border: 2px solid #ccc;
box-shadow: 0 1px 0 r55,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
border-radius: 3px;
margin-left:10px;
}

.Navigation a{
padding:30px;
text-decoration: none;
color:#333;
text-shadow: 0 1px #fff;
display: block;
}
.Navigation li ul{
display: none;
height: auto;
margin-left: -11px;
padding: 0;
}

.Navigation li:hover ul{
display: block;
}

.navbar li ul li {
background-color:#eee;
border: 1px solid #ccc;
}

.Navigation li:hover, a:hover {
background: #e8e8e8;
}
#footer {
position: fixed; /* Фиксированное положение */
left: 0; bottom: 0; /* Левый нижний угол */
padding: 5px; /* Поля вокруг текста */
background: #E2E3E5; /* Цвет фона */
color: #000000; /* Цвет текста */
width: 100%; /* Ширина слоя */
}
</style>
<head>
</head>
<body><div id="Navigation">
<ul class="Navigation">
<li><a href="#">test</a>
<ul>

</ul>
</li>
<li><a href="#">test2</a>
<ul>

</ul>
</li>
</ul>
</div>
</body>
</html> вот код.

Сделать меню адаптированным.

Это тебе никто бесплатно не сделает!

В сss надо прописать разширение

289162818 (31.12.2016 в 14:13)
В сss надо прописать разширение

А вот, как прописать? Фиг в другими устройствами. Только пусть для планшетов и компов будет.

289162818 (31.12.2016 в 14:13)
В сss надо прописать разширение

А вот, как прописать? Фиг в другими устройствами. Только пусть для планшетов и компов будет.

Wannecca,

@media (max-width: 800px) { /* это будет показано при разрешении монитора до 930 пикселей */
body {max-width: 480px;}
}
@media (min-width: 801px) { /* это будет показано при разрешении монитора до 930 пикселей */
body {max-width: 420px;}
}

вроде так

Это можно сделать с помощью медиа запросов. Толчок дал, лети в гугль.

289162818 (31.12.2016 в 14:40)
Wannecca, @media (max-width: 800px) { /* это будет показано при разрешении монитора до 930 пикселей */
body {max-width: 480px;}
}
@media (min-width: 801px) { /* это будет показано при разрешении монитора до 930 пикселей */
body {max-width: 420px;}
}

вроде так

СПС, этот код сразу в style можно вставить?

barek, они не совсем помогут