• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Адаптивные вкладки и изображения в них
Адаптивные вкладки и изображения в них
Оригами13
 		Вторник, 20 Ноября 2018, 15:53 | Сообщение 1
Оффлайн
Пользователи
Сообщений:14
Награды: 0
« 0 »
Доброго времени суток. Не могу понять, какой код отвечает за то, чтоб делать изображения в вкладках более.. приплюснутыми чтоль.

Пример: pelmeni.my1.ru/load/skyrim_se/oruzhie/hghghghghg/4-1-0-12

Во вкладке Изображения.

Брал код отсюда - /load....-0-9133

Изменил его немного под себя:

Код
consecte-adipisicing {
width: 100%;
margin: 0 auto;
position: relative;
}
.dekubas-nav,
.dekubas-content {
padding-top: 7px;
display: none;
}

.dekubas-content3 {display: none;}

.dekubas-label {
font-size: 1.2em;
display: inline-block;
float: left;
padding: 1em 1.5em;
color: #fff;
cursor: pointer;
text-decoration: none;
text-align: center;
background: #333;
position: relative;
top: 0px;
}

.dekubas-label__text {color: #fff;}

@media (min-width: 992px) .dekubas-label__text {display: none;}
@media (min-width: 768px) {.dekubas-label__text {display: block;} }
@media (min-width: 992px) {.dekubas-label__text {display: inline-block;} }
#dekubas1:checked ~ #content1,
#dekubas2:checked ~ #content2,
#dekubas3:checked ~ #content3 {
display: block;
padding: 0px;
background: #eeeeee;
color: #333;
}
.consecte-adipisicing .dekubas-nav:checked + .dekubas-label {
background: #3f6fa0;
top: 0;
padding-bottom: 15px;
}
.consecte-adipisicing .dekubas-nav:checked + .dekubas-label {
color: #333;
}


Код
<div class="consecte-adipisicing">
  <input id="dekubas1" class="dekubas-nav" type="radio" name="dekubass" checked>
  <label for="dekubas1" class="dekubas-label">  
  <span class="dekubas-label__text">Описание</span>
  </label>

  <input id="dekubas2" class="dekubas-nav" type="radio" name="dekubass">
  <label for="dekubas2" class="dekubas-label">
  <span class="dekubas-label__text">Файлы</span>
  </label>

  <input id="dekubas3" class="dekubas-nav" type="radio" name="dekubass">
  <label for="dekubas3" class="dekubas-label">
  <span class="dekubas-label__text">Изображения</span>
  </label>
<section id="content1" class="dekubas-content">  
    <table border="0" width="100%" cellspacing="0" cellpadding="0" style="padding-top:7px;margin-bottom:20px;"><tr><td class="eText">$MESSAGE$</td></tr></table>
  </section>

  <section id="content2" class="dekubas-content">
  <p>Описание - 2 </p>
  </section>

  <section id="content3" class="dekubas-content3">
  <?if($IMG_URL2$||$IMG_URL3$||$IMG_URL3$)?><div class="wiga-1" style="padding-top:7px!important;">
<?if($IMG_URL1$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL1$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL1$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL2$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL2$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL2$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL3$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL3$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL3$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL4$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL4$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL4$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL5$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL5$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL5$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL6$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL6$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL6$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL7$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL7$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL7$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL8$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL8$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL8$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
<?if($IMG_URL9$)?><table border="0" cellpadding="0" cellspacing="0" class="wiga-2"><tr><td><div class="wiga-3" style="background:url($IMG_URL9$);"><a id="wiga-4" class="dd-tip ulightbox" data-fancybox-group="ultbx" href="$IMG_URL9$" target="_blank" title="Нажмите для увеличения изображения"> </a></div></td></tr></table><?endif?>
</div><?endif?>  
  </section>
  </div>


И получилось собственно то, что получилось. Если вытащить изображения из вкладок - выглядит адекватно, а тут.. вот так.
Подскажите, что за строка такая злая? Или всё дело вообще в стилях на самих изображениях?

Добавлено (2018-11-20, 15:54)
---------------------------------------------
Ай.. случайно удалил ] в первой строчке кода и вышло не красиво ))
Страна: (FI)
Kosten
 		Вторник, 20 Ноября 2018, 16:36 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Оригами13, так у вас все корректно установлено, разве, что поставить 6-е изображение.
Прикрепления: 9890588.jpg (62.2 Kb)
Страна: (RU)
origami1333
 		Вторник, 20 Ноября 2018, 17:27 | Сообщение 3
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
Kosten, эээм... неа. Чистил кеш, куки и тд, всё равно. Чет не так.



и да, другой акк, сорь ))
Прикрепления: 9698696.png (372.7 Kb)
Страна: (FI)
Kosten
 		Вторник, 20 Ноября 2018, 18:13 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Оригами13, в том то и дело, что открывая страницу, показывает сжатыми, как только хочу посмотреть код через браузер, автоматически становятся так, как на скрине предоставил.
Страна: (RU)
BLAzER
 		Вторник, 20 Ноября 2018, 19:51 | Сообщение 5
Оффлайн
Vip
Сообщений:26
Награды: 3
« 22 »
Цитата Оригами13 ()
Не могу понять, какой код отвечает за то, чтоб делать изображения в вкладках более.. приплюснутыми чтоль.

Этот код у вас прописывается с помощью js как style к диву с картинкой, если вы хотите изменить их высоту это можно сделать двумя способами, на css:
Код
.wiga-3 {height:200px!important;}


Либо же на js, как у вас сейчас сделано в подключенном файле pelmeni.my1.ru/js/wiga-mat.js изменив значение деления высоты окна с 2 на 1, и уже картинки не будут изменять высоту
Код
$(function(){
$('.wiga-3').height($('.wiga-3').width()/1);
$(window).resize(function(){
$('.wiga-3').height($('.wiga-3').width()/1);
});
});

Либо просто отключить/удалить этот файл, что я советую (если не нужно конечно же изменять их высоту в зависимости от высоты окна)
Страна: (RU)
origami1333
 		Четверг, 22 Ноября 2018, 14:13 | Сообщение 6
Оффлайн
Проверенные
Сообщений:18
Награды: 0
« 1 »
BLAzER, Спасибо )
Страна: (FI)
Форум » Веб-разработка » Вопросы про uCoz » Адаптивные вкладки и изображения в них
  • Страница 1 из 1
  • 1
Поиск: