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
-
Конфликтуют стили max-width и float?
Добрый вечер, для начала краткий экскурс. Делаю сайты много лет, в основном работал с WYSIWYG софтом и готовыми шаблонами для разных CMS`ов и в верстку никогда особо не лез, работаю уже больше 10 лет и всегда справлялся с любыми задачами, однако время идёт и что бы не деградировать нужно наоборот, развиватся=))) на смену WYSIWYG пришел http://scratchpad.io/на котором я принялся практиковатся в выполнении необходимых мне задач. Короче задача следущая, картиночка с max-width 100% справа от которой располагался бы текст тоже с max-width 100%, с условием, что в случае если экранчик маханький при маханький как на мобильном - текст перепрыгивает и размещается под картиночкой,…
0 votes7 answers -
Увеличение картинки в многоугольнике
Здравствуйте. Не могу решить задачу. Есть картинка в многоугольнике, по наведению она должна увеличиваться. У меня сейчас получается только эффект "гармошки": http://codepen.io/anon/pen/wGaoqY. Знаю откуда ноги растут - картинке задана высота 100%, но если установить auto, то тогда на hover искажается многоугольник. Подскажите, пожалуйста, как это исправить.
0 votes17 answers -
Проблемы с микроразметкой
Здравствуйте. На сайте внедрена микроразметка schema.org. Проблема в следующем: при поиске в гугле запроса с указанием сайта, например, "Мой товар site:my-site.ru" все отлично работает, выводится рейтинг товара в виде звездочек, цена, наличие и т.д. Но при поиске "Мой товар" кроме ссылки и описания страницы больше ничего не выводится. С чем это может быть связано?
0 votes0 answers -
Как растянуть div
Как в этом случае сделать резиновым по высоте тэг div.a2? код
0 votes3 answers -
Как так сверстать
Добрый день Люди. Я в верстке не сильно силен, но вот перед мной встала задача, надо сделать что то похожее, и желательно на уровне CSS. Все блоки имеют одну ширину. Пробовал через inline-block, но второй уровень сразу съезжает. Да можно заморочиться и на уровне PHP или JS высчитать все, и задать положение блока более жестко, но хотелось бы более правильного решения. Или в какую сторону копать?
0 votes10 answers -
SVG
Решил использовать графику svg и все хорошо работает. Но вот ситуация если браузер свернуть в окно (то есть сделать размер меньше) svg естественно примет нужный размер, но если потом развернуть браузер svg останется с последним размером и это выглядеть ужасно. Может при экспорте в svg есть какие то настройки нужно проставлять. Или как то вставлять по особому.
0 votes4 answers -
Резиновая верстка работает, но почему?
Друзья, всем добрый день! Я полный новичок. Взял первый для себя макет и решил реализовать резиновую верстку. 3 колонки: левая фиксированная (width: 300px), центральная и правая резиновая. При этом центральная и правая делит пространство оставшееся от левой колонки между собой в отношении 70% (центр) на 30% (правый). Вчера бился полдня, облазил весь гугл, нашел несколько решений, но они у меня почему-то не работали. Сегодня с утра потыкал самостоятельно и получилось реализовать. Вот код html: <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="left-sidebar"&g…
0 votes4 answers -
Стилизованная кнопка распадается на части
Здравствуйте. Имеется стилизованная под кнопку ссылка: http://codepen.io/Kristinita/pen/EKxZQO . На экранах мобильных устройств она выглядит вот так неприглядно. Когда кнопок много, получается совсем каша. Что нужно сделать, чтобы стилизованная кнопка размещалась на строке в полном размере без нарезок? Спасибо.
0 votes3 answers -
Всплывающая подсказка выходит за пределы экрана
Имеется стилизованная кнопка со встроенной в неё всплывающей подсказкой : http://codepen.io/Kristinita/pen/EKxZQO . Как видно, всплывающая подсказка выходит за верхнюю границу экрана, а на экранах c другим разрешением ещё и за правую. Что нужно сделать, чтобы она оставалась в рамках экрана, желательно без полос прокрутки? Спасибо.
0 votes2 answers -
Как сделать, чтобы изображения слайдшоу показывались полнстью вне зависимости от экрана?
Здравствуйте. Упрощённый вариант слайд-шоу: http://codepen.io/Kristinita/pen/dMygQj . Хочу сделать так, чтобы изображения показывались на различных экранах только полностью, а не обрезками, как на скрине ниже . Т. е. если картинка не достигнет на экране определённой высоты, то пусть отображается только при вертикальном скроллинге. Эксперименты с min-height ни к чему не привели. Не могли бы подсказать, что не так? Спасибо.
0 votes0 answers -
Ширина макета
Здравствуйте, немного запутался вот в таком вопросе. Есть макет и его ширина 1200px. Например, header and footer растягиваются на все 1200, а остальные центрируются. И вот в чём собственно вопрос. Эти 1200 так и оставлять или же задавать ширину 100%? И если оставлять 1200, то что делать с оставшимся пространством по бокам?
0 votes1 answer -
Вывод div с другой страницы
Здравствуйте! Помогите пожалуйста разобраться. Необходимо чтобы при наведении курсора на ссылку появлялся DIV находящийся на другой странице, что я попытался сделать при помощи следующего скрипта: onmouseover="document.getElementById('opis').style.display='block'" onmouseout="document.getElementById('opis').style.display='none'"При помещении кода на одну страницу всё работает. http://codepen.io/anon/pen/reNZMb Но при размещении div на другой странице он не выводится. index.html: <!DOCTYPE html><body><object data="link0.svg" type="image/svg+xml" width="190" height="190" style="position: absolute; opacity: 1; z-index: 110!important; ; top: 355px; left: 518…
0 votes0 answers -
Gzip и cache на сайте
Здравствуйте. Кто что подскажет по gzip и кешированию? Пишу в .htaccess, мол, сожми текст и закешируй всё что можно. Оно всё работает, особенно gzip на 80% ужимает. Но Google Speed Test пишет, что никакого gzip и кеширования нет. У хостинга gzip автоматом не включен, то есть дублирования нет. Может, я где-то не права?
0 votes3 answers -
"background-size cover" для блока
Добрый день! Подскажите, как реализовать следующую задачу: Необходимо, что бы в блоке .content было фиксированное фоновое изображение (картинка) с максимальным заполнением, прижатая к правому краю .content <div class="container-fluid"> <div class="col-xs-7 content"> контент </div> <div class="col-xs-5"> навигация </div></div>.content { background: url("background.jpg") no-repeat right top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} Если делаю, как приведено в коде, картинка растягивается по ширине body. Существует л…
0 votes10 answers -
Выравнивание блоков по горизонтали без указания высоты/
Здравствуйте! Подскажите, как выровнять блоки по горизонтали без указания высоты? Блоки идут друг за другом с помощью float:left (изменить не могу (например, на display:inline-block), так как выводится с помощью скрипта) Без указания высоты - потому что один блок может иметь бОльшую высоту, а другой - меньшую. Для понимания проблемы - набросала схему: http://savepic.ru/8815808.jpg
0 votes6 answers -
Синхронизация вкладок
Доброго времени суток, всем! Есть проблема синхронизации вкладок (табов) на сайте. Без примера, не объяснить, вот сайт: http://meatup.ru 1. Сайт в одну страницу и менюхи, которые Вы наблюдаете, вверху и внизу экрана и есть вкладки; 2. Кликая по ним, мы открываем соответствующую вкладе область в левой половине сайта; Косяк в следующем: 3. Жмите на вкладку из верхней менюхи, например, "О Нас" - открылась соответствующая область; 4. Теперь на любую вкладку из нижнего меню, например, "Термообработка" - и тоже, область открывается; 5. А вот, если мы опять нажмем на "О Нас" - то ничего не произойдет, т.к. вкладка осталась активной с прошлого раза. По отдельнос…
0 votes1 answer -
Помощь по мере обучения в вёрстке сайта
Всем привет. Я ещё зелёный в Web-разработке и с целью получения опыта я решил сделать сайт с концепцией направленной на реклакс пользователя(возможно вы встречали подобные, если же нет то вот пример). Так вот я очень прошу читающих это заглядывать в эту тему и в случи возникших вопросов помочь мне. Я буду очень благодарен. Ну а пока у меня есть вопрос: Допустим у меня есть два блока которые лежат друг на друге и один из них всегда не активен, так же есть две кнопки которые также лежат друг на друге(дадим условные имена объектам блок1, блок2, кнопка1, кнопка2,). Эти две кнопки абсолютно идентичны кроме содержащего текста и их функции. При чём эти кнопки лежат с остальн…
0 votes3 answers -
Горизонтальное выпадающее меню
Доброго времени суток! Подскажите пожалуйста, как выровнять выпадающее меню по горизонтали? http://codepen.io/anon/pen/wGvBNQ
0 votes12 answers -
Как сделать анимацию цикличной?
Как сделать анимацию цикличной? Есть блок, который маячит, привлекает, но делает он это всего 1 раз. Как и можно ли с помощью всего лишь css придать ему цикличность с заданными пробелами (остановками). Пример: .info-box {background : #c2ddf9;border : #CD0000 solid 1px;color : #CD0000; font-weight : 700; animation: spin 0.050s linear 3s alternate;animation-iteration-count: 10;}@keyframes spin { 0% {transform: scale(1.05, 1.05);}100% {transform: scale(0.9, 0.9);}} Спасибо!
0 votes2 answers -
Запрет наследственности в CSS применимо к фильтрам.
Есть желание на сайте использовать такой эффект - когда пользователь открывает меню сайта - хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню. Cначала я отслежива событие возникновения меню и через jQuery присваиваю тегу body стиль blur: jQuery('body').addClass('blur');когда меню исчезает - я и класс удаляю: jQuery('body').removeClass('blur');а вот сам класс: body.blur { -webkit-filter: blur(1px); -moz-filter: blur(1px); filter: blur(1px);}Тут всё прекрасно, всё работает, но есть одно но. Так как менюха является дочерним элементом для body - то и меню, собственно, тоже размывается. Я даже довесил событие возникнове…
0 votes2 answers -
Сдвиг блоков в бутстрап
Суть проблемы: "У меня есть 2 типа пользователей, администратор и пользователь", у них есть набор кнопок управления, которые находятся в одной линии: <div class="col-md-12"> <div class="col-md-6 text-left">кнопки админа </div> <div class="col-md-6 text-right">кнопки пользователя </div> </div> Когда я для пользователя скрываю кнопки администратора то див, "col-md-6" переходит на начало, а кнопки становятся по правой стороне. Можно ли средствами бутстрапа сделать так, что если блока первого нет, второй становиться "col-md-12"? Я проблему решил через пхп, но интересно именно стилями Общий вид принскрина прилагаю: http://prntsc…
0 votes3 answers -
Блоки с товарами одинаковой высоты
Здравствуйте! Имеется перечень товаров. В каждом блоке 3 составляющих. Картинка, название и свойство. Картинка имеет фиксированную высоту. А вот название и свойства, конечно же, могут состоять из разного количества строк. Так как каждый блок имеет бордер, в результате получаются все блоки разной высоты. Подскажите, пожалуйста, правильный подход к решению данного вопроса. вот пример - https://jsfiddle.net/wdb2e0hy/ Заранее благодарю за помощь.
0 votes3 answers -
Использование Column
Есть меню с перечислением общеклиническими направлениями, для разбития на столбцы подпунктов использовала column Проблема в том, что он делает разбитие li слева направо, а мне надо сверху вниз. Когда рассматривала примеры работы с column везде текст идет сверху вниз (( http://test3.aveas.ru/napravleniya/obshcheklinicheskie-napravleniya/
0 votes7 answers -
Нестандартные колонки
Добрый день! Хочу сделать колонки, которые идут в порядке 1 -> 2 3 -> 4 5 -> 6 при том блоки могут быть разной длинны Но из-за этого между ними создается разные отступы. помогите мне пожалуйста сделать отступ одинакового расстояния. Вот ссылка на макет: https://jsfiddle.net/71zmeo0c/
0 votes3 answers -
как привязать изменение цвета текста к фокусу инпута
Нужно сделать как на картинке, при фокусе инпута подсвечивается и сам инпут и текст-название. Как сделать фокус инпута это я знаю, но как привязать к этому и текст?
0 votes1 answer