Как сделать рекламный блок не подвижным при прокрутке вниз?

  • 21 Ответов
  • 545 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн Se

Как сделать рекламный блок не подвижным при прокрутке вниз пример можно посмотреть здесь http://sticky01.blogspot.ru/2013/09/4.html
Нужно сделать здесь http://travelvideophoto.com/
« Последнее редактирование: 06.05.2017, 18:24:02 от Se »

*

Оффлайн vipiusss

  • ********
  • 5436
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
2 ссылка не работает
Сделать с помощью CSS.Можно квери применить.
Вы хотите, чтобы вам сделали или какая цель темы?
Попробуйте поиск в Google или хотя бы по форуму: http://joomlaforum.ru/index.php?topic=192239.0
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Se

2 ссылка не работает
Сделать с помощью CSS.Можно квери применить.
Вы хотите, чтобы вам сделали или какая цель темы?
Попробуйте поиск в Google или хотя бы по форуму: http://joomlaforum.ru/index.php?topic=192239.0
2 ссылка заработала)
Хотелось бы сделать самому, но обладаю базовыми навыками при работе когда нужно в ручную прописывать в файлах Joomla.
Да вы указали верную тему.
Но мне не помогло. Я сделал согласно написанному там скопировал код в templates/шаблон/index.php: и указал позицию

<div id="floated">
    Превед! Йа плавающий блок!
    <jdoc:include type="modules" name="right" style="" />
</div>

так же скопировал код в templates/шаблон/css/template.css

#floated {
position:fixed; top:50px; width:100px; padding:10px;
right:-80px; background:#aaa;
}
#floated:hover {
cursor:pointer; color:#fff;
right:0; background:#080;
}

Рекламный блок так и остался стоять на месте, вернее нижний блок с рекламой стал впритык к блоку с рекламой 300*250
« Последнее редактирование: 10.03.2017, 19:21:22 от Se »

*

Оффлайн vipiusss

  • ********
  • 5436
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
у вас ошибки в CSS.
советую обратиться в комм.раздел.
приношу извинения, но нет щас времени писать, т.к. занят иным.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн stendapuss

Сделать модуль, в него вставить рекламный блок. Суффикс CSS-класса модуля прописать типа: -new38
в CSS шаблона прописать .custom-new38 {width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;} сами пропишите что надо, размер и т.д
Типа этого сделайте.

*

Оффлайн Se

Сделать модуль, в него вставить рекламный блок. Суффикс CSS-класса модуля прописать типа: -new38
в CSS шаблона прописать .custom-new38 {width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;} сами пропишите что надо, размер и т.д
Типа этого сделайте.



Сделал следующим образом
в файл template.css  прописал правило:

.custom new38{
width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;
}

в HTML модуль прописал

<div class="custom">
в итоге полностью модуль с рекламой выглядит так

<div class="custom">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Автоматический размер Адаптивный -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client=""
     data-ad-slot=""
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Но не каких изменений не произошло.
« Последнее редактирование: 06.05.2017, 21:27:29 от Se »

*

Оффлайн vipiusss

  • ********
  • 5436
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
не понимаю, что вам надо?
залипание блока? это?: http://ruseller.com/lessons/les480/example/index.html
Или это при прокрутке до футера? http://sticky01.blogspot.ru/2013/09/4.html
Нашёл бегло попавшееся в Google.

и при чём тут ins class? И это к чему? <div class="custom">

Напишите нужный результат, доступный без телепатии, пожалуйста.

Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн stendapuss

Сделать модуль, в него вставить рекламный блок. Суффикс CSS-класса модуля прописать типа: -new38
в CSS шаблона прописать .custom-new38 {width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;} сами пропишите что надо, размер и т.д
Типа этого сделайте.

