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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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 128 129

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

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
CDT



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Нет задумка была в три фото в ряд, 25% это я поставил, чтоб можно было играться с padding и margin. Сам еще до конца не понял почему моя задумка не сработала, если просто, без hover нарисовать border, то смещения нет. Но способ с прозрачным border - это красиво и надежно.
 
Добавлено, дошло, нужно было border не блоку рисовать, а картинке......
.block img:hover{
    border-top: 5px solid red;
    border-left: 5px solid red;
    border-right: 5px solid red;
    margin-top: -5px;
    margin-left: -5px;
 
}
Всего записей: 163 | Зарегистр. 07-08-2008 | Отправлено: 17:16 12-11-2016 | Исправлено: CDT, 17:32 12-11-2016
HeT BonpocoB



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

Цитата:
дошло

всё работает и на блоках если задать им размер Ссылка
 
Всего записей: 1342 | Зарегистр. 30-03-2003 | Отправлено: 18:39 12-11-2016
CDT



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
фото все-таки сжимается, а так жестко стоит http://codepen.io/anon/pen/eBZBra
Всего записей: 163 | Зарегистр. 07-08-2008 | Отправлено: 19:30 12-11-2016
Xrobak

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
http://cssdeck.com/labs/pq4tmojq
По ходу я туплю или что-то упускаю из виду. Тайтл с первого по шестой имеют одно название класса, тайтлы с 1-1 по 1-4 имеют другое название класса. Цель простейшая: выделить каждый четвертый див класса test-item-items, начиная с четвертого дива. Собственно для этого и записано  nth-child(4n+4) и как результат, красным выделиться должен Title #1-4, а выделяется Title #1-2.
Если убрать все дивы с классом test-item, то корректно выделит нужный Title #1-4. Ласт-чайлд и т.п. не предлагать, кол-во дивов каждый раз разное, поэтому должно выделяться всегда каждый четвертый test-item-items.
Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 06:28 18-11-2016
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Xrobak
оберните список нужных дивов во что либо (например другой див)
http://cssdeck.com/labs/lparczhm
эти псевдоклассы не работают нормально если на том же уровне есть другие сиблинги или что то сидит между элементами.
то есть работают только если все элементы - дети одного родителя.
 
как у вас сейчас - выбирать каждого четвертого сиблинга одного родителя, если у сиблинга указанный класс (поэтому подсвечивается 8 ребенок, как кратный 4 и имеющий нужный класс).
и это не работает (как хотелось бы) таким образом - выбрать все с таким классом, а потом из них каждый четвертый.
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 06:32 18-11-2016 | Исправлено: Mavrikii, 06:40 18-11-2016
Xrobak

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Ясно. Спасибо! Я все же думал, что проблема в чем-то другом, и обойдется все без дополнительной обертки, а это по ходу просто баг, так что придется делать с доп. оберткой)
 

Цитата:
как у вас сейчас - выбирать каждого четвертого сиблинга одного родителя, если у сиблинга указанный класс (поэтому подсвечивается 8 ребенок, как кратный 4 и имеющий нужный класс).  

Это если в теории предположить, почему выделило второй, а не четвертый - похоже на правду. Но по такой же логике, все-равно через одно место работает. Т.к. в селекторе четко указан и класс, и что должен сначала подсветиться 4 элемент, потом 8 и т.д., но подсветился только 8. Странно что за столько лет этот баг еще не пофиксили.
Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 11:43 18-11-2016
Mavrikii

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

Цитата:
и что должен сначала подсветиться 4 элемент,

у 4 сиблинга одного родителя нет класса test-item-items, поэтому и не светится.
это не баг, это вы не так работу понимаете.
поясняю на пальцах - находится элемент с классом test-item-items, берутся его сиблинги (ну или все прямые дети его родителя), выбираются каждый 4 и из этого только те, у которых фактически есть класс test-item-items.
 
измените класс 4му сиблингу и он засветится

Код:
  <div class="test-item-items">
    <div class="test-wrapper">
      <div class="test-itemname">Title #4</div>
      <div class="test-itemimage"><a href="#"></a></div>
    </div>
  </div>
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 11:45 18-11-2016 | Исправлено: Mavrikii, 11:49 18-11-2016
HeT BonpocoB



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

Цитата:
Тайтл с первого по шестой имеют одно название класса,

.test-item-items:nth-child(4n+10)
Всего записей: 1342 | Зарегистр. 30-03-2003 | Отправлено: 12:23 18-11-2016
Mavrikii

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

Цитата:
.test-item-items:nth-child(4n+10)  

тут неясно, вдруг у него количество и первых элементов может быть различных.
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:41 18-11-2016
Xrobak

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

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

