» Вопросы по CSS

Такой вопрос.

Вот кусок кода:

Код: transform: rotateY(90deg); transition: transform 0.5s; transform-style: preserve-3d;

Sutar
Я так понимаю, тебе такое нужно https://jsfiddle.net/3o1sxo1e/ ?
На будущее для наглядности http://daneden.github.io/animate.css/, там же есть ссылка на гитхаб где лежит исходный код этих анимаций, можешь вникнуть для понятия как все устроено

Xrobak
спасибо.

Вот ещё такая проблемка:

Код: <div><span>текст</span></div>

Цитата:

как выровнять span по средине div

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

stupom

Цитата:

В ячейке таблицы содержимое выравнивается по середине высоты.

я пробовал такой вариант, но он почему-то не хочет.

div и span используют position:absolute; top:0; bottom:0; left:0; right:0;
и почему-то не получалось сделать табличного типа.

Цитата:

но он почему-то не хочет

Да не могёт такого быть.

Цитата:

<table><tr><td style="height: 300px; width: 300px; text-align: center; border: 1px solid red;">bla-bla-bla<br>bla-bla-blah</td></tr></table>

-попробуйте

Sutar http://webformyself.com/absolyutnoe-centrirovanie-po-gorizontali-i-vertikali-v-css/ подбирай для себя, в крайнем случае гугли - валом инфы


Цитата:

и почему-то не получалось сделать табличного типа

обычно это display: table-cell;

Можно ещё так, правда это не работает на пылесосах или требует имитации таблицы - родительских элементов ячейки

Цитата:

<div style="height: 300px; width: 300px; text-align: center; border: 1px solid red; display: table-cell; vertical-align: middle;">bla-bla-bla<br>bla-bla-blah</div>

Вот, пробовал реализовать как вы пишите:


Код: <style>
div {width: 1000px; height: 500px; margin: 0px auto; border: 1px solid #000; position: relative; overflow: hidden;}
table, td {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
td {text-align: center; line-height: 18px; font-weight: bold; border: 1px solid red;}
</style>
<div><table><tr><td>bla-bla-bla<br>bla-bla-blah</td></tr></table></div>

В первом варианте высота ячейки таблицы не указана, она просто имеет высоту по содержимому.

Проверьте мой код, будет ли он работать у вас?

Sutar
Я тебе ссылку дал, если ты не в состоянии тупо скопировать из примеров код, то я тебе ничем не помогу... тебе не стоит вообще всем этим заниматься, это не твое.

stupom
Да, что в моем, что в Вашем случае, если добавить wight и height 100% в table, всё работает хорошо. Но тут 1н нюанс. Окно которое я позиционирую - плавающее. И с table оно не растягивается по высоте на 100%.


Код:
<style>
#i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: table;
}
</style>

<div id="i"><div>12321312<br>2131312</div></div>

Sutar
Вы точно смотрите мою ссылку или что-то другое? В моей ссылке приводятся примеры нескольких вариантов реализаций, НЕСКОЛЬКО!!! Какое еще расширить высоту и ширину? Выберите из предложенных в статье нескольких методов тот, к-рый вам подходит и все (тот же inline-block к примеру). У меня просто нет слов.

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

Vasily_Koshkin
ты имеешь ввиду чтобы к примеру этот круг закрашивался разными цветами?

Xrobak

Цитата:

ты имеешь ввиду чтобы к примеру этот круг закрашивался разными цветами?

Чтобы вместо круга была любая произвольная картинка. Но появлялась, что называется, "clockwise manner". Такое возможно?

Vasily_Koshkin
В том примере что ты показал для класса .circle_red убери background-color и задай фон нужной тебе картинки, например так
Код: background: url('http://www.djgraffiti.com/wp-content/uploads/revslider/homepage1/The-Mangler-Circle.png');

Xrobak
Надо же как все просто! Сам не допер, видно старею. Большое спасибо за подсказку!
Прикрутить бы еще градусник вроде этого, но это, кажется, слегка за рамками данной темы. Или, может быть, существует "pure CSS" вариант? Интересно было бы взглянуть.

прогресс бар делается на css, отображение % в зависимости от прогрузки картинки - это уже javascript/jquery

Здравствуйте, изучил все возможные способы позиционирования background с помощью CSS. Но никак не пойму, возможно ли сделать такое.

Есть картинка фона (background)  размером 2560 на 1440 

Хочу чтобы центр этого фонового изображения всегда был по центру экрана, но чтобы при этом при изменении ширины экрана - фоновая кртинка не изменяла своих размеров.

Образно говоря,

1. Сначала применяю к фону свойство  


Код:  background-size: cover; 

Z4masko, не знаю есть ли такая возможность только с CSS3. Если не ошибаюсь, удовлетворительная стабильность поддержки браузерами гибкой работы с фоновыми изображениями стала появлятся лет пять назад. Если требуется надёжность работы страницы, рекомендую воздержаться от CSS, а если очень надо, делайте отдельный div для фоновых изображений и используйте z-index.

Добавлено:
Чёт форум глючит, повторюсь наверное, если появится дублем, пусть модератор сотрёт
================
Z4masko, не знаю есть ли такая возможность только с CSS3. Если не ошибаюсь, удовлетворительная стабильность поддержки браузерами гибкой работы с фоновыми изображениями стала появлятся лет пять назад. Если требуется надёжность работы страницы, рекомендую воздержаться от CSS, а если очень надо, делайте отдельный div для фоновых изображений и используйте z-index.

Простите за кросс-пост, поскольку проблема локализовалась до чистого CSS, возвращаю вопрос в основную ветку по CSS. Начало обсуждения тут: ТЫК!

C помощью глубокоуважаемого Mavrikii, да будуь благословенны следы его подошв - почти решил ребус с настройкой хитрого блока под разрешение экрана.

Но небольшой ooops имеется.

Сайт http://alex-potemkin.squarespace.com - пока на триале, надо нажать кнопу и ввести предложенный код, простите за неудобства. Конструктор SquareSpace не дает доступа к исходному коду, но позволяет внедрять кастомный CSS и скрипты.

На сайте две раскладки: десктопная и мобильная.

Десктопная раскладка обрабатывается как часы.

А мобильная, при вроде бы такой же структуре 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;}
}

