Ru-Board.club
← Вернуться в раздел «Web-программирование»

» Помощи ищу: Javascript / CSS

Автор: Krakozavr
Дата сообщения: 11.04.2016 07:02
Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора.
И столкнулся с проблемой, которую сам решить не могу.

Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится.

Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный 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>

Автор: Mavrikii
Дата сообщения: 12.04.2016 05:18
Krakozavr
а нужно было новую тему создавать?
Вопросы по CSS


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

и что? CSS3 и это умеет
http://www.w3schools.com/css/css_attribute_selectors.asp

div[data-slide-url="gallery-description"] img {
...
}

а можно и через (если подходит)
div.slide img {
...
}
Автор: Krakozavr
Дата сообщения: 12.04.2016 23:28
Mavrikii
Спасибо!
Не предполагал, что это тоже штатный дескриптоп CSS. То, что нужно!

Заработало, но увы - наполовину

На сайте две раскладки: десктопная и мобильная.
Я включил нужные определения в имеющиеся свои кастомные блоки типа
Код: @media only screen and (max-height:ХХХpx){...}
Автор: Mavrikii
Дата сообщения: 12.04.2016 23:33
Krakozavr

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

можно
http://seodon.ru/css/prioritety-stilej.php
http://htmlbook.ru/samcss/kaskadirovanie
Автор: Krakozavr
Дата сообщения: 12.04.2016 23:48
Mavrikii
вторую ссылку я как раз сейчас изучал по идее, добавление параметра !important к моему тэгу должно дават ему приоритет, но - не дает. Получается, что два ID с суммарным весом 200 в РОДИТЕЛЬСКОМ элементе полностью перекрывают вес элемента дочернего, даже при том, что он определяется напрямую? Т.н. наследуемые элементы имеют все равно высокий вес?
Автор: Mavrikii
Дата сообщения: 12.04.2016 23:52
Krakozavr

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

сделайте больше и проблема решена
Автор: Krakozavr
Дата сообщения: 12.04.2016 23:54
ОООПППАААА!!!
мы сделали это
повысил специфичность, собрав всю цепочку родительских элементов - и оно ПЕРЕНАЗНАЧИЛОСЬ!
Спасибо огромное
Автор: Krakozavr
Дата сообщения: 13.04.2016 04:35
и все-таки пока немного 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;}
}

Страницы: 1

Предыдущая тема: Не получается зайти на сервер через Putty


Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.