С дефисами пропишите, чтоб не парится может пробел не поставили. Точно так же пропишите. .custom-new38 и  в Суффикс CSS-класса модуля прописать типа: -new38. Точно так скопируйте и все будет работать. - не забывайте поставить. Модуль так двигается сто пудов. А вот что у вас в модуле написанно не разбирался. Что напишите, то и будет двигаться. Может дефис не поставили- Может еще где то ошибка. Может кеш надо почистить. Суффикс CSS-класса модуля вы не написали что прописали. Вы прописали? Это в настройках модуля. Как то так.
« Последнее редактирование: 23.04.2017, 12:28:15 от stendapuss »

*

Оффлайн stendapuss



и при чём тут ins class? И это к чему? <div class="custom">

Наверно он в модуле не то прописал.

*

Оффлайн Se

не понимаю, что вам надо?
залипание блока? это?: http://ruseller.com/lessons/les480/example/index.html
Или это при прокрутке до футера? http://sticky01.blogspot.ru/2013/09/4.html
Нашёл бегло попавшееся в Google.

и при чём тут ins class? И это к чему? <div class="custom">

Напишите нужный результат, доступный без телепатии, пожалуйста.



Нужно до футера это http://sticky01.blogspot.ru/2013/09/4.html

Цитировать
и при чём тут ins class? И это к чему? <div class="custom">

я сейчас работаю примерно на уровне - возьми такой то код и вставь туда...

Пробовал встаить в сам HTML блок с кодом рекламы
<div style="position: fixed; width: 299px; height: auto; top:190px; right:145px">здесь скрипт баннера Google </div>
но выходит так что рекламный блок  перекрывает блоки соц сети и YouTube, которые находятся выше него. Если бы он был один в данной позиции то этот вариант подошел бы.
Если увеличивать top:...px, то блок съезжает вниз, при этом его нижняя часть обрезается. Изменения  height:....; не как не влияют.

*

Оффлайн stendapuss

Задавайте каждому модулю

Сделал следующим образом
в файл template.css  прописал правило:

.custom new38{
width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;
}

в HTML модуль прописал

<div class="custom"> В коде не надо писать <div class="custom
пишите  new38 с пробелом впереди, в Суффикс CSS-класса модуля
И так всем модулям задайте суффикс, разные. И двигайте куда хотите. custom и  new38 разные вещи (модули). Сделайте как выше написал и двигайте модули куда хотите. Можно позицию поменять.

в итоге полностью модуль с рекламой выглядит так. Так неправильно, ниже.

<div class="custom">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Автоматический размер Адаптивный -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4340461634424997"
     data-ad-slot="3027654460"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Но не каких изменений не произошло. И не произойдет custom и  new38 разные вещи (модули).
« Последнее редактирование: 23.04.2017, 12:49:23 от stendapuss »

*

Оффлайн stendapuss

Делайте точно так, как пишут. Или вникайте.

*

Оффлайн Se

Делайте точно так, как пишут. Или вникайте.

Вроде сделал точно как выписали, а именно по шагам

1) в файл template.css  прописал правило:
.custom-new38 {
width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;
}

2) В модуле прописал, как вы писали <div class="-new38"> код рекламы </div>

изменений нет, даже не стал сейчас всё убирать что бы вы могли посмотреть http://travelvideophoto.com/ru/

Не понимаю почему не выходит, вроде всё не так сложно, есть всего два шага, задать правило в template.css, сделал согласно написанному вами
и прописать в модуле код, что бы правило отображалось.
Напишите пожалуйста где ошибка. Если в template.css код полностью скопирован с вашего сообщения, то значит ошибка в HTML модуле. Но и там вроде сделал согласно написанному.

Почему я писал <div class="custom"> , а не <div class="-new38">

У меня прописанно правило в  template.css для фото

.foto img{
max-width:100% !important;
height:auto !important;
}

Что бы правило работало на странице делаю так
<div class="foto"> текст и фото </div>  - все работает, соответственно по аналогии писал <div class="custom"> , а не <div class="-new38">

*

Оффлайн stendapuss

Завтра посмотрю. Не надо писать не каких дивов. Пропишите в суффикс класса модуля -new38 и все.

*

Оффлайн stendapuss

Вы модулю суффикс задайте и делайте с ним что хотите.
Как то так.

*

Оффлайн midav

