HTML Coding

29,542 questions in this forum

1. chrome Chrome: сбрасываются стили при сворачивании видео

   Всем доброго времени суток. В процессе работы над очередным проектом столкнулся с проблемой: есть элемент video, который расположен внутри элемента для которого заданы transform: translateX и transition. Если перейти в полноэкранный режим видео, а потом его свернуть (вернуть в нормальный режим), то родительский контейнер анимируется. Копаясь в консоли разработчика обнаружил, что на время полноэкранного режима для всех родителей тега video сбрасываются некоторые css стили (в т.ч. transform и transition), что похоже и приводит к появлению анимаций после выхода из fullscreen. Применение флага important к моим стилям результата не принесло (кроме того что после этого еще и са…

   Asked by ows.nightwolf, April 18, 2017

   • video
   0 votes
   2 answers
2. Content model:

   Объясните пожалуйста человеческим языком описание контент модели тега <a> 3.2.4.2 Transparent content models Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

   Asked by AlexZaw, November 27, 2017

   0 votes
   2 answers
3. Counter для slick-slider

   Ребят, может кто-то делал, что-нибудь подобное. Нужен счетчик для slick-slider как на фото ниже. Получается например у нас идет 120 слайдов, нужно чтобы он показывал сколько всего слайдов в блоке, и на каком мы сейчас находимся. На фото в нижнем левом углу видно. Буду благодарен за подсказку

   Asked by brezze, January 7, 2018

   0 votes
   3 answers
4. css

   Добрый день, подскажите какой класс править чтоб нормально отобразить кнопки добавить в корзину и подробней сейчас кнопки направлены в разные стороны и бэграунд кривой. Правил такие классы class="product-buttons" class="product-buttons-container clearfix" class="show_details_button" при помощи падингов что -то получается но криво. Мне нужно чтоб обе кнопки были по середине, и имели нормальный бэгрануд. Спасибо.

   Asked by mrfrunze, March 26, 2015

   0 votes
   7 answers
5. CSS 2.1 and CSS 2.2 как их понимать ?

   Правильно ли я понимаю уровни CSS спецификации: CSS 1 - Устаревшая спецификация. CSS 2 - Содержит много ошибок. CSS 2.1 - Та же CSS 2 но исправленными ошибками. CSS 2.2 - Тут что ? Я не понимаю, объясните люди добрые. CSS 3 - Модули CSS, с разными уровнями. Разные модули заменяют разный раздел в CSS 2. CSS 4 - Консорциум говорит что не будет, но посмотрим что на самом деле будет. Для меня не совсем понятно, 2.2 для чего эта спецификация и что она делает ?

   Asked by Димитрий, November 12, 2017

   • css спецификация
   0 votes
   6 answers
6. css ​transform

   Добрый день, дайте направление куда копать. есть ромб делаю с помощью .romb{width:150px;height:150px;transform: rotateX(45deg) rotateZ(-45deg);border: 1px solid black;}.img{background-image: url(img.png);transform: rotateX(0deg) rotateZ(45deg);}<div class="romb"><div class="img"></div></div>т.е. перевернут против часовой стрелки на 45 градусов, картинку обратно перевернул, собственно вопрос как обнулить rotateX(0deg)? это пример по факту нужно сделать 1 большой ромб и в нем 9 маленьких ромбов в которых 9 background-image кликабельным должен быть именно ромб

   Asked by vik1249, August 21, 2015

   0 votes
   14 answers
7. Css проблема при выравнивании box-sizing:border-box

   Добрый день уважаемые форумчане. Никак не могу понять ХссылкаХ , почему у 3его блока смещение. Прошу тех кто знает рассказать от чего такая проблема и как с ней бороться.

   Asked by Igorewa, November 23, 2017

   • выравнивание блоков
   0 votes
   2 answers
8. CSS селектор: все ссылки, кроме тех, которые являются картинками

   Необходимо создать селектор, который бы сделал выборку всех тегов <a></a>, кроме тех, которые содержат в себе тег <img></img> Зачем? Хочу сделать на сайте так, чтобы к текстовым ссылкам на файлы прикреплялась иконка в зависимости от расширения файла, код следующий: a[href$='.jpg'] { background: url(images/jpg.png) no-repeat 100%; padding: 0 20px 0 0;}Проблема: иконка jpg.png прикрепляется не только к текстовым ссылкам, но и к картинкам со ссылкой на увеличенную копию картинки, то есть когда структура имеет такой вид: <a href="http://www.site.com/image.jpg"><img src="http://www.site.com/image.jpg"></img></a> Как избежа…

   Asked by Солнцеворот, December 24, 2015

   • тег a
   • сложный селектор
   0 votes
   3 answers
9. CSS сетки

   В css сетках есть такое понятие как колонки, во фреймворке бутстрап их кол-во равно 12, в стилях им прописывают следующие ширины: Скрытый текст .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-8 { width: 66.66666667%; } .col-7 { width: 58.33333333%; } .col-6 { width: 50%; } .col-5 { width: 41.66666667%; } .col-4 { width: 33.33333333%; } .col-3 { width: 25%; } .col-2 { width: 16.66666667%; } .col-1 { width: 8.33333333%; } Так вот, откуда берутся эти ширины? Если я разделю 100…

   Asked by Hasiev, July 2, 2017

   0 votes
   9 answers
10. CSS_ выравнивание inline-блоков

    Добрый день. Изучаю сейчас тему блочной модели и столкнулся с такой ситуацией при выравнивании инлайн-блоков. Если создать родитель, в него вложить два дочерних блока и им назначить поведение как inline-block, вложить туда просто текст - то они ведут себя чудесно. Стают в строку. Все отлично. Если же создать аналогичный родитель и два блока в нем (как и выше), но в этот раз, в один из блоков вложить не текст, а например заголовок и другой div с текстом. В этом случае, блоки ведут себя как-то странно. Они как будто отталкиваются. Они тоже в строку, но у них появляется какое-то вертикальное выравнивание. Помогите пожалуйста понять почему в втором случае блоки на…

    Asked by AndreyMetallist, June 10, 2018

    0 votes
    2 answers
11. CSS. Выравнивание div элемента с позиционированием fixed, внутри ячейки таблицы

    Здравствуйте! Подскажите пожалуйста какие есть варианты горизонтального выравнивания по центру ячейки таблицы, блока div с позиционированием fixed. <table width="1000" border="1"> <tr> <td width="1000"><div style="position:fixed;top:0px;">Текст блока</div> </td> </tr> <tr></table>

    Asked by AlexD, May 7, 2015

    0 votes
    4 answers
12. display flex - в Firefox как то не так работает.

    Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/ В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!? Что нужно в итоге: 1) левая и правая колонка одинаковой высоты с плавующей шириной 2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.

    Asked by vasa666, September 16, 2015

    • Firefox
    • display
    • flex
    0 votes
    3 answers
