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
-
Тень
Помогите, пожалуйста, разобраться с тенью. Я где-то не верно прописываю очевидно, но у меня никак не получается сделать тень которая нужна... http://clip2net.com/s/3haDhu1 Полуется плохо http://clip2net.com/s/3haCUqC box-shadow:0 1px 1px rgba(194, 194, 194, 0.45), 0 2px 1px rgba(210, 210, 210, 0.45), 0 3px 1px rgba(228, 228, 228, 0.45), 0 4px 1px rgba(241, 241, 241, 0.45);
0 votes3 answers -
как сделать такое меню
Добрый день.Я приактикующий начинающий верстальщик , сейчас для практики делаю такой шаблон http://s017.radikal.ru/i429/1505/e1/04f7b023183b.png Подскажите плиз кто знает , как сделать такое выпадающее меню как в макете , у меня что то оно не скрывается , хотя пробовал ставить visible hidden добавлю код который я уже написал: html <DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="css/bootstrap.css" rel="stylesheet" type="text/css"><link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"><link href="css/custom.css" rel="stylesheet" typ…
0 votes3 answers -
Псевдокласс :checked
Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки). Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута. Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.
0 votes3 answers -
Конфликт скролла до якоря и стики блока
Здравтствуйте. Возникла проблема на странице. Не скролит до якоря и не прилипает блок http://joxi.ru/l2ZVgjNsQ5vw2J страница http://kates.cc.ua/find-employee.html Можете помочь или посоветовать?
0 votes3 answers -
Изменение масштаба макета
Здравствуйте, дорогие друзья! Я начинающий верстальщик. Выполняя макет столкнулась с такой проблемой: при уменьшении масштаба все элементы макета начинают плыть. Помогите пожалуйста решить эту проблему и если можете дайте рекомендацию по улучшению кода. Ссылка на проект: http://rghost.ru/7WnZCZt5Y
0 votes3 answers -
Title изменить в php
Добрый день! Подскажите пожалуйста, есть Landing, у него на главной странице нормальный php шаблон в котором простои понятно меняется title. А есть дополнительные страницы: "пользовательское соглашение", "форма регистрации" и "privatу policy". У этих страниц одинаковый title и выглядят они так: <? include('../includes/sql.class.inc');include('../includes/utilites.inc');include('../cnf.inc');include('../includes/pattern.inc');include('../includes/pages.inc');include('../includes/menu.inc'); $body = show_page('privacy'); $pattern = Array('pattern'=>'../patterns/login.html','menu'=>show_menu(),'title'=> 'Privacy Policy','body'=>$body); echo show_pattern($patt…
0 votes3 answers -
Изменить ширину таблицы из блоков DIV
Не получается вместить всю таблицу в ширину примерно 450-500px http://codepen.io/anon/pen/jPWReM
0 votes3 answers -
Прошу оценить вёрстку макета по заданию работодателя
Макет сайта ссылка http://my-files.ru/k4alck Вёрстка макета ссылка http://my-files.ru/iuzcv6 Пояснение работодателя к макету сайта В приложенном файле вы найдёте макет, который вам необходимо сверстать (валидно, кросбраузерно, оптимизированно (вес, код)), без реализации активных элементов. По нашим оценкам это не должно занять у Вас боле 4-5 часов. Ограничение на верстку к тестовому дизайну: Сверстать кроссбраузерно (IE9+). Для ie8 - graceful degradation. При верстке не использовать таблицы для нетабличных данных и джаваскрипт. Пояснения на верстку к тестовому дизайну: В макете два несв…
0 votes3 answers -
Помогите сверстать адаптивный элемент с iframe и текстом рядом с ним
Люди добрые, беда. Не могу никак сверстать адаптивный элемент из iframe с виде от ютуба внутри и текста рядом с ним. Align, div, float все пробовал. Нужно просто, чтобы текст обтекал айфрейм с отступом и съезжал вниз (если экран маленький). Помогите чем сможете! Заранее огромное спасибо! вот код для начала http://cssdeck.com/labs/v0ykdapb
0 votes3 answers -
Выравнивание элемента по центру
Всем привет! Есть вот такой небольшой лэндинг, поднял на бутстраповском шаблоне отсюда. Не могу никак разобраться с наследованием стилей у блока <div class="clock flip-clock-wrapper" style="margin:5em;>, в котором находится таймер. Конкретно интересует какое свойство и у кого наследует этот блок, из-за которого съезжает выравнивание по центру. Хочу разобраться, но в CSS не очень хорошо разбираюсь, подскажите куда смотреть
0 votes3 answers -
Помогите разобраться с мультиклассовостью
Здравствуйте участники форума помогите с таким вопросом создал небольшой пример, код которого приведу ниже <!DOCTYPE html><html> <head> <meta charset = "utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>sample listing</title> </head><body><div class = "karkas"> <div class = "orange yellow"> </div></div></body></html>* {margin: 0 ;padding: 0 ;}ul{list-style-type: none ; }img {border: none ;}div{margin: 0 auto ;width: 400px ;height: 400px ;}.orange{background: orange ;}.yellow{background: yellow ;}В данном варианте все отрабатывает отлично, как нужно. Но …
0 votes3 answers -
Как сделать главный экран на сайте
Добрый день. Есть макет, в котором предусмотрен главный экран (верхняя часть сайта без основного контента). Нужно, чтобы этот экран занимал весь вьюпорт по высоте и ширине и был адаптивным, то есть на всех экранах (начиная с ширины в 1000px) при открытии сайта все пространство должен занимать этот экран. Также нужно, чтобы картинка на фоне тоже была адаптивной (background-size: cover дал не совсем тот эффект, сама картинка должна центрироваться, а не уменьшаться пропорционально). Как это реализовать? Заранее спасибо. P.S. На картинке тот самый главный экран (шапка, блок с "можем-получаете" и блок "хотите..."). Ниже в макете идет основной контент (простой текст).
0 votes3 answers -
Странная проблема
Всем привет. Делаю первую свою верстку по макету и столкнулся с непонятной для себя проблемой: на картинке домик должен быть слева перед desctops, а остальные элементы соответственно должны следовать за ним, но он становится по середине и при этом все меню выпадает вниз. Что с этим делать и в чем причина такого поведения? Заранее спасибо. <div class="header-middle"> <div class="header-content"> <ul class="menu "> <li> <div class="menu-icon"></div> </li> <li>&…
0 votes3 answers -
Fluid галерея, синхрон высоты картинок.
Возможно такая задача давно решена, прошу подсказать. Картинки одной высоты, разной ширины http://clip2net.com/s/3ia21vB всё это флюид. Не проблема сделать такую галерею. Проблема пропорционального изменения высоты картинки с шириной, что приводит к разной их высоте в итоге. Возможно ли вообще решение, когда высота всех картинок изменяется синхронно?
0 votes3 answers -
Как из разных мест открывать одну и ту же форму
Доброе время суток. На сайте есть 5 одинаковых кнопок .main-btn, по наведению на которые под кнопкой появляется форма .popover-form. <div class="main-btn free-call"> <p><a href="#">Воспользуйтесь бесплатным обратным звонком</a> <br/> <i class="glyphicon glyphicon-chevron-down"></i> <form class="popover-form question-form"> <label for="">Ваше имя</label><input type="text"> <label for="">Ваш E-mail</label><input type="text" value=""> <label for="">Задайте вопрос:</label> <textarea></textarea> <butt…
0 votes3 answers -
Радиальный градиент уходящий в прозрачность
Доброго дня уважаемые коллеги. Столкнулся с одним очень неприятным нюансом, а именно , не могу придумать, как можно сделать радиальный градиент "уходящим в прозрачность". Чтобы не быть голословным вот демонстрация, как хочется сделать: http://savepic.net/6942734m.png А вот, что у меня на данный момент, получилось http://savepic.net/6943758m.png Код простенький: Код CSS 1 background: #0A85CC radial-gradient(51% 255% at 100% 0%, #2f97d4 97%, transparent) no-repeat; Единственный нюанс, это то, что не могу никак сделать его плавно уходящим в прозрачность. Пробовал сделать линейным (там все здорово, но беда в том, что не получа…
0 votes3 answers -
Коварность navbar от bootstrap 3
Здравствуйте. Возникла забавная ситуация с превращением сайта в адаптивный. Чтобы добиться свертывания категорий на узком экране я превратил их в компонент navbar. На узком экране(уже 768 пикс) они прячутся под словом "Категории +" Навбар заработал, но сама ссылка, по которой кликают, чтобы увидеть подкатегории, оказалась некликабельна и стала выполнять роль только кнопки, развертывающей список подкатегорий. Как сделать расскрывающийся список категорий товаров на бутстрапе 3 так, чтобы и категории прятались, и категория их раскрывающая оставалась кликабельна? Вариант показывать все категории и подкатегории сразу раскрытыми не предлагать Наверно надо треугольные стр…
0 votes3 answers -
Тянущиеся блоки
Всем привет. Столкнулся с такой проблемой http://take.ms/7rC84есть конструкция из 3х частей. все три могут динамически менять ширину. изначально должно все выглядеть как на скрине выше, тоесть растягиваться на ширину контента блоков. при изменении контента все должно красиво тянуться, вот так - http://take.ms/MOUFg тут все ясно, куча вариантов реализации... но дальше начинается веселье. важно что здесь текст должен быть только в одну строку. при достижении ширины родительского блока наша конструкция должна перестать увеличиваться в ширине (ну типа max-width:100%) и в центральной колонке текст который не влазит должен обрезаться и ставится в конце троеточие, типа так - …
0 votes3 answers -
Гугл шрифт
Подгрузил шрифт в head прописал - <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300subset=cyrillic,cyrillic-ext,latin,greek,latin-ext,vietnamese' rel='stylesheet' type='text/css'> в css - font-family: 'Open Sans Condensed', sans-serif; В браузерах отображается все хорошо а вот планшет не видет шрифтов ((( В чем может быть проблема ?
0 votes3 answers -
Локальное использование ssi
Добрый день. Возможно ли избегая всякие сборки типа денвера, wingnix или open server, использовать локально ssi ?
0 votes3 answers -
Вставить узор png в DIV
Как вставить png узор над блоком DIV так как на картинке. И чтобы он растягивался при изменении ширины дива? https://yadi.sk/i/3fu3fo0rh6LJc https://yadi.sk/i/XeVu53LFh6LKD
0 votes3 answers -
Самовольное изменение шрифта
Подскажите пожалуйста, почему при проверке на девайсах ниже 500px, шрифт начинает увел, font-size задан фиксированый, сайт есть не адаптированный Используя <meta name="viewport" content="initial-scale=1"> все нормально, кроме background'ов* http://shkafbaroni.ru/dev3/
0 votes3 answers -
Как грамотно выровнять блоки
Думаю как грамотно выровнять эти текстовые блоки. Само по себе это не трудно. Но фишка в том что они разные по величине и их величина (текст) может увеличиваться/ уменьшаться? Как сделать так, чтобы при добавлении/ удалении текста, они всегда оставались вертикально по середине? P.S.: vertical-align пробовал http://codepen.io/anon/pen/BNRZGB
0 votes3 answers -
Про кавычки
Здравствуйте, ответьте на ламерский вопрос: Пишу в head эту строчку и запускаю index.html в хроме у меня кодировка не воспринимает русские символы: <meta http-equiv="Content-type" content="text/html; charset=utf-8"> Добавляю одни кавычки в charset=''utf-8 перед utf-8 и все работает насколько правильно так делать? или это просто глюк?
0 votes3 answers -
Имена файлов CSS
Как нужно понимать? Реальный пример <style media="all" type="text/css" xml:space="preserve"> @import url('_includes/css/emory-html5-fix.css'); @import url('_includes/css/emory-main-base.css'); @import url('_includes/css/emory-main-nav.css'); @import url('_includes/css/emory-main-header-footer.css'); @import url('_includes/css/emory-callouts.css'); @import url('_includes/css/emory-hompage.css');</style>Почему именно _includes а не просто includes? Встречал такое довольно часто. Пишут что запросов нужно делать как можно меньше, а реально почти у всех целый набор. Чем или как это обьясняется? <link type="text/css" re…
0 votes3 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-