так и есть, кол-во элементов не имеет четкого числа, поэтому как ни крути, а .test-item-items:nth-child(4n+4) должно быть рабочим вариантом по мануалу, так что вариант от HeT BonpocoB не мой случай)
 
Next question. Есть несколько дивов, у каждого свой класс или может его не быть. Все эти дивы обернуты в див (wrapper). Допустим, я для тега А прописал показывать бордер или подчеркивание. В этих дивах в ссылку может быть заключен как текст, так и картинки. Задача стоит в выборе всех ссылок, чайлды у к-рых img. Прописать классы на тег А или img не вариант.
Итого, еще раз: нужно выбрать и применить стили к А, у к-рых чайлд рисунок. Все что мы можем привязаться к классу - это класс у wrapper'a.
 
div
-div
--a
---img
Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 04:08 24-11-2016 | Исправлено: Xrobak, 14:28 24-11-2016
Mavrikii

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

Цитата:
 А, у к-рых сиблинг рисуно

не путаете сиблингов (одного уровня) с детьми?
если дети - нет возможности в css пока выбирать родителя по ребенку - будет в CSS4
https://webdesign.tutsplus.com/tutorials/selecting-parent-elements-with-css-and-jquery--cms-26423
 
если действительно сиблинг (то есть картинки на том же уровне вложенности, что и ссылка), то  
img + a {
 
}
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 04:16 24-11-2016 | Исправлено: Mavrikii, 04:19 24-11-2016
Xrobak

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
да, сори, чайлды) исправил в первом сообщении
Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 14:27 24-11-2016
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто может подсказать, если баннер показывается таким кодом, то как можно поверх него поставить другую картинку (полупрозрачный png)?

Код:
#intro #intro-background {
background: url(%resource(Banner.jpg)%);
background-size: cover;
}

Если использовать :after после #intro-background, то ничего не меняется:

Код:
#intro #intro-background:after {
background: url(%resource(image.png)%) repeat;
}
Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 02:37 08-12-2016
Mavrikii

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

Цитата:
Если использовать :after после #intro-background, то ничего не меняется

1) ::after
2) требуется content: ' ';
https://jsfiddle.net/9t91pdfj/
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 02:54 08-12-2016 | Исправлено: Mavrikii, 02:54 08-12-2016
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! Есть тема оформления страницы и баннер в ней меняется через #intro #intro-background и далее. В другой теме достаточно одного слова (например, #intro или #banner), так вот если одно слово и использовать потом ::after, то всё работает, а с этим никак не получается.
Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 14:24 08-12-2016
Sutar



BANNED		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте,
помогите решить данную проблему.
Есть такой вот кусок:
 

Код:
 
<style>
div#table div.1{background:rgba(0,0,0,0.85); position:fixed; top:0; bottom:0; left:0; right:0; z-index:5;}
div#table div.2{position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; z-index: 6;}
div#table div.3{background: #fff; width: 700px; margin: 0px auto; position: relative; z-index: 7;}
</style>
 
<div id="table">
    <div class="1" onclick="return exit1();"></div>
    <div class="2" onclick="return exit2();">
        <div class="3">
            <form method="POST" action="./">
                ...........................................
            </form>
        </div>
    </div>
</div>

 
div.1 - темный фон
div.2 - простой фон с скролом (без заливки)
div.3 - блок с информацией.
 
Проблема в следующем.
Если нажать в области div.3 до сработает exit2() - что не должно быть. Как это убрать?
Если нажать на темный фон div.1 то сработает снова exit2() - что не должно быть снова(
 
Нужно сделать так, чтоб если нажимать в области div.3 - exit2() не срабатывал. А если нажать в области div.1 срабатывал exit1(). Как это можно реализовать?(
 
Я пробовал вообще убрать exit2() но тогда при нажатии на темный фон, не срабатывает exit1()
Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 14:50 08-12-2016
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar
ну и каким боком это относится к CSS??
наверстывайте упущенное - https://learn.javascript.ru/event-bubbling
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 21:52 08-12-2016
CDT



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот так реально сделать, http://rgho.st/6znwPdSy6 , пробовал filter:blur совместно с gradient , не получается. Подскажите и направьте в нужное русло.
Всего записей: 163 | Зарегистр. 07-08-2008 | Отправлено: 22:35 08-12-2016
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
CDT
отображаете две половинки, одну размываете, вторую нет
Всего записей: 15684 | Зарегистр. 20-09-2014 | Отправлено: 22:38 08-12-2016
CDT



Junior Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
всмысле  background-image: linear-gradient(transparent 50%, #f5f5f5 50%) ? А плюс blur
Всего записей: 163 | Зарегистр. 07-08-2008 | Отправлено: 22:44 08-12-2016 | Исправлено: CDT, 22:45 08-12-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 128 129

Компьютерный форум 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