13. div with arrow

    Добрый день. Подскажите как создать блок с таким зубцом как показано на рисунке. Спасибо

    Asked by Romario1985, April 21, 2021

    0 votes
    2 answers
14. Div за пределами нижней части экрана

    Здравствуйте! Помогите правильно разместить блоки в обертке. Имеется два основных блока, один из которых будет являться фоном ("landscape"), а другой содержать навигационные элементы ("menu"). Меню должно прокручиваться на фоне статичного фона, а у меня "menu" сваливается ниже обертки (height:100%), за пределы экрана. Кучу вариантов перебрал с позиционированием и размерами, но найти правильное решение никак не могу... CodePen , или: . CSS Скрытый текст * {box-sizing: border-box;} *:before, *:after { content: ''; display: block; position: absolute; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; bac…

    Asked by lnva, November 26, 2016

    0 votes
    4 answers
15. div падает

    В общем, в div container у меня внутри три div-блока. Размером 20%, 55% и 25% соотв. Для расположения их по горизонтали я применил свойство float:left. Проблема: При попытке расширить средний блок (то есть, увеличить содержимое в ширине) (1) 55%, третий блок (2) 25% просто падает под него, не оставаясь на месте. А вставка background-image вообще работает неадекватно. Изображение вставляется только на 10%, словно обрезанное. max-width: 960px; - блока(1) Заранее благодарен за любую помощь. Я пока только учусь вёрстке. Много чего на практике только испытываю.

    Asked by P0jar, November 10, 2015

    0 votes
    6 answers
16. div поверх iframe

    Задача в том что поверх ролика повесить поцентрк рекламу, делаю так,но безрезультатно <html> <style type="text/css"> .block1 { position:absolute; z-index:2 } .block2 { position:relative; z-index:1 } </style> <script type="text/javascript" src="//cdn.o333o.com/embed.js"></script> <body bgcolor=blue> <div class="block1" position: absolute;> <iframe width="510" height="400" src="" frameborder="0" scrolling="no" allowfullscreen></iframe> <div class="block2" position:relative;> <iframe class='na' src='' frameBorder='0' scrolling='no' width='300' height='250'></…

    Asked by Кузьменко андрей, January 22, 2016

    • iframe
    • div
    0 votes
    2 answers
17. div с margin-left вылезает за экран но прокрутка не появляется

    Здравствуйте Подскажите, пожалуйста, как правильно решить Сверстал страницу как на скриншоте, понадобалось добавить небольшой информационный блок слева от основного контента, выделен зелёным. Для левого зелёного блока выставил отрицательный margin-left и float. В итоге при уменьшении размера окна маленький блок скрывается, а прокрутка не появляется. Можно сделать через side-bar. Но во-первых придётся выравнивать скриптом положение блока по вертикали, чтобы он был напротив зелёного соседа, во вторых на других страницах нет сайдбаров, хотелось обойтись без него чтобы ничего не поломать. Это решаемо?

    Asked by zheka2, May 20, 2015

    0 votes
    9 answers
18. div сам растянулся на всю ширину.

    HTML <div class="imgcenter"> <div class="oneimg"> <a href="/course/1"> <img src="http://borsh/img/course/1431865746.jpg"> <h3>Курс 14</h3> </a> </div> <div class="oneimg"> <a href="/course/1"> <img src="http://borsh/img/course/1431865746.jpg"> <h3>Курс 14</h3> </a> </div> <div style="clear:both;" id="del"></div></div>CSS .imgcenter{ max-width:98%; display:inline-block; margin: 0 auto; }.oneimg { text-align: center; width: 133px; float: left; margin: 1%; position: relative;}.oneimg im…

    Asked by xTODx, July 21, 2015

    0 votes
    3 answers
19. Doctype

    Всем известна ситуация когда при не указании кодировки ваш текст превращается в кучу крокозяблов. Я получил текст из .txt документа именно представляющий из себя набор таких крокозяблов. И я захотел попробовать вставить этот набор символов в html doc с кодировкой utf-8, однако, это не дало никаких положительных результатов. Неужели перекодировка информации таким вот обратным путём никак не работает, но зато без указании utf-8 текст без проблем превращается в набор символов?

    Asked by P0jar, January 23, 2016

    0 votes
    3 answers
20. Fancybox убрать стрелочки

    Доброго времени суток всем, такая вот у меня смешная проблема... Не получается убрать стрелки и крестик тоже, а вот попробовал padding изменить все получилось, подскажите пожалуйста в чем причина? $container.find('a').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 200, 'speedOut' : 200, 'overlayOpacity' : 0.6, 'arrows' : false }); если нужно какой либо еще код скажите, я все добавлю, заранее спасибо.

    Asked by KamZed, January 23, 2017

    • css
    • js
    • jquery
    • fancybox
    0 votes
    3 answers