Цитата:

Если его нажать, разворачивается скрытый DIV.

А можно ли прилепить какой код свержу, чтобы страница грузилась сразу с открытыми галереями?

открыл - галереи уже открыты изначально. Нажатие на одну из категорий только меняет выбранную галерею.
Что еще должно открыться?
(зы, просмотр в ФФ 45)

Цитата:

Что еще должно открыться

по дефолту открывается так:
[more=картинка 1] [/more]
а хочется так:
[more=картинка 2] [/more]

дак, коллеги - разобрался, вопрос снимается. Простите за беспокойство.

P.S. препятствовало корректной работе слищком длинное (набранное "по максимуму" в погоне за весом идентификаторов, для перебивки директивы !important) описание. Пошарил в инспекторе, зачистил до минимально-достаточного уровня, и оно пошло!

Второй вопрос непрофильный, скорее всего тут без javascript не обойтись.

Krakozavr
вы не можете управлять содержимым iframe, если оно грузится с другого домена.
сделано это из соображений безопасности, иначе любой нехороший человек открыл бы в iframe у себя любой сайт, где вы залогинены автоматом, позвал бы пройти по ссылке и натворил бы дел чистым js

Цитата:

вы не можете управлять содержимым iframe, если оно грузится с другого домена

Т. е., грубо говоря, нажать в iframe кнопку скриптом после его загрузки не получится? Это ведь не модификация содержимого, а некое действие на странице, вполне легальное?

Krakozavr

Цитата:

Т. е., грубо говоря, нажать в iframe кнопку скриптом после его загрузки не получится?  Это ведь не модификация содержимого, а некое действие на странице,  вполне легальное?  

нет, если iframe не с того же домена. доступа нет вообще и правильно сделано.

Ясно.
Спасибо, принято

Mavrikii, простите что возврашюсь к безнадежной теме
Но всё-таки. Идея скорее всего дурная, но: можно ли зашить некое действие в URL загружаемой страницы, опираясь на описание нужноко для клика элемента?

выглядит оно вот так:

Код:
<div class="customdropdowncontainer">
<p>Galleries</p>
<div id="dropdowngalleries" class="customdropdownselected" onclick="javascript: showoptions("galleries");">
<p>All</p>
<div>
<img src="https://fineartamerica.com/images/ArrowDownCustomDropDown.png">
</div>
</div>
</div>