McLotos

display: grid grid: "leftSection regStep rightSection " auto "leftSection submitButton rightSection" auto / auto auto Когда в regStep появляется текст, сетка исчезает, то есть весь текст растягивается на всю ширину текста, как исправить этот баг и заставить текст оставаться по середине экрана? Набросал такой вариант grid "leftSection regStep rightSection " auto "leftSection submitButton rightSection" auto/ minmax(20px, 20%) minmax(60%, 1fr) minmax(20px, 20%) Но мне кажется этот код попахивает 😃

I have solution было main section display: grid grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) grid-gap: 2rem стало main section display: grid grid-template-columns: repeat(auto-fit, minmax(20rem, max-content)) justify-content: center grid-gap: 2rem Рабочий пример https://codepen.io/McLotos/pen/ExYWoQq?editors=1100

Никто не знает?

Всем привет. Есть шаблон, который никак не могу заставить вести себя как нужно - в одной из секций шаблона есть 3 блока, которые всегда должны быть по центру страницы, но в какой-то момент они начинают прижиматься к левому краю экрана и остается много пустоты, подскажите как починить (при этом есть навязчивое желание не использовать @media думаю код объяснит вопрос лучше, чем я https://codepen.io/McLotos/pen/ExYWoQq?editors=1100 Если начать растягивать страницу по ширине, то в какой-то момент блоки просто приклеиваются к левому краю, а нужно чтобы все три блока, стоя рядом были точно по середине страницы в качестве простого решения, можно добавить @media screen and (min-width: 50rem) и там указать что-то типа main grid-template-columns: repeat(5, 1fr) section grid-column-start: 2 grid-column-end: 4 но не хочется использовать @media-запросы, чтобы не возиться с подгонкой под разные экраны, смысл grid пропадает

Просто посмотрите http://oldweb.today/nswin/19991215092607/htmlbook.ru

Собственно сабж =) Хочу углубленно изучить API HTML5, но материала мало. Нашел статью http://www.htmlgoodies.com/html5/javascript/a-5-minute-overview-of-all-new-javascript-apis-in-html5.html#fbid=JowBN29cddf и немного информации на w3c.

Это прикол шаблонизатора, ну типа чтобы не парсить 2 разных объекта, он парсит label, а input как бы автоматом цепляет

Супер, но это если label отдельно от input. Я так тоже пробовал, а вот именно в таком варианте, когда label обернут вокруг input, у меня не получилось сделать

Добрый день! Есть такая верстка <label><input type="checkbox" value="val"/>Checkbox1</label> <label><input type="checkbox" value="val2"/>Checkbox2</label>Чекбоксы скрыты, как можно используя только css добавить иконку после label если чекбокс отмечен? Вопрос скорее для фана, чем для практики, поэтому хочется именно на css решение найти.

Спасибо. Тему можно закрывать.

https://jsfiddle.net/obxeg67m/embedded/result/

Да, читал, но там тоже нет ни слова про объем

Всем привет. Вот хочу сделать динамическое построение круговых диаграмм на странице статистики. Долго думал и в результате остановился на варианте создания SVG на чистом JS. Всё бы ничего, вот только информации по SVG кот наплакал, а хочется сделать всё красиво. Пока мой JS умеет генерировать псевдо-3D круговую диаграмму, проблема в том что она плоская, а хочется объемную. Подскажите где что почитать по теме? Например на w3c есть вот такой пример http://www.w3schools.com/svg/tryit.asp?filename=trysvg_ellipse2 А как сделать эти же элисы еще и толстыми, ну чтобы они выглядели например так

Валидатор показывает только 1 ошибку, но он ее показывает на всех страницах, говорит что спецификация HTML5 пока не поддерживается полностью.

Тогда получается что в php DOM не понимает такую связку, потому-что при переборе элементов страницы он думает что hr является родителем следующего за ним div. Ладно, буду ковырять, спасибо. А где можно почитать про вложенность?

http://caniuse.com/#feat=css-textshadow А вообще для safari можно юзать -webkit-text-shadow Если очень хочется отдельный css под safari то можно для начала определить какой браузер у пользователя, а потом если safari то подставить другой css

Добрый день! Не могу разобраться со вложенностью элементов. Можно ли hr-тэг засовывать в div? В общем у меня есть класс на php который парсит шаблоны, и этот класс выдает fatal error, когда находит hr внутри div, а hr между div его совсем не напрягает. Вот хотел бы узнать где можно почитать про вложенность тэгов.

Если используется JS, то смысла в keyframes никакого, равно как и наоборот. Т.е. идея в том чтобы сделать это полностью на css, без использования js. Но для этого придется переписать половину css.

Ну это понятно, но я хочу с использованием @keyframes

