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

» Вопросы по CSS

Автор: Sutar
Дата сообщения: 02.02.2016 20:30
Такой вопрос.

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

Код: transform: rotateY(90deg); transition: transform 0.5s; transform-style: preserve-3d;
Автор: Xrobak
Дата сообщения: 02.02.2016 21:50
Sutar
Я так понимаю, тебе такое нужно https://jsfiddle.net/3o1sxo1e/ ?
На будущее для наглядности http://daneden.github.io/animate.css/, там же есть ссылка на гитхаб где лежит исходный код этих анимаций, можешь вникнуть для понятия как все устроено
Автор: Sutar
Дата сообщения: 03.02.2016 20:18
Xrobak
спасибо.

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

Код: <div><span>текст</span></div>
Автор: stupom
Дата сообщения: 03.02.2016 20:52

Цитата:
как выровнять span по средине div
-есть куча решений, но они все разно-глючные.
Например, можно инлайн контейнер сделать высотой с родительский блок, и в нём сделать инлайн-блок выровненный по середине строки.
Но самый надёжный и простой способ - использовать табличный дизайн. В ячейке таблицы содержимое выравнивается по середине высоты. Работает во всех браузерах и совершенно очевидно в использовании.
Автор: Sutar
Дата сообщения: 03.02.2016 22:13
stupom

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

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

div и span используют position:absolute; top:0; bottom:0; left:0; right:0;
и почему-то не получалось сделать табличного типа.
Автор: stupom
Дата сообщения: 03.02.2016 22:19

Цитата:
но он почему-то не хочет

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

Цитата:
<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>

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


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

обычно это display: table-cell;
Автор: stupom
Дата сообщения: 03.02.2016 22:48
Можно ещё так, правда это не работает на пылесосах или требует имитации таблицы - родительских элементов ячейки

Цитата:
<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>
Автор: Sutar
Дата сообщения: 04.02.2016 13:32
Вот, пробовал реализовать как вы пишите:


Код: <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>
Автор: stupom
Дата сообщения: 04.02.2016 14:31
В первом варианте высота ячейки таблицы не указана, она просто имеет высоту по содержимому.

Проверьте мой код, будет ли он работать у вас?
Автор: Xrobak
Дата сообщения: 04.02.2016 14:41
Sutar
Я тебе ссылку дал, если ты не в состоянии тупо скопировать из примеров код, то я тебе ничем не помогу... тебе не стоит вообще всем этим заниматься, это не твое.
Автор: Sutar
Дата сообщения: 04.02.2016 17:46
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>
Автор: Xrobak
Дата сообщения: 04.02.2016 18:35
Sutar
Вы точно смотрите мою ссылку или что-то другое? В моей ссылке приводятся примеры нескольких вариантов реализаций, НЕСКОЛЬКО!!! Какое еще расширить высоту и ширину? Выберите из предложенных в статье нескольких методов тот, к-рый вам подходит и все (тот же inline-block к примеру). У меня просто нет слов.
Автор: Vasily_Koshkin
Дата сообщения: 01.03.2016 18:20
Нашел один интересный эффект, не встречавшийся мне до этого нигде и никогда. Возник вопрос - можно ли сделать так, чтобы подобным способом грузить многоцветные изображения? Кто-нибудь реализовывал такое? Поделитесь опытом, будьте добры. Спасибо за внимание.
Автор: Xrobak
Дата сообщения: 01.03.2016 21:11
Vasily_Koshkin
ты имеешь ввиду чтобы к примеру этот круг закрашивался разными цветами?
Автор: Vasily_Koshkin
Дата сообщения: 01.03.2016 22:38
Xrobak

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

Чтобы вместо круга была любая произвольная картинка. Но появлялась, что называется, "clockwise manner". Такое возможно?
Автор: Xrobak
Дата сообщения: 05.03.2016 17:21
Vasily_Koshkin
В том примере что ты показал для класса .circle_red убери background-color и задай фон нужной тебе картинки, например так
Код: background: url('http://www.djgraffiti.com/wp-content/uploads/revslider/homepage1/The-Mangler-Circle.png');
Автор: Vasily_Koshkin
Дата сообщения: 07.03.2016 12:34
Xrobak
Надо же как все просто! Сам не допер, видно старею. Большое спасибо за подсказку!
Прикрутить бы еще градусник вроде этого, но это, кажется, слегка за рамками данной темы. Или, может быть, существует "pure CSS" вариант? Интересно было бы взглянуть.
Автор: Xrobak
Дата сообщения: 07.03.2016 14:07
прогресс бар делается на css, отображение % в зависимости от прогрузки картинки - это уже javascript/jquery
Автор: Z4masko
Дата сообщения: 31.03.2016 12:01
Здравствуйте, изучил все возможные способы позиционирования background с помощью CSS. Но никак не пойму, возможно ли сделать такое.

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

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

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

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


Код:  background-size: cover; 
Автор: stupom
Дата сообщения: 31.03.2016 14:34
Z4masko, не знаю есть ли такая возможность только с CSS3. Если не ошибаюсь, удовлетворительная стабильность поддержки браузерами гибкой работы с фоновыми изображениями стала появлятся лет пять назад. Если требуется надёжность работы страницы, рекомендую воздержаться от CSS, а если очень надо, делайте отдельный div для фоновых изображений и используйте z-index.

Добавлено:
Чёт форум глючит, повторюсь наверное, если появится дублем, пусть модератор сотрёт
================
Z4masko, не знаю есть ли такая возможность только с CSS3. Если не ошибаюсь, удовлетворительная стабильность поддержки браузерами гибкой работы с фоновыми изображениями стала появлятся лет пять назад. Если требуется надёжность работы страницы, рекомендую воздержаться от CSS, а если очень надо, делайте отдельный div для фоновых изображений и используйте z-index.
Автор: Krakozavr
Дата сообщения: 13.04.2016 05:29
Простите за кросс-пост, поскольку проблема локализовалась до чистого 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;}
}
Автор: bober7
Дата сообщения: 13.04.2016 09:27

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

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

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

Цитата:
Что еще должно открыться

по дефолту открывается так:
[more=картинка 1] [/more]
а хочется так:
[more=картинка 2] [/more]
Автор: Krakozavr
Дата сообщения: 14.04.2016 07:47
дак, коллеги - разобрался, вопрос снимается. Простите за беспокойство.

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

Второй вопрос непрофильный, скорее всего тут без javascript не обойтись.
Автор: Mavrikii
Дата сообщения: 14.04.2016 07:54
Krakozavr
вы не можете управлять содержимым iframe, если оно грузится с другого домена.
сделано это из соображений безопасности, иначе любой нехороший человек открыл бы в iframe у себя любой сайт, где вы залогинены автоматом, позвал бы пройти по ссылке и натворил бы дел чистым js
Автор: Krakozavr
Дата сообщения: 14.04.2016 08:46

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

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

Автор: Mavrikii
Дата сообщения: 14.04.2016 08:48
Krakozavr

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

нет, если iframe не с того же домена. доступа нет вообще и правильно сделано.
Автор: Krakozavr
Дата сообщения: 14.04.2016 09:02
Ясно.
Спасибо, принято
Автор: Krakozavr
Дата сообщения: 15.04.2016 05:06
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>

Страницы: 12345678910111213141516171819202122232425262728293031

Предыдущая тема: Вопрос к знатокам CSS


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