Вроде сделал точно как выписали, а именно по шагам
...
2) В модуле прописал, как вы писали <div class="-new38">...
...
Почему я писал <div class="custom"> , а не <div class="-new38">
...

...
Точно так же пропишите. .custom-new38 и  в Суффикс CSS-класса модуля прописать типа: -new38.
...
В настройках модуля надо указывать суффикс . Не умеете вникать в смысл слов, читаете и не понимаете ? Человек для Вас даже жирным текстом выделил куда нужно прописывать .
Ответы на вопросы по CSS . Откройте для себя Firebug

*

Оффлайн vipiusss

  • ********
  • 5436
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
2 Se: вот вам же выше дословно объяснили, как сделать!

1. Создаёте уникальный класс в css: .custom-mystyle {***}
2. Добавляете в поле суффикса модуля -mystyle
3. Делаете ваш div: <div class="custom-mystyle">***</div>

Единственное, почему не будет работать-если вы уже в коде условия moduleclass_sfx порезали ;)

Спойлер
[свернуть]
« Последнее редактирование: 26.04.2017, 09:51:48 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн midav

2 Se: вот вам же выше дословно объяснили, как сделать!

1. Создаёте уникальный класс в css: .custom-mystyle {***}
2. Добавляете в поле суффикса модуля -mystyle
3. Делаете ваш div: <div class="custom-mystyle">***</div>


Зачем делать div , если суффикс у модуля будет прописан ?
Ответы на вопросы по CSS . Откройте для себя Firebug

*

Оффлайн vipiusss

  • ********
  • 5436
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
Да что-то я автоматом написал. Привык с "0".
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Se

2 Se: вот вам же выше дословно объяснили, как сделать!

1. Создаёте уникальный класс в css: .custom-mystyle {***}
2. Добавляете в поле суффикса модуля -mystyle
3. Делаете ваш div: <div class="custom-mystyle">***</div>

Единственное, почему не будет работать-если вы уже в коде условия moduleclass_sfx порезали ;)


1. В template.css создал класс (код полностью скопирован)
.custom-new38 {
width: 100%; position:fixed; margin-left:-40px;margin-top:-140px;
}



2. В модуле на вкладке Дополнительные параметры в поле "Суффикс CSS-класса модуля" прописал -new38
После этого на сайте пропадает рекламный блок


3. Если использую
 <div class="custom-new38">
код модуля
</div>
тоже пропадает рекламный блок


В то же время класс в template.css работает
.foto img{
max-width:100% !important;
height:auto !important;
}

На страницу вставляю код
 <div class="foto">
текст картинки
</div>


Цитировать

Единственное, почему не будет работать-если вы уже в коде условия moduleclass_sfx порезали ;)

Если в этом причина, где это посмотреть как узнать, что moduleclass_sfx порезали? Может какой то файл просто заменить новым, скопировав из чистой Joomla?

*

Оффлайн Se

2 Se: вот вам же выше дословно объяснили, как сделать!

1. Создаёте уникальный класс в css: .custom-mystyle {***}
2. Добавляете в поле суффикса модуля -mystyle


3. Делаете ваш div: <div class="custom-mystyle">***</div>

Единственное, почему не будет работать-если вы уже в коде условия moduleclass_sfx порезали ;)

Спойлер
[свернуть]

Поставил position:relative; и рекламный блок появился, но со сдвигом к центру и вверх, что бы его уровнять пришлось задать margin-left:-0px; margin-top:-0px;

Попробовал position:absolute; margin-left:-0px; margin-top:-0px; блок тоже появляется но резко уходит вправо раздвигая границы сайта.

Главный смысл в том что при position:fixed; блока просто нет и задать нужную позицию нет возможности

*

Оффлайн stendapuss

Надо не new38 а -new38 с -. Пишите лучше margin: 0px 0px 0px 1px можно добавить  !important если не слушается; И двигайте по 4 направлениям куда надо. Куда что margin: 0px 0px 0px 1px читайте http://htmlbook.ru/css/margin.
« Последнее редактирование: 06.05.2017, 18:56:27 от stendapuss »