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
29542 questions in this forum
-
Создание продвинутой формы данных
Кто нибудь реализовывал данную форму, буду благодарен за пример кода. Конкретно интересует поле "изменить" как его сверстать ?
0 votes1 answer -
Вопрос по шрифтам
Всем доброго времени суток! Я решил подключить собственный шрифт в шаблон, но задался вопросом имея 5 расширений для шрифта (ttf-woff-eot-svg-otf) и подключая их скачиваться будут все или только необходимые? тоесть если нужен ttf то он и скачается, а остальные проигнорируются? и как быть если браузер поддерживает скажем и ttf и woff и eot он все три скачает или только один?
0 votes7 answers -
Странное поведение центрированием элемента
Есть элемент 1170px в контейнере 1349px, чтобы получить элемент резиновым я 1170 делю на 1349 получаю 86.73%. Странность в том что когда я этот элемент центрирую через margin:auto то элемент становится на 1 пиксел меньше, а когда центрирую с добавлением левым поля на 90px то он снова становится в нормальном размере. Из-за чего токое поведение? ведь в обоих случаях элемент в центре. <div class="contentWrapper"> </div> * { box-sizing: border-box; margin:0; padding:0; } body{ width:1349px; } .contentWrapper { width: 86.73%; margin:auto; border:1px black solid; height:500px; }
0 votes1 answer -
Как в данном случае работает наследование?
Здравствуйте! Есть такой код css html, body {width:100%; padding:0; margin:0;} body {font: 14px/25px Arial, Helvetica, sans-serif;font-family: 'Open Sans', sans-serif;background:#F6F8F7;padding:0 40px ;} body .wrap-body{} И собственно HTML (весь не пишу только часть) <body> <div class="wrap-body"> <div class="header"> <div id='cssmenu' class="align-right"> <ul> <li class="active"><a href='index.html'><span>zSawyer</span></a></li> <li class=' has-sub'><a href='archive.html'><span>Blog</span></a> <ul> <li class='has-sub'><a …
0 votes3 answers -
При нажатии на изображение открывается галерея
Добрый день! Подобрал для портфолио отличный шаблон (Massive - Responsive Multi-Purpose HTML5 Template). Тут и огромное количество вариантов страниц, и бутстрап, и адаптивность и все-все-все. Итак, в нем, помимо прочего, есть отличный вариант вывода Портфолио (3 и 7 изображение): http://massive.markup.themebucket.net/portfolio-4-fullwidth.html Нажимаешь на изображение, открывается Lightbox галерея. Вот только мне категорически не нравится, что там присутствует какой-то слайдер, который перелистывает превьюшки... Подскажите, пожалуйста, как убрать это перелистывание, чтобы осталось только изображение, а при клике во всплывающем окне открывалась галерея. Зар…
0 votes5 answers -
Вырезать определенную часть картинки
Сидя на просторах интернета в поисках интересного макета попрактиковаться наткнулся на один, но столкнулся с проблемой. Каким образом можно установить эту картинку поверх блока с фоном? Имею в виду картинку справа, отделенной как бы кривой линиией? Имею в виду не просто вырезать её из псдшника в формате .png, а оформить какими-нибудь CSS свойствами
0 votes5 answers -
Как стилизовать тег input:invalid?
Всем доброго времени суток! Буду благодарен за помощь в одном вопросе! Есть форма с <input required>. В CSS я прописал стили для тех input которые не заполнил пользователь (использовал input:invalid). Но проблема в том, что при загрузке получается то, что вы можете видеть в jsfiddle: все input с required подсвечиваются. И это понятно ведь они не заполнены. Но как сделать так как на фото? Чтобы подсвечивался незаполненный input только после нажатия на кнопку, а не при загрузке формы? Понимаю, что это можно сделать на JS. Но как я не знаю. Может что-то подскажете? https://jsfiddle.net/Lavrentyev/1nLnjrb4/2/#&togetherjs=LSIgkgrqlh
0 votes2 answers -
Выталкивание элемента
Есть контейнер с шириной 1366px, в нём блок с шириной 1170px. Чтобы сделать этот блок резиновым я делю 1170 на 1366 и получаю 86.65%. Но когда ставлю эту 86.65% ширину блоку, элементы в нём не помещаются... почему ведь ширина осталась той же самой? *{ margin:0; padding:0; box-sizing:border-box; } body{ width:1366px; } .q1{ width:370px; height:400px; background:black; float:left; margin-right:30px; } .q2{ background:red; width:85.65%; overflow:hidden; } .q1:last-of-type{ margin-right:0; } <body> <div class="q2"> <div class="q1"></div><div class="q1"></div><div class="q1"></div> </div> </body>…
0 votes2 answers -
адаптация шаблона
Всем доброго времени суток. В настоящий момент пишу шаблон, и задумался вот над чем, скажем так мы имеем двухколоночный условно-резиновый макет (почему условно-резиновый? во-первых сайдбар левый фиксированый (250 рх) во-вторых установлены ограничения width (max 1300 и min 960) ). В итоге при разрешении экрана свыше 1300 рх скажем наш контентный блок имеет с учетом всех отступов и т.д. 1000 рх (назову ее рабочей шириной) так вот в эту рабочую ширину я помещаю 5 блоков с width равным 200 рх и выставляю их в ряд при помощи float:left . но при изменении размера экрана скажем до 1024 рх блоки которые не влазиют в ширину начнут падать в низ (конечно можно сделать их резино…
0 votes0 answers -
Короткая запись свойства font
Добрый день Уважаемый саппорт. Моя проблема заключается в следующем: когда я пишу свойство font короткой записью, и в ней указываю значение свойства line-height: множитель указываю, в пикселях или в др. величинах, браузер все правила сбрасывает в ноль, т.е как будто я не прописывал никаких css-свойств. Но когда расписываешь полностью все свойства текста, без короткой записи - line-height срабатывает. Если одновременно, между { } скобками прописываешь отдельно line-height: со значением и следующей строкой пишешь короткую запись font, не указывая при этом значения этого свойства, т.к это свойство было указано выше, то браузер применяет все правила указанные в короткой запис…
0 votes4 answers -
Не работает адаптация на мобильном
подскажите в чем ошибка, медиа запросы на экране браузера работают, а на самом мобильном устройстве нет. Весь сайт поломан. Вот так выглядит head <!DOCTYPE HTML> <html> <head> <meta http-equiv="Выберите расширение для паковки" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content=" бизнес в интернете, онлайн бизнес, запуск бизнеса в интернете, онлайн предприниматель, пошаговая система, МЛМ в интернете"> <meta name="description" content="Бесплатный ПДФ пошаговая инструкция запуска бизнеса в интернете"> <link href="style.css" type="text/cs…
0 votes3 answers -
Прилегание текста под картинкой.
Доброго времени суток, сразу перейду к делу. Хотелось бы сделать так, чтобы текст лежал под картинкой, желательно по середине. Пользовался algin=bottom, float = bottom. Текст все равно слева. HTML: <div class="point-one"> <img src="../main.img/one.png" class="one" align="bottom"> <span class="origanal" id="prem1"><a href="#" id="show_popup">IRON</a></span> </div> CSS: .one { max-width: 100%; height:auto; } prem1 { float: bottom; } Скриншот, как это дело все смотрится:
0 votes5 answers -
Случаи использования http(s)://
Доброго дня! Для того, чтобы описать регулярное выражение мне необходимо учесть все случаи, когда используются символы http(s):// Итак. В редакторе составляется е-майл письмо. Оно может содержать html теги, таблицы, картинки, стили css. Задача - в момент сохранения изменить все ссылки (содержащие http(s)://). Для чего изменить - это другой вопрос и к этой теме не относится. Я условно подразделил все ссылки на два типа: Содержащие <a href="http://...... то есть текстовые ссылки (они нам не интересны) Все остальные ссылки на картинки, на фоновые картинки и т.д. содержащие: <table background="http:// <img alt="" src="http:// …
0 votes3 answers -
Проблема с собственным шрифтом
Дорогие друзья уже долго не могу наладить работу собственного шрифта. http://rmsgames.ru/6px2bus.ttf это путь к шрифту. Кодировка utf-8. Все делал по уроку с этого сайта. Вот кусок кода который у меня не работает. #test1 { @font-face font-family: bus; src: url(www.rmsgames.ru/6px2bus.ttf); font-size: 170%; font-family: 'Press Start 2P'; background: black; color: #bed143; text-decoration: green; /* Убираем подчеркивание */ border: none; outline: none; }
0 votes7 answers -
photoshop, работа с psd - макетом, нужен учебник
Сабж На русском
0 votes5 answers -
Подсветка менюшки/ссылки нестандартной фигурой на фоне
Сабж. Как так сделать? (во вложении изображение - пример) Первое, что приходит на ум, нарисовать картинку - фон и на ней размещать ссылку - менюшку. А может можно div трансфорнуть (css trnsform)? Или есть другие варианты? Подскажите, как?
0 votes6 answers -
Цвет элемента option selected
Добрый день. Как задать красный цвет у слова "выбор" при закрытом списке? <select> <option disabled selected>выбор</option> <option>1</option> <option>2</option> </select>
0 votes4 answers -
Базовая линия у inline-block
<div><p>123</p></div> *{ margin:0; padding:0; } p{ display:inline-block; background:red; overflow:hidden; vertical-align:top; } div{ border:1px black solid; } У inline-block базовая линия проходит через последнюю строку внутри него, после задания инлайн-блоку overflow:hidden; базовая линия стала отсчитываться от нижней границы самого блока из-за этого высота строки контейнера увеличилась. Теперь не могу понять когда при задании инлайн-блоку vertical-align:top; базовая линия начинает проходить снова через последнюю строку внутри него?
0 votes1 answer -
Не работает модальное окно!!! НЕ ПОЙМУ!!!
Доброго времени суток! Проблема: не работает модальное окно. Т.е при нажатии на ссылку ничего не происходит. Кнопка есть, подключенный файл со скриптом есть. Jquery подключен. Ссылка связана с блоком, который должен всплывать. сделал все по инструкции. Я не профи но вроде немного разбираюсь. Я уже все глаза высмотрел!!! В чем дело не пойму. Делал по этой инструкции: http://dbmast.ru/modalnoe-okno-s-pomoshhyu-css-i-jquery Выложил код в Jsfiddle. Прошу подскажите в чем может дело! https://jsfiddle.net/#&togetherjs=sVlwnJV0mM
0 votes5 answers -
float, clear, overflov
Сабж. Не только подробное описание, но и различные трюки. Где почитать очень, ну очень подробно :). Статья, набор статей или раздел книги (название, аффтар, и желательно раздел или страница ). С примерами. На русском.
0 votes4 answers -
Почему элемент не центрируется по вертикали?
https://jsfiddle.net/86frqge7/ Почему элемент <b>hi</b> не центрируется по вертикали?
0 votes3 answers -
Не индексируемый текст
Здравствуйте. Появилась необходимость сделать текст в шапке не индексируемым. Проблема в том, что он должен индексироваться на главной странице и не должен на остальных. Как этого добиться?
0 votes0 answers -
Непонятное поле
Откуда возникает нижний отступ в элементе ul? Я выделил его границей чтобы было понятно. Появляется именно после добавления свойства overflow:hidden; <ul> <li><a href="#">123<div class="qc"></div></a></li> </ul> ul{ border:1px black solid; } ul li{ display:inline; } ul a{ display:inline-block; width:100px; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; }
0 votes15 answers -
Непонятное поле
<ul> <li><a href="#">123<div class="qc"></div></a></li> </ul> ul{ border:1px black solid; } ul li{ display:inline; } ul a{ display:inline-block; width:100px; position:relative; overflow:hidden; } .qc{ position:absolute; top:0; left:0; width:300px; height:100%; background:red; } Откуда возникает нижний отступ в элементе ul? Я выделил его границей чтобы было понятно. Появляется именно после добавления свойства overflow:hidden;
0 votes0 answers -
проблема с тенью
всем доброго времени суток помогите кто может, суть вот в чем: http://htmlbook.ru/css3-na-primerakh/teni в примере два показано как убрать тень с определенного участка, но это делается путем наложения пвсевдоэлемента ::after, и элементов с фоном. тоесть тень не видно изза фона, а как быть если фон почти прозрачный??? например в RGBA 0,5 ??? пример моего творения тут https://jsfiddle.net/4546hfwx/ ссылку на сайт дать не могу, на ДЕНВЕРЕ делаю подскажите как быть, а то картинками делать не хочется, заранее спасибо
0 votes2 answers
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-