Блог

Главная - Вопросы по программированию - У меня есть div, который мне нужно удерживать в определенном положении, когда экран становится меньше

У меня есть div, который мне нужно удерживать в определенном положении, когда экран становится меньше

#html #css #wordpress

#HTML #css #wordpress

Вопрос:

В настоящее время у меня проблема с div на моем сайте. Я пытаюсь заставить его оставаться в фиксированном положении даже при меньших разрешениях, но независимо от того, что я пробовал до сих пор, div перемещается вправо каждый раз, когда окно становится меньше.

Вот фотографии проблемы:

Правильное положение:

введите описание изображения здесь

Неправильная позиция:

введите описание изображения здесь

Кроме того, вот CSS для div:

 #fep-notification-bar{
    color: #f3ed42;
    border-width: 0px;
    text-align: left;
    background-color: #282828;
    margin-left: 1338px;
    font-weight: normal;
}

Сайт wastelandgamers.com

Если кто-нибудь знает, как решить эту проблему, я был бы очень признателен!

Редактировать:

Извините, я был недостаточно ясен, и теперь я понимаю, что из-за того, как я обрезал картинки, кажется, что заголовок расширяется, но это не так. Новый текст сообщения — это то, что не останется на месте. всякий раз, когда я уменьшаю экран, текст перемещается вправо вместо того, чтобы оставаться на месте над строкой поиска. К сожалению, вы не сможете его протестировать, если не войдете в систему и не получите сообщение.

Комментарии:

1. Похоже, все работает нормально, когда я посещаю ваш сайт. Убедитесь, что HTML-код «у вас 1 непрочитанное сообщение» не нарушает позиционирование (т. Е. Удалите его в веб-инспекторе). Поскольку кого-то, кто не зарегистрировался в этой строке, когда я посещаю сайт, там нет. В противном случае попробуйте исправить положение вашего поиска.

2. Извините, я был недостаточно ясен, и теперь я понимаю, что из-за того, как я обрезал картинки, кажется, что заголовок расширяется, но это не так. Новый текст сообщения — это то, что не останется на месте. всякий раз, когда я уменьшаю экран, текст перемещается вправо вместо того, чтобы оставаться на месте над строкой поиска. К сожалению, вы не сможете его протестировать, если не войдете в систему и не получите сообщение.

3. Ах, я вижу, моя ошибка. Я думал, вы имели в виду перемещение ввода, а не текста!

4. Не ваша вина, я определенно плохо обрезал его в highndsight, ха-ха.

Ответ №1:

Я не уверен, как выглядит ваш HTML, но на скриншотах я бы обернул все элементы в span или div, а затем расположил это.

Комментарии:

1. Я пытаюсь найти свой HTML-файл, но, похоже, не могу понять, где они находятся на WordPress. Я везде просматривал свой файловый менеджер и не могу его найти.

Ответ №2:

Попробуйте использовать float:right, возможно, затем отредактируйте определенные классы или идентификаторы, используя @media в css.

Комментарии:

1. Попробую это сейчас.

Ответ №3:

На данный момент я нашел решение. Я изменил код на:

 #fep-notification-bar{
    color: #f3ed42;
    border-width: 0px;
    background-color: transparent;
    margin-left: 24.7%;
    font-weight: normal;
    position: absolute;
}

Это не полностью решило мою проблему, но это, по крайней мере, пластырь. Таким образом, текст по-прежнему немного перемещается, однако теперь он перемещается влево и только на небольшую величину, поэтому он не падает со страницы, каким бы маленьким он ни был.

Метки: , ,