21. figure внутри a

    Доброе время суток. У меня есть блок (картинка+ее описание), необходимо, что это было ссылкой. вопрос такой, как правильней огранизовать это? На ум приходят два варианта: 1) <a href="#"> <figure> <img src="img/img.png" alt="описание"> <figcaption>описание</figcaption> </figure></a>2) <figure> <a href="#"><img src="img/img.png" alt="описание"></a> <a href="#"><figcaption>описание</figcaption></a></figure>Но правильно ли это, и если правильно, то какой вариант ближе к истине. Используя первый вариант я вижу, что у меня не ресайзятся изображения почему то, хотя max-width=100% и …

    Asked by anvyd, August 14, 2015

    • html5
    • tags
    • figure
    • link
    • responsive
    0 votes
    5 answers
22. flexbox и nth-last-child

    Добрый день. Возникла проблема следую щего плана, нужна адаптивная верстка с mobile-first. При этой верстке я сначла сверстал mobile получилась как на pictute1 picture1.psd. Чтобы сделать расстояние между блоками, которые я обвел бордером я задал margi-bottom, а у последнего элемента я его соответственно почистил. Но затем на tablet версииpicture2.psd и desktop picture3.psd у последнего элемента высота стала больше чем у остальных трех. При margin-bottom 0; для последнего элемента ничего не меняется. Что это за лишняя высота у последнего блока, откуда она появилась и как ее убрать?

    Asked by Romario1985, April 13, 2021

    0 votes
    2 answers
23. FlexBox и адаптив

    У меня такой вопрос: Если я сверстал сайт на FlexBox, стоит вообще использовать медиа запросы? Или использования FlexBox достаточно для адаптива?

    Asked by John106, March 24, 2017

    0 votes
    4 answers
24. footer отображаеться не коректно

    Всем доброго времени суток, столкнулся снова с проблемой. на скрине видно, что не так???? подскажите пожалуйста. Вот код моего творения <!DOCTYPE html> <html> <head> <!-- включение тегов HTML5 для IE --> <!--[if lt IE 9]> <script> var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ; for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> <!-- /включение тегов HTML5 для IE/ --> <title>$SITE_NAME$</title> <st…

    Asked by green-vik, September 16, 2016

    0 votes
    11 answers
25. Google PageSpeed Insights Оптимизируйте код CSS

    Добрый день. Помогите привести информацию в голове в порядок. Гугл пишет что нужно делать так <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <link rel="stylesheet" href="small.css"> При этом в htmlbook указано следующее :

    Asked by clgs, May 18, 2016

    0 votes
    8 answers