Изменение поля Div с изменением размера экрана

0

Я создаю меню навигации с фоном. См. Веб-сайт 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%;
}

Он все еще не работает.

Есть ли быстрый и простой способ вставить мое меню навигации в этом месте и сохранить его там, когда экран изменится?

Заранее спасибо!

Теги:
resize
margin

2 ответа

0
Лучший ответ

Использование метатега ViewPort

Используйте метатег для окна просмотра как

<meta name="viewport" content="width=device-width" />

Использование процентных значений

Затем, если вы используете процент, вы получите желаемый результат. Например, когда вы используете этот css

body {
  width: 100%;
  height: 100%;
}

Браузер wil автоматически изменяет ширину и высоту элементов, в зависимости от размера экрана!

CSS3 Media Query

Третье, что нужно сделать, это использовать 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;
}

Использовать float вместо полей

Легким способом было бы заставить его плавать вправо, так как:

nav#menu {
  position: absolute;
  float: right;
}

Таким образом, вы получите навигацию с правой стороны. И вам тоже не придется беспокоиться о полях!

Справка:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

0

Вы делаете все это неправильно!

  1. Поместите изображение в качестве фонового изображения, а не как фактический <img>.
  2. Не используйте положение: абсолютное, вместо этого просто плавайте навигатор вправо.
  • 0
    Я знаю, что это странное решение - использовать тег <img>, но при этом фон меню-оболочки не изменяется должным образом.
  • 0
    это потому, что вы плаваете все li , поставьте overflow:hidden на ul и вы должны быть хорошими. И я предлагаю вам изучить некоторые основы CSS, прежде чем двигаться дальше

Ещё вопросы

Сообщество Overcoder
Наверх
Меню