Липкий баннер для размещения рядом с контентом блога
Я пытаюсь добавить рекламный баннер, который будет отображаться в левой части моего сообщения в блоге.
Однако мои попытки до сих пор приводили к тому, что он появлялся над содержимым, выталкивая содержимое сообщения в блоге вниз по странице.
Живая ссылка: https://www.moneynest.co.uk/pension-crisis-uk/
Добавлено в шапку:
<div id=”LeftFloatAds”><a href = "https://www.pensionbee.com" target = "_blank"><img src = "https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt = "PensionBee sidebar ad"></a></div>
Добавлен в CSS
@media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{
left: 0px;
position: fixed;
text-align: center;
top: 200px;
}
}
К вашему сведению, я следил за это руководство.
Ответы 2
Во-первых, будьте осторожны с кавычками div id.
<div id=”LeftFloatAds”> должен быть <div id = "LeftFloatAds">
Затем с помощью этого медиа-запроса вы передаете эти свойства элементу только тогда, когда экран имеет размер не менее 1400 пикселей, но менее 500 пикселей, что невозможно. Попробуйте вот так:
@media only screen and (min-width: 500px) and (max-width:1400px)
- Прежде всего, замените положение ... переместите его внутрь основной оболочки содержимого.
- Затем примените этот CSS,
Поскольку вы хотите показать это только на более широком экране, используйте это,
@media only screen and (min-width: 1400px) {
#LeftFloatAds {
position: fixed;
display: block;
overflow: hidden;
left: 0;
top: 200px;
}
}
Это скроет баннер на экране размером менее 1400 пикселей.
@media only screen and (max-width: 1399px) {
#LeftFloatAds {
display: none;
}
}
Спасибо Дипак, я сделал это намного сложнее, чем мне нужно. Я просто вставил изображение в содержимое моего сообщения в блоге (которое поместило его в мою основную оболочку содержимого), а затем использовал фиксированное позиционирование, чтобы переместить его влево.
Да, вы обертывали его за пределами своей основной оболочки. Лучшее место будет сразу после открывающего тега body или основного класса контейнера.
Да, если вы не используете обычные одинарные или двойные кавычки ("или"), кавычки станут частью имени div, поэтому при выборе div с помощью css он будет выглядеть так: # ”LeftFloatAds” (который не рекомендуется)