Добрый день! Есть код, который срабатывает при наведении, а как сделать чтобы он срабатывал по таймеру? <div class="imgholder"> <div class="outer1 circle"></div> <div class="outer2 circle"></div> <figure> <img src="../images/claudia-galhardo.jpg" /> <figcaption class="caption">TEST</figcaption> </figure></div>.imgholder{ position:relative; width:120px; height:120px; border-radius:100px; float:left; margin:40px 30px;}/* thumbnails style */.imgholder img{ position:absolute; left:0; top:0; width:120px; height:120px; z-index:5; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; opacity:0.3; filter: alpha(opacity = 30); box-shadow:0 0 5px #000; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); -moz-transform: scale(0.5,0.5); -webkit-transform: scale(0.5,0.5); transition: opacity 1s, transform 1s ease-in-out 0.3s; -moz-transition: opacity 1s, -moz-transform 1s ease-in-out 0.3s; -webkit-transition: opacity 1s, -webkit-transform 1s ease-in-out 0.3s;}.imgholder:hover img{ opacity:1; filter: alpha(opacity = 100); transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1);}.imgholder figcaption{ position:absolute; left:-5px; top:40%; width:130px; color:#004E87; font-weight:bold; text-shadow:-1px -1px 0 #fff; z-index:4; transition: top 0.5s ease-out; -moz-transition: top 0.5s ease-out; -webkit-transition: top 0.5s ease-out;}.imgholder:hover figcaption{ top:120%;}/* decorations style */.imgholder .circle{ position:absolute; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px;}.imgholder .outer1{ top:-8px; left:-8px; width:120px; height:120px; z-index:2; border:8px solid; border-color:#DEEBFC; box-shadow:0 0 3px #AFD3FF; -moz-ox-shadow:0 0 3px #AFD3FF; -webkit-box-shadow:0 0 3px #AFD3FF; background: #ffffff; background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 ); transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transition: transform 1.8s ease-in-out, box-shadow 1s ease-out, border-color 1.5s; -moz-transition: -moz-transform 1.8s ease-in-out, -moz-box-shadow 1s ease-out, border-color 1.5s; -webkit-transition: -webkit-transform 1.8s ease-in-out, -webkit-box-shadow 1s ease-out, border-color 1.5s;}.imgholder:hover .outer1{ border-color:#0088EA #7FC9FF #0088EA #7FC9FF; box-shadow:0 0 10px #0285E2; -moz-box-shadow:0 0 10px #0285E2; -webkit-box-shadow:0 0 10px #0285E2; transform:rotate(-10deg); -ms-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg);}.imgholder .outer2{ top:-18px; left:-18px; width:136px; height:136px; z-index:1; border:10px solid; border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF; box-shadow:0 0 20px #8EB9FF; -moz-box-shadow:0 0 20px #8EB9FF; -webkit-box-shadow:0 0 20px #8EB9FF; opacity:0; filter: alpha(opacity = 0); transform: scale(1.3,1.3) rotate(180deg); -ms-transform: scale(1.3,1.3) rotate(180deg); -moz-transform: scale(1.3,1.3) rotate(180deg); -webkit-transform: scale(1.3,1.3) rotate(180deg); transition: opacity 0.5s, transform 0.7s ease-out; -moz-transition: opacity 0.5s, -moz-transform 0.7s ease-out; -webkit-transition: opacity 0.5s, -webkit-transform 0.7s ease-out;}.imgholder:hover .outer2{ opacity:0.9; filter: alpha(opacity = 90); transform: scale(1,1) rotate(-10deg); -ms-transform: scale(1,1) rotate(-10deg); -moz-transform: scale(1,1) rotate(-10deg); -webkit-transform: scale(1,1) rotate(-10deg);}

Спасибо. Что-то я забыл про нее совсем. А robots.txt и humans.txt еще рулят?

Добрый день! Подскажите как сделать чтобы в поисковиках отображалась не только главная страница но и некоторые другие. Вот например если спросить у гугла 7 zip он выдаст ссылку на главную и под ней сразу еще ссылка на скачивание и ссылка на

Вот я и спрашивал первоначально под какие размеры дисплея нужно писать =) % будут использоваться только для растягивания элементов, а всё остальное будет делаться через @media only screen

при чем здесь px или %?! % используется для создания "резиновости" шаблонов, т.е. даёт шаблону возможность растягиваться под размеры дисплея а адаптивность это когда меняется ПОВЕДЕНИЕ блоков шаблона (сменить расположение, убрать, переместить и т.д.) Резиновость и Адаптивность это РАЗНЫЕ вещи. Допустим есть шаблон в 3 колонки, если размер дисплея не позволяет адекватно показать контент (т.е. чтобы его можно было прочитать без лишних телодвижений), то боковые блоки можно либо убрать, либо расположить под основным, либо изменить так чтобы они не занимали место в ширину, а только в высоту, это и есть АДАПТИВНОСТЬ, а Резиновость это когда тебе пофиг помещается шаблон в экран или нет, ты просто берёшь и сжимаешь его по ширине, например делаешь ширину боковых блоков 10%, при ширине дисплея 480px боковые блоки будут по 48рх, много можно будет прочитать в таком блоке?

Ответ прост - потому-что это Samsung - фирма, которая делает всё от г**донов до самолётов ничего нормального делать не умеет. Проблема скорее всего в размерах дисплея, нужно узнать какие размеры дисплея и какое разрешение. Самсунги как всегда любят отличиться, подозреваю что у них увеличенный размер пикселей, следовательно нужно изменить размеры блоков. В идеале нужно писать адаптивную верстку (не резиновую, а именно адаптивную.) Так что дело не в андройде, гугл молодцы. Виноват самсунг, и кстати есть офигенный плагин для GoogleChrome который может протестировать шаблон на всех возможных размерах дисплеев, в смысле можно увидеть как он будет выглядеть. по-моему viewResizer назывался. Чтобы узнать размер и разрешение дисплея есть много разных сервисов. вот тут есть подсказка