HTML Coding
Subforums
-
- 30.1k
- posts
-
- 1k
- posts
- Про макеты
- By klierik,
Explore Questions
There are no popular questions to show right now
-
0 votes0 answers
-
0 votes0 answers
-
0 votes0 answers
-
0 votes1 answer
-
0 votes3 answers
29,542 questions in this forum
-
header только на html и css
Как правильно сделать оформить header используя только html и css чтобы получилась как на этом макете Почему у меня правое меню постоянно плавает и как кнопку поиска правильно спозиционирорвать в самой форме чтобы она никуда не уезжала? Что не так в моем коде? https://jsfiddle.net/kjgydnfs/27/
0 votes1 answer -
div with arrow
Добрый день. Подскажите как создать блок с таким зубцом как показано на рисунке. Спасибо
0 votes2 answers -
Линия через три блока
Добрый день, подскажите как реализовать такую линию, как показано на рисунке? Линия пересекает три блока, один из которых находится над ней?
0 votes2 answers -
Проблема с меню
КАК сделать так чтобы меню было для всех страниц одно скажите пожалуйста
0 votes2 answers -
Помогите разобраться с заданием с чекбокс и выполнить его
На собеседовании дали задание, но я его не понял, можете, ПОЖАЛУЙСТА, объяснить что имеется в виду и как его выполнить. Вот задание: Используя только html и css отобразите кастомный чекбокс таким образом, чтобы: Оригинальное изображение чекбокса было скрыто. Весь функционал чекбокса был сохранен (checked – unchecked). Вместо чекбокса отображался текст, по клику на который - менялось бы состояние чекбокса на противоположное - менялся бы цвет текста.
0 votes1 answer -
Картинка превью в мессенджерах
Добрый день! Есть такая страница http://tehne.com/grant/right-bank-of-kazanka-river-competition-2021-ru Хочу сделать чтобы в мессенджерах когда отправляют ссылку вместе с заголовком показывалась определенная картинка. Я добавил эту картинку в мета тэги og и link rel="image_src" и она все равно не появляется когда делюсь в мессенджерах Почему так?
0 votes1 answer -
Проблема с псевдокласами
Добрый день. Возникла проблема следующего рода. При верстке все псевдоклассы работают не корректно. Например задаю всем элементам margin-bottom:30px, соответственно у последнего я его пытаюсь почистить ипользуя last-child и задавая margin-bottom: 0. Но проблема в том что после этого все остальные элементы которым обьявил нижний отступ тоже обнуляются. С first-child та же самая проблема. В чем может быть проблема? Первый раз работаю с bootstrap может ли он повлиять на работу псевдоклассов?
0 votes4 answers -
flexbox и nth-last-child
Добрый день. Возникла проблема следую щего плана, нужна адаптивная верстка с mobile-first. При этой верстке я сначла сверстал mobile получилась как на pictute1 picture1.psd. Чтобы сделать расстояние между блоками, которые я обвел бордером я задал margi-bottom, а у последнего элемента я его соответственно почистил. Но затем на tablet версииpicture2.psd и desktop picture3.psd у последнего элемента высота стала больше чем у остальных трех. При margin-bottom 0; для последнего элемента ничего не меняется. Что это за лишняя высота у последнего блока, откуда она появилась и как ее убрать?
0 votes2 answers -
Пикселизация текста
Здравствуйте! подскажите и-за чего это может быть? -webkit-text-size-adjust: 100%; --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; -…
0 votes0 answers -
Background параметры
Добрый день. Подскажите пожалуйста какие параметры background задать в разделе Contact US, чтобы континенты отображались как в приложенном макете, но при этом не задавать в пикселях высоту всему этому блоку work-07.psd . И как вообще реализовать такой переход background ?
0 votes1 answer -
hover с помощью transition
Возникла проблема следующего плана. Я сверстал свой основной блок, под ним сверстал свой hover и расположил над основным блоком, но дал блоку hover изначально значение display:none. При наведении соответственно на нужный блок мой hover принимает значение display:flex и все хорошо отображается, но проблема в том что css-переходы(transition) при этом никак не работают. Нету ни задержки, ни плавного перехода, а просто hover поверх блока и все. Подскажите почему не работают transition?
0 votes2 answers -
Сколько времени займет верстка данного макета
Дали тестовое - сверстать. Сказали займет 4 часа. Но я в этом сомневаюсь. сам макет. https://drive.google.com/drive/folders/1uu2IbqtlJYSpirSyCUbE6tDsDZmfkpgY
0 votes2 answers -
Как присоединить m3u8 к тегу video из HTML5 ?
Есть источник : http://cdnmg.secure.live.rtr-vesti.ru/hls/russia_24/playlist_3.m3u8 Этот URL нужно записать в файл 1.m3u и запустить этот файл с помощью VLC-плеер, для тестирования этого URL. Скажите пожалуйста, как источник m3u8 присоединить к тегу video из HTML5 ? Пожалуйста, покажите работающий пример с этим источником. Спасибо.
0 votes1 answer -
Как вставить 3D-тур на сайт?
Всем доброго времени суток. Имеется 3D-тур для заведения предоставленный по ссылке - http://fotospy.ru/3d/demo/grill-grad/domiki/tour.html. Каким образом мне вставить его на мой сайт так чтобы могли просматривать этот тур на нем? Буду благодарен за помощь.
0 votes1 answer -
Перечеркнуть изображение крест-накрест
Есть div с картинкой и текстом. Его нужно перечеркнуть крест-накрест. Вот никак не соображу как это сделать ловчее и техничней, чтобы адаптивность сохранилась. Кто-нибудь может подсказать решение ?
0 votes1 answer -
font-family в Chrome для конкретного шрифта не работает
Памагити. Не пойму, почему в Chrome и в FF не работает элементарная конструкция, а в IE она же работает. <p style="font-family: HVD Peace, sans-serif; font-size: 40pt; ">Test of font family</p> <p style="font-family: HVD Peace, serif; font-size: 20pt; ">Test of font family</p> (шрифт при этом у меня локально установлен, с url я пока не пробовал) Получаем при этом: - это предпросмотр в IE, а во всех остальных браузерах (Chrome, FF, Opera) выглядит вот так: То есть общее описание (serif или sans-serif) подхватывается, а конкретный шрифт - нет. Пробовал с разными шрифтами. Это у меня какая-то локальная проблема с …
0 votes2 answers -
Помогите с кодом
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> Fucking slavse</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet"> </head> <body> <header id="header" class="header"> <div class="container"> <div class="nav"> <img src="img/logo.svg" alt="OJJO"> </div> </div> </header> <section id="section" class="section"> <…
0 votes4 answers -
Открыть ссылку в новом окне!
{** block-description:text_links **} {if $block.properties.show_items_in_line == 'Y'} {assign var="inline" value=true} {/if} {assign var="text_links_id" value=$block.snapping_id} {if $items} {if $inline && !$submenu} <div class="ty-text-links-wrapper"> <span id="sw_text_links_{$text_links_id}" class="ty-text-links-btn cm-combination visible-phone"> <i class="ty-icon-short-list"></i> <i class="ty-icon-down-micro ty-text-links-btn__arrow"></i> </span> {/if} <ul {if !$submenu}id="text_links_{$text_links_id}"{/if} class="ty…
0 votes2 answers -
Как бы вы сверстали такую страничку?
Здравствуйте, друзья. Помогите пожалуйста разобраться, в общих чертах, как верстаются подобные страницы. Нужно понять какие пожелания по верстке выдвигать при заказе. Имел плохой опыт с исполнителем который верстал таблицей в таблице! Сайт и адаптивный и резиновый. Количество столбцов меняется в зависимости от ширины экрана: 0-580: 1 столбец, 581-870: 2 столбца, 871-1160: 3 столбца, 1161-1450: 4 столбца, 1451+∞: 5 столбцов. Конкретно этот макет выполнен для разрешения 1920, поэтому пять столбцов. 1 Что выбрать для верстки подобных страниц: гриды, флексбоксы, дивы или что-то другое? 2 Тут надо использовать БЭМ, Bootstrap или что-то другое? …
0 votes4 answers -
Не работает Transition
Не работает плавный переход, в чем проблема? .works { display: flex; flex-wrap: wrap; } .works__item { width: 25%; height: 350px; position: relative; overflow: hidden; } .works__item:hover .works__content { opacity: 1; } .works__photo { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate3d(-50%, -50%, 0); } .works__content { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background-color: rgba(232, 69, 69, .9); opacity: 0; text-align: center; po…
0 votes1 answer -
Прелоадер не закрывается.
При верстке сайта на Bootstrap 4.3.1 хотел сделать прелоадер на основе стандартного элемента Bootstrap - спиннера, который бы закрывался после загрузки страницы. Проблема в том, что спиннер не закрывается после загрузки страницы, очевидно заданные в скрипте стили к нему не применяются. Подскажите, пожалуйста, в каком месте я ошибся? Ссылка на ошибку (Гитхаб)
0 votes4 answers -
Вложенные таблицы. Проблема с отображением рамок вложенных таблиц
Здравствуйте! Прошу помочь мне советом по оформлению вложенных таблиц. Пример по ссылке: https://jsfiddle.net/formikulo/895fnhzc/1/ Проблема заключается в том, что рамки между вложенными таблицами в Таблице 2 выглядят жирнее, чем остальные. Хотя для всех линий задана одна толщина 1px. Как сделать так, чтобы все рамки были одинаковой толщины?
0 votes15 answers -
Не заменяется картинка
Ребята, добрый день! Столкнулся с такой проблемой, решили заменить картинку на главной странице компании. Работаем мы через Joomla. Я решил схитрить, чтобы не указывать пути и т.д., так как просто не знаю как это делается, переименовал новую картинку в название старой. Старую я удаляю, загружаю новую с таким же названием. Обновляю сайт, картинка не меняется оставаясь старой, обновляю жумлу, а там вместо новой картинки, уже старая, как это работает, лол? Но стоит мне новую картинку переименовать, так она сразу становится собой, а не старой. И самое интересное, я около недели назад так же делал, и у меня получилось установить новую картинку, тестовую так ска…
0 votes1 answer -
Автоматическое масштабирование сайта на мобильных устройсвах
Привет, ребят. В общем, есть один сайт и он не такой как все, а именно, все другие сайты при загрузке на телефоне автоматически уменьшаются под размер экрана, а этот наоборот, загружается сразу как будто уже приблизили, надо сделать так, чтобы он загружался уменьшенным как все сайты. Как это сделать?
0 votes16 answers -
Как подключить slick-carousel в gulp
Добрый день. Не могу подключить слик слайдер в галп. Я их установил через npm и jquery. Но не получаеться ничего
0 votes1 answer