Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощи ищу: Javascript / CSS

Модерирует : Cheery

articlebot (13-04-2016 21:45): Вопросы по CSS  Версия для печати • ПодписатьсяДобавить в закладки

   

Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора.
И столкнулся с проблемой, которую сам решить не могу.
 
Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится.
 
Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный CSS / жаваскрипт средствами конструктора.
 
Проблема в том, что я не могу описать эту картинку в CSS - выдаваемый сервером код не присваивает ей никаких уникальных и постоянных аттрибутов, которые можно было бы использовть в CSS! Все аттрибуты, которые присваиваются картинке и родительскому DIV - либо генерируются системой (т.е. меняют значения при перезагрузках), либо не являются уникальными для данного элемента. А вписать в шаблон свой собственный аттрибут, как я уже отметил, нет возиожности.
 
Есть единственный аттрибут, который удовлетворяет параметрам уникальности и неизменности - но он, собака, не явдяется ни классом, ни ID - а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS. Кроме того, этот аттрибут присваивается не самой картинке, а родительскому DIV: data-slide-url="gallery-description" (в приведенном коде выделен зеленым)  
 
при этом размер картинки должен устанавливатьсчя в зависимости от размера ркна браузера.
 
Насколько я понимаю, эта ситуация может быть обработана только скриптом, но тут я совершенный нуль. Может ли кто-нибудь помочь решить этот ребус?
 
Вот кусок кода:
 

Код:
 
 
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
            <img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="" data-image-resolution="750w">
             
</div>
 
 

 
Спасибо заранее!

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 07:02 11-04-2016 | Исправлено: Krakozavr, 04:30 12-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Krakozavr
а нужно было новую тему создавать?  
Вопросы по CSS
 

Цитата:
но он, собака, не явдяется ни классом, ни ID - а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS

и что? CSS3 и это умеет
http://www.w3schools.com/css/css_attribute_selectors.asp
 
div[data-slide-url="gallery-description"] img {
...
}
 
а можно и через (если подходит)
div.slide img {
...
}

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 05:18 12-04-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо!  
Не предполагал, что это тоже штатный дескриптоп CSS. То, что нужно!
 
Заработало, но увы - наполовину
 
На сайте две раскладки: десктопная и мобильная.  
Я включил нужные определения в имеющиеся свои кастомные блоки типа
Код:
@media only screen and (max-height:ХХХpx){...}
 
 
В десктопной версии всё отлично.
А вот в мобильной, которая на первый взгляд ничем не отличается, не работает.
 
Я перерыл инспектор и, кажется, лoкализовал проблему:
 

Код:
#slideshowWrapper.mobile-gallery #slideshow .slide img {
    position: static !important;
    height: auto !important;
    width: 100% !important;

 
Этот системный код является родительским по отношению к искомому. В результате похоже, что кастомный код не перекрывает инструкции, помеченные как !important. Если в инспекторе отключаешь код height: auto !important; или просто затираешт !important, оставляя только auto - кастомный код начинает работать.
 
Я пробовал в кастомном CSS добавлять, в надежде переопределить !important на более мягкий вариант, конструкцию:
 

Код:
#slideshowWrapper.mobile-gallery #slideshow .slide img {height: auto;}
 
[data-slide-url="gallery-description"] img {height: 400px !important;}    
 

 
но это не работает, хотя по описанию астомный код с !important должен быт приоритетным.
 
Можно ли это как-то побороть?
 
P.S. Простите за путанку с темой, я не предполагал что это можно решить штатно через CSS - квалификации не хватает, я все-таки простой фотограф Очень сомневался, в какую тему можно это отнести.
 
P.P.S. Чтобы было понятнее, чего добиваюсь -ссылка на применение.
https://alex-potemkin.squarespace.com/
 
сайт на триале, надо нажать кнопку и ввести код для входа, уж простите  
 
Собственно, субъект масшитабирования - белая подложка под описанием.  
 
