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

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

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

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Открыть новую тему     Написать ответ в эту тему

Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ссылки для самостоятельного изучения:
 
Теория + примеры + учебники:
W3School: CSS Tutorial
MDN: Cascading Style Sheets (CSS)
WebReference: Уроки по HTML и CSS
htmlbook: Справочник CSS
YouTube: Основы CSS/CSS3
CSS для JavaScript-разработчика
Основы CSS - каскадные таблицы стилей
Статьи по основам CSS
 
Применение на практике:
StackOverflow: 'CSS' Questions
CSS-Tricks
 

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019
stupom



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В первом варианте высота ячейки таблицы не указана, она просто имеет высоту по содержимому.
 
Проверьте мой код, будет ли он работать у вас?

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 15:31 04-02-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
Я тебе ссылку дал, если ты не в состоянии тупо скопировать из примеров код, то я тебе ничем не помогу... тебе не стоит вообще всем этим заниматься, это не твое.

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 15:41 04-02-2016 | Исправлено: Xrobak, 15:42 04-02-2016
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
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>

 
height не работает, т.к. в родственном элементе не указан height. Там страница растягивается по высоте тоже автоматически.
 
Xrobak
в вашем случае, нужно позиционируемый блок, расширить на 50% высоту и ширину. В моем случае - высота блока может изменяться от 20px до 500px. И поэтому, height - недопустимо.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 18:46 04-02-2016 | Исправлено: Sutar, 18:48 04-02-2016
Xrobak

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

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 19:35 04-02-2016
Vasily_Koshkin



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

Всего записей: 1377 | Зарегистр. 07-02-2004 | Отправлено: 19:20 01-03-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vasily_Koshkin
ты имеешь ввиду чтобы к примеру этот круг закрашивался разными цветами?

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 22:11 01-03-2016
Vasily_Koshkin



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

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

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

Всего записей: 1377 | Зарегистр. 07-02-2004 | Отправлено: 23:38 01-03-2016
Xrobak

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

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 18:21 05-03-2016
Vasily_Koshkin



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

Всего записей: 1377 | Зарегистр. 07-02-2004 | Отправлено: 13:34 07-03-2016 | Исправлено: Vasily_Koshkin, 13:36 07-03-2016
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
прогресс бар делается на css, отображение % в зависимости от прогрузки картинки - это уже javascript/jquery

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 15:07 07-03-2016
Z4masko



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте, изучил все возможные способы позиционирования background с помощью CSS. Но никак не пойму, возможно ли сделать такое.
 
Есть картинка фона (background)  размером 2560 на 1440 
 
Хочу чтобы центр этого фонового изображения всегда был по центру экрана, но чтобы при этом при изменении ширины экрана - фоновая кртинка не изменяла своих размеров.
 
Образно говоря,
 
1. Сначала применяю к фону свойство  
 

Код:
 background-size: cover; 
 

 
фоновое изображение при этом фиксировано, не изменяет своих размеров при изменении ширины экрана, просто обрезается - так как я хочу, но хотелось бы ещё чтобы центр картинки был по центру экрана.
 
2. Применяю свойство 
 

Код:
background-position: center center;
 

 
Фоновое изображение встаёт по середине экрана, но теперь его размеры сжимаются и он сдвигается при изменении ширины окна.
 
Мне же надо, чтобы изображение было по центру  не сжималось, а просто обрезалось как при применении просто свойства background-size:cover и центр изображения был по центру экрана.

Всего записей: 735 | Зарегистр. 05-11-2004 | Отправлено: 12:01 31-03-2016
stupom



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

Всего записей: 182 | Зарегистр. 04-07-2015 | Отправлено: 14:34 31-03-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Простите за кросс-пост, поскольку проблема локализовалась до чистого 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;}  
}
 

 
мобила:

Код:
 
@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;}
   
}
 

 
Добавлено:
коллеги, и еще дурной вопрос - чтоб два раза не вставать
 
есть вот такая страница: http://pixels.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=223022&domainid=0&showheader=0&height=600&autoheight=true
 
вверху имеем переключатели меню: самый правый - Galleries. Если его нажать, разворачивается скрытый DIV.
 
А можно ли прилепить какой код свержу, чтобы страница грузилась сразу с открытыми галереями? Грузиться будет в iFrame, т.е. на материнскую страницу можно прилепить любой кастом CSS, но у меня вообще никаких идей как оно тут работает

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 05:29 13-04-2016 | Исправлено: Krakozavr, 05:31 13-04-2016
bober7

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

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

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

Всего записей: 128 | Зарегистр. 12-04-2016 | Отправлено: 09:27 13-04-2016
Krakozavr

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

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

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

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 21:43 13-04-2016 | Исправлено: Krakozavr, 21:44 13-04-2016
Krakozavr

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

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

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Krakozavr
вы не можете управлять содержимым iframe, если оно грузится с другого домена.
сделано это из соображений безопасности, иначе любой нехороший человек открыл бы в iframe у себя любой сайт, где вы залогинены автоматом, позвал бы пройти по ссылке и натворил бы дел чистым js

Всего записей: 15023 | Зарегистр. 20-09-2014 | Отправлено: 07:54 14-04-2016 | Исправлено: Mavrikii, 07:55 14-04-2016
Krakozavr

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

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

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

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

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

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

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

Всего записей: 15023 | Зарегистр. 20-09-2014 | Отправлено: 08:48 14-04-2016
Krakozavr

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ясно.
Спасибо, принято

Всего записей: 320 | Зарегистр. 02-02-2003 | Отправлено: 09:02 14-04-2016
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS


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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru