Я создаю меню навигации с фоном. См. Веб-сайт http://lolraffle.com
У меня есть следующий HTML-код
<nav id="menu">
<ul>
<li><a href="#" id="home">HOME</a></li>
<li><a href="#" id="faq">FAQ</a></li>
<li><a href="#" id="contact">CONTACT US</a></li>
</ul>
</nav>
И этот CSS, чтобы сделать навигацию наведение точно по фону меню.
nav#menu {
position: absolute;
margin-top: -67px;
margin-left: 678px;
}
Теперь проблема заключается в том, что при изменении размера экрана меню не перемещается вдоль страницы, поскольку оно определяется в пикселях.
Я попытался преобразовать пиксели в проценты, но он все еще не работает
nav#menu {
position: absolute;
margin-top: -5%;
margin-left: 51.3%;
}
Он все еще не работает.
Есть ли быстрый и простой способ вставить мое меню навигации в этом месте и сохранить его там, когда экран изменится?
Заранее спасибо!
Используйте метатег для окна просмотра как
<meta name="viewport" content="width=device-width" />
Затем, если вы используете процент, вы получите желаемый результат. Например, когда вы используете этот css
body {
width: 100%;
height: 100%;
}
Браузер wil автоматически изменяет ширину и высоту элементов, в зависимости от размера экрана!
Третье, что нужно сделать, это использовать CSS3 Media Query, как?
Вы можете проверить размер экрана, а затем изменить свойства CSS. Например:
@media (max-width: 900px) {
/* here you will write the properties which will be visible
* on the devices which have max width of 900px
*/
}
Затем, когда вы установите поля, вы увидите изменения там.
Другой способ сделать это - использовать top
left
а не margin-top
и margin-left
.
Как это:
nav#menu {
position: absolute;
top: -67px;
left: 678px;
}
Легким способом было бы заставить его плавать вправо, так как:
nav#menu {
position: absolute;
float: right;
}
Таким образом, вы получите навигацию с правой стороны. И вам тоже не придется беспокоиться о полях!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Вы делаете все это неправильно!
<img>
.
li
, поставьтеoverflow:hidden
наul
и вы должны быть хорошими. И я предлагаю вам изучить некоторые основы CSS, прежде чем двигаться дальше