Проблема в том, что шаблон галереи не предусматривает такого блока вовсе, а мне он нужен. Я его создал хитрым хаком: загрузил белую картинку и дал ей в админке описание. Это описание выводится в специально размеченном DIV, свойства которого можно задать через CSS, а положение жестко привязано к картинке.  
 
Более того, в принципе работает адаптивный дизайн - галерея и текст масштабируются взависимости от разрешения дисплея, я там кое-что еще подкрутил и теперь почти хорошо. Но не совсем.
 
Проблема в том, что картинка масштабируется пропорционально. И соответственно приходится "пропорционально" масштабировать текст. И именно на раскладках для мобильных девайсов это создает большую проблему. Эта раскладка имеет другую структуру - изображения в галерее выстраиваются в вертикальную ленту, масштабируясь по ширине экрана. И тогда  картинка-подкладка становится слишком высокой, с огромным белым пространством, которое приходится заполнять слишком крупным текстом, а сама галерея вообще выдавливается за край экрана.

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 23:28 12-04-2016 | Исправлено: Krakozavr, 23:40 12-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Krakozavr

Цитата:
Можно ли это как-то побороть?  

можно
http://seodon.ru/css/prioritety-stilej.php
http://htmlbook.ru/samcss/kaskadirovanie

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:33 12-04-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
вторую ссылку я как раз сейчас изучал по идее, добавление параметра !important к моему тэгу должно дават ему приоритет, но - не дает. Получается, что два ID с суммарным весом 200 в РОДИТЕЛЬСКОМ элементе полностью перекрывают вес элемента дочернего, даже при том, что он определяется напрямую? Т.н. наследуемые элементы имеют все равно высокий вес?

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 23:48 12-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Krakozavr

Цитата:
Получается, что два ID с суммарным весом 200

сделайте больше и проблема решена

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:52 12-04-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ОООПППАААА!!!
мы сделали это
повысил специфичность, собрав всю цепочку родительских элементов - и оно ПЕРЕНАЗНАЧИЛОСЬ!
Спасибо огромное

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 23:54 12-04-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
и все-таки пока немного ooops.
прошел все настройки блоков. Один странный глюк.
десктопная раскладка обрабатывается как часы.
а мобильная, при вроде бы таком же CSS, не обрабатывается при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масгтабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. А при загрузке - нет. На том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков.
 
Чего ему не хватает?
 
Вот два фрагмента кода, для десктопа и мобилы:
 
десктоп:

Код:
 
@media only screen and (max-height:1200px){.collection-type-gallery #slideshow{height:800px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 800px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 14pt;}.site-title .logo {font-size: 40pt;}.logo-subtitle {font-size: 10pt;} #header, {padding-top: 10pt; padding-right: 60px; padding-bottom: 10pt; padding-left: 90px; }  
   
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 65px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
 
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 40pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
 
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 16pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
 
#header, #footer {padding-top: 10pt; padding-right: 60px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 85px;}
 
div[data-slide-url="gallery-description"] img {width: 500px;}  
}
 

 
мобила:

Код:
 
@media only screen and (max-width:800px){#slideshowWrapper.mobile-gallery #slideshow .slide .image-description {position: absolute; margin-top: 10px;}
 
#slideshowWrapper.mobile-gallery div#slideshow.sqs-gallery-design-strip div.sqs-wrapper div.slide[data-slide-url="gallery-description"] img {height: 300px !important;}    
     
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 35px; padding-right: 30px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
 
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 28pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
 
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 13pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
 
#header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 63px;}
   
}
 

 
Добавлено:
 
 
Добавлено:
P.S. Вернул разговор р основную тему, http://forum.ru-board.com/topic.cgi?forum=31&topic=14862&start=820#13

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 04:35 13-04-2016
   

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощи ищу: Javascript / CSS
articlebot (13-04-2016 21:45): Вопросы по CSS


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru