Cообщество пользователей SMF

Цитата: S.T.A.L.K.E.R. от 30 октября 2018, 20:33:16Первое это стили.Ими задаете положение каждого блока,border,background и прочее индивидуально.Все это туда же куда и вставляли.
Блоков стиля можно задавать 2-3-4...Сколько нужно.

Всё дошло ! Заработало ! Клинило меня долго ...   

Спасибо огромное !  

Цитата: S.T.A.L.K.E.R. от 30 октября 2018, 20:33:16float:right , float:left

Вправо , влево понятно ... А как отцентрировать ?

Например , третий блок по вашему примеру сделал , а как поставить его по центру не понимаю ...   
 

Цитата: Василич от 31 октября 2018, 23:15:07Вправо , влево понятно ... А как отцентрировать ?

Например , третий блок по вашему примеру сделал , а как поставить его по центру не понимаю ...   
 

margin-left:auto;margin-right:auto

Супер!

Цитата: S.T.A.L.K.E.R. от 01 ноября 2018, 06:47:43margin-left:auto;margin-right:auto

Вижу на этом форуме слайдер с рекламой ... В каком редакторе замутить безопасный слайдер и как его вставить в мод рекламы ? С картинками и видео разобрался благодаря вам по полной , теперь со слайдером ... 

Еще видел такую фишку :

Два окна - в левом слайдер например из 5 картинок , а в правом 5 текстовых ссылок на эти картинки ... Нажал на строчку Вася Пупкин в правом окне , в левом показалась фотка Васи Пупкина ... Как это замутить?

Спасибо!  

Цитата: Василич от 03 ноября 2018, 08:36:34Еще видел такую фишку :

Два окна - в левом слайдер например из 5 картинок , а в правом 5 текстовых ссылок на эти картинки ... Нажал на строчку Вася Пупкин в правом окне , в левом показалась фотка Васи Пупкина ... Как это замутить?

Это сам рекламный блок такой.

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 10:05:35Это сам рекламный блок такой.

Понял ... А сам слайдер в каком редакторе сделать ? И как воткнуть в SimpleAds...

Цитата: Василич от 03 ноября 2018, 10:40:06Понял ... А сам слайдер в каком редакторе сделать ? И как воткнуть в SimpleAds...

Можно CSS и HTML - https://habr.com/post/324034/
Можно JS.

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 12:58:58Можно CSS и HTML - https://habr.com/post/324034/
Можно JS.

Спасибо ... Почитал немного - часто народ использует NoScript, вырезающим весь JS-код ... Один раз с таким сталкивался ... Решил пока замутиться на CSS и HTML ...

До последнего вашего сообщения я накопал КОД простенького слайдера , если его тупо вставить в окно для кода (мод SimpleAds) и указать место на форуме (в настройках мода) , то высвечивается миленький слайдер с природой ... А дальше фотки меняешь на свои и все работает и на 2.0.13 и на 2.0.15

Но есть одно но ... Он работает только в "ручном-педальном" режиме ... Плиз , помогите в этот код засунуть также автоматическое переключение ...

Спасибо ... 


<style type="text/css">

/*задаём фиксированные размеры контейнера*/

.sliderA {
       width: 400px;
       height: 250px;
       border: 1px solid #888;
       position: relative;
       text-align: center;
   }

/* Отображение радиокнопок нам не нужно, скрываем их*/

.sliderA > input {
       display: none;
   }

/*Оформляем метки-кнопки*/

.sliderA > input + label {
       display: inline-block;
       width: 10px;
       height: 10px;
       border-radius: 8px;
       background: rgba(90, 90, 90, 0.;
       border: 2px solid rgba(190, 190, 190, 0.;

       cursor: pointer;

       z-index: 100;
       position: relative;

       margin-right: 4px;
       top: 90%;

       transition: background 0.8s ease-out 0s;
   }
   .sliderA > input + label:hover {
       background: rgba(250, 250, 250, 0.;
   }
   .sliderA > input:checked + label {
       background: rgba(220, 220, 220, 0.;
   }

/*Добавляем стили для div-ов, в которых будет находиться содержимое кадра */

.sliderA > div {
       position: absolute;
       top: 0px;
       left: 0px;
       right: 0px;
       bottom: 0px;
       z-index: 0;
   }

/*показ и скрытие кадров в зависимости от нажатой кнопки*/

.sliderA > div {
       visibility: hidden;
       opacity: 0;
       transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;
   }
   .sliderA > input:checked + label + div {
       visibility: visible;
       opacity: 1;
       transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;
   }

/*правило для тега p внутри кадра, чтобы сделать подписи к картинкам*/

.sliderA > div > p {
       position: absolute;
       top: 0px;
       left: 0px;
       right: 0px;
       text-align: center;
       color: #fff;
       text-shadow: 1px 1px 2px #000;
   }

</style>

<body>
<div class='sliderA'>
   <input type="radio" name="slider1" id="slider1_1" checked="checked">
   <label for="slider1_1"></label>
   <div>
       <p>Восход над островом</p>
       <img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg'; alt=''>
   </div>

   <input type="radio" name="slider1" id="slider1_2">
   <label for="slider1_2"></label>
   <div>
       <p>Озёрный край</p>
       <img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg'; alt=''>
   </div>

   <input type="radio" name="slider1" id="slider1_3">
   <label for="slider1_3"></label>
   <div>
       <p>Закатная синева</p>
       <img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg'; alt=''>
   </div>

   <input type="radio" name="slider1" id="slider1_4">
   <label for="slider1_4"></label>
   <div>
       <p>Сельский пейзаж</p>
       <img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg'; alt=''>
   </div>
</div>
<p></p><p></p><p></p>
</body>

Цитата: S.T.A.L.K.E.R. от 03 ноября 2018, 12:58:58Можно CSS и HTML - https://habr.com/post/324034/

Что-то не запускается , рамка висит и все ... Плиз , хелп ми...
 

Цитата: S.T.A.L.K.E.R. от 31 октября 2018, 19:57:20Вы в моде создаете блок,куда Вы раньше вставляли рекламу,или сейчас стоит.А теперь вы вместо кода рекламы вставляете
<style type="text/css">
   .block1{width:200px;padding:5px;float:right}
   .block2{width:200px;padding:5px; float:left}
 </style>
 <body>
  <div class="block1">И вставляете сюда код рекламного блока правого</div>
  <div class="block2">А сюда вставляете код рекламного блока левого.</div>
 </body>
Стилями выше прямо при создании и редактировании файлов можно задать стили для этих двух блоков.
Я делаю так,вставляю и вывожу рекламу.Смотрю что не так,правлю стили открыв инструмент разработчика в браузере.Потом копирую код стилей,иду в мод,выбираю редактировать блок и вставляю код стилей скопированных.Смотрю что вышло,если нужно то корректирую дальше.

S.T.A.L.K.E.R. , спасибо все работает ОК благодаря вашей помощи ...

Вопрос может глупый ... Я просто не знаю как в поиске по форуму это забить ...

Как доработать данный код , чтобы окна (блоки) пересекались ? Чтобы один блок не сдвигал другой , ,а как бы частично сверху ... Или ссылку , если это на форуме обсуждалось ...

Спасибо ... 

Цитата: Василич от 10 ноября 2018, 17:06:35Как доработать данный код , чтобы окна (блоки) пересекались ? Чтобы один блок не сдвигал другой , ,а как бы частично сверху ... Или ссылку , если это на форуме обсуждалось ...

Прошу прощения актуально ...
 

Цитата: Василич от 11 ноября 2018, 03:00:30Прошу прощения актуально ...
 

Приболел я,глаза болят от монитора.
Пробовать использовать http://htmlbook.ru/css/z-index .

Цитата: S.T.A.L.K.E.R. от 11 ноября 2018, 09:46:29Приболел я,глаза болят от монитора.
Пробовать использовать http://htmlbook.ru/css/z-index .

Спасибо , для начала понял ...

А можете привести код самого простенького примера  двух окон(блоков)-слоев с использованием z-index ...

Так уж получается , что ваши варианты наиболее понятны мне и работоспособны ...

Цитата: Василич от 12 ноября 2018, 18:20:41А можете привести код самого простенького примера  двух окон(блоков)-слоев с использованием z-index ...

В теже самые блоки просто добавляете в один
z-index:999;
второй
z-index:1000;
У блока у которого выше значение z-index: тот будет распологаться поверху блока у которого ниже это значение.Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
position: relative;
top: -55px;
left: 5px;
z-index:999;Позиционирование блоков относительно друг друга уже задаете самим стилями.

Цитата: S.T.A.L.K.E.R. от 12 ноября 2018, 18:59:06Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

А если не задано position ? Я пока запускаю через мод рекламы , то что обсуждали ...


 

Цитата: Василич от 12 ноября 2018, 21:20:02А если не задано position ? Я пока запускаю через мод рекламы , то что обсуждали ...


 

Попробуйте просто,но лучше задавать.

Разбужу тему только один вопрос :


Как этом моде вставить код PHP ?

В SimpleAds?
Никак

Цитата: S.T.A.L.K.E.R. от 22 апреля 2020, 08:53:15В SimpleAds?
Никак

Понял , спасибо ...