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
-
Как задать фото, которое подтягивается при вставке URL?
Как задать через html или css или ещё как-то – изображение, которое автоматически подтягивается при вставке ссылки в поле ввода сообщения (например в VK или Facebook)? Прикрепил 2 примера.
0 votes5 answers -
Не отображается placeholder в textarea
Здравствуйте. верстаю страничку на bootstrap3. В textarea прописан placeholder ,но он не отображается, причем placeholder в input отображается. для формы использую только стили bootstrap3 , у input и textarea одинаковые стили. (кастомных стилей для них нет) <input type="text" id="phone2" class="form-control" name="phone" placeholder="Контакты (Телефон):" required > <br/> <textarea type="text" id="message" class="form-control" name="message" placeholder="Комментарии:" required > </textarea>Пробовал задать черный цвет для placeholder textarea : textarea::-webkit-input-placeholder {color:#000;}textarea::-moz-place…
0 votes2 answers -
Почему не работает @media?
Задача: на экранах с шириной до 480px убрать сайдбары, после чего заполнить их место контентом. Что сделал: в общем css файле в самом верху прописал: @media=only screen and (max-device-width:480px) {#sidebar1,#sidebar2 {display:none;}#wrapper {max-width:480px;}#header, #menu, #content, #footer {width:100%;}}/* далее идет основной css для всех */Тестирую в файрфоксе инструментами для разработчика. Ничего не меняется. Вопрос: что сделать, чтобы заработало?
0 votes20 answers -
Путь к файлу css
Подскажите пожалуйста правильный алгоритм путешествия к файлу main.css, у меня index.html находится в дочерней папке, как именно указать в хеде путь к главному css
0 votes3 answers -
overflow-y: visible не работает если overflow-x: hidden
Всем доброго времени суток У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент ст…
0 votes14 answers -
Не отображается background-image
Вопрос такой: указываю див'y : background-image: url(img/header.png) no-repeat; Картинка не появляется. Стоит указать width и height так сразу появляется. Еще указываю размер картинки, но почему не показывает. Стоит указать на 10px больше высоту, так сразу появляется. Вопрос: обязательно ли всегда указывать размер картинки, если да, то во всех же браузерах по-разному будет отображаться?
0 votes5 answers -
Применить стиль к label при фокусе на input
Обязательное условие - подсветка текста при фокусе на input. Простой пример. http://jsfiddle.net/GuCk4/45/ Как сделать так, чтобы при фокусе на input, стиль оставался примененным и к label, а не пропадал сразу же после клика? Нашел решение с помощью JQuery, но возможно есть способ попроще без скриптов? Структуру html можно изменять, лишь бы выполнялось условие.
0 votes6 answers -
transform:scale() Не работает css transform
Всем привет! Помогите пожалуйста разобраться в чем проблема. ——————————————————————————————————————————————————-- Ето код html <div class="top_menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> &…
0 votes1 answer -
Не работает display:inline-block
Добрый день друзья. Есть вопрос по поводу верстки, верстаю макет - и в блоке услуг не могу выравнить блоки с видами ремонта в одну линию, задал в hmtl класс, в css - задал отступы и display:inline-block, и ничего не происходит. div class="row"> <div class="col-md-12"> <div class="mc_wrap"> <div class="mc_item_wrap"> <div class="mc_item"> 12345677 </div> <div class="mc_item"> 12345677 …
0 votes6 answers -
Как сделать скошенные углы
Доброго времени суток, уважаемые форумчане! Попался макет, где много элементов со скошенными углами. Один: http://www.screencapture.ru/file/A893fA1F Два: http://www.screencapture.ru/file/76106c72 Три: http://www.screencapture.ru/file/d8264D58 Четыре: http://www.screencapture.ru/file/A836B408 Подскажите какой-нибудь гайд, как это сверстать. Спасибо!
0 votes8 answers -
как правильно делать сетку сайта , что за wrapper ?
У меня небольшой вопрос, как правильно делать сетку сайта и что за часто встречающийся класс wrapper ? Я правильно понимаю что если я делаю сайт шириной 980px то я делаю id или класс wrapper и указываю ему ширину 980px, центрирую его и уже внутри блока с классом wrapper делаю сетку сайта ? тоесть wrapper обворачивает все содержимое и он нужен для того чтобы сделать рабочую область шириной 980px в которой делают сетку сайта? и для класса wrapper надо задать : position:relative;left: auto;right: auto;или отцентрировать с помощью margin:auto; ?
0 votes9 answers -
Как избавиться Invalid property in CSS2.1
Проверял CSS на оптимизацию, выдал вот такой список: 247 Invalid property in CSS2.1: border-radius 354 Invalid property in CSS2.1: border-radius 355 Invalid property in CSS2.1: box-shadow 363 Invalid property in CSS2.1: text-shadow 376 Invalid property in CSS2.1: border-radius 377 Invalid property in CSS2.1: box-shadow 385 Invalid property in CSS2.1: text-shadow 393 Invalid property in CSS2.1: box-shadow 399 Invalid property in CSS2.1: border-radius 400 Invalid property in CSS2.1: box-shadow 408 Invalid property in CSS2.1: text-shadow 416 Invalid property in CSS2.1: box-shadow Исходный код: 8.006 Кб, Оптимизированный код: 7.545 Кб, Коэффициент: 5.8% (-461 байт) ht…
0 votes12 answers -
Кроссбраузерность line-height или как правильно центровать текст по вертикали
Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода: HTML: <div class="lineHeight"> HELLO // line-height method </div> <div class="padding"> HELLO // padding method </div> CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div { font-family: 'Open Sans', sans-serif; font-size: 14px; height: 100px; background: lightgreen; margin: 5px; padding-left: 10px; box-sizing: border-box; } .lineHeight { line-height: 100px; } .padding { padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующа…
0 votes8 answers -
Как отобразить background-image за пределами блока
Здравствуйте! Есть блок шириной 390px и высотой 100px, который является ссылкой. .div { background-image: url(bg_1.png); height: 100px; width: 390px; } .div:hover { background-image: url(bg_hover.png); } <div class="div"> <a href="#">Текст</a> </div> <div class="div"> <a href="#">Текст</a> </div> Можно ли сделать так, чтобы при наведении на блок фон менялся на bg_hover.png и при этом стрелка слева картинки выходила за пределы блока??
0 votes12 answers -
Counter для slick-slider
Ребят, может кто-то делал, что-нибудь подобное. Нужен счетчик для slick-slider как на фото ниже. Получается например у нас идет 120 слайдов, нужно чтобы он показывал сколько всего слайдов в блоке, и на каком мы сейчас находимся. На фото в нижнем левом углу видно. Буду благодарен за подсказку
0 votes3 answers -
Проблемы с flex в Safari
Приветствую! Ребят, создавал тут тему недавно насчет одинаковой высоты у блоков, добрый человек посоветовал использовать flex и показал пример(спасибо ему огромное!). Воспользовался я его советом, все хорошо получилось, но такая красота получается только в Chrome, Firefox да Opera, а в Safari нифига. Вот как должно быть: А вот как в Safari: Как видите, продолжение background нет(высота фиксированная, хотя с flex должна была установится высота блока main) да и тени почему-то тоже нет(пропадает, когда увеличиваешь страницу). Вот верстка: <!DOCTYPE html><html lang="ru"><head> <meta charset="UTF-8"> <title>{title}</title>…
0 votes16 answers -
Как перечеркнуть текст крест-накрест?
Здравствуйте! Как можно перечеркнуть текст крест-накрест. В интернет-магазинах так часто перечёркивают старую цену. Backgroud не устраивает - меняется геометрия, находится сзади текста, не во всех браузерах работает корректно. Есть какие-то хитрости?
0 votes2 answers -
стилизация тега video
помогите пожалуйста советом непонятно как можно стилизовать панель html5-тега video. понятно, что там все элементы представляют себя псевдоэлементы. и даже, поискав в интернетах, можно названия этих псевдоэлементов получить. но ни ff, ни chrome не показывают ни одного псевдоэлемента. а хотелось бы увидеть
0 votes4 answers -
div Как перенести блок на новую строку
Вечер Добрый. Пишу с просьбой дабы объяснили как можно перенести блок в определенно место. Скрытый текст <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./css/style.css"> <title>HTML5</title> </head> <body> <div class="" ="wrapper"> <div class="header"> <div class="header_line"></div> </div> <div class="row"> <div class="avatar"></div> <div clas="abme"> <div class="name"></div> <div class="status"><…
0 votes3 answers -
Подскажите как правильно стилизовать placeholder с помощью sass
Первый вопрос: - Нужно ли использовать эти кроссбраузерные плюшки для стилизации placeholder'a? Не устарели ли они? ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} Второй вопрос - Использую Sass, как правильно стилизовать placeholder? Не могу понять куда писать этот код и как правильно он оформляется в sass &-form margin-top: 98px &_main-form input display: block margin: 0 auto height: 67px width: 370px padding: 29px 0 29px 36px По идее он должен писаться под п…
0 votes1 answer -
Обрезание и разворачивание текста
Добрый вечер, задача такая, в диве есть большой текст, а на странице выводятся только 4 строчки его, как сделать нашел: http://htmlbook.ru/blog/obrezaem-dlinnuyu-stro а как еще добавить к этому кнопку развернуть и по которой див будет развернут полностью, с текстом?
0 votes12 answers -
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…
0 votes3 answers -
pug и sass: как сдают верстку и заливают на сервер?
1. Как принято сдавать верстку, если пользуешься, например, pug и sass? До их появления я предоставляла html, css и т.п. Сейчас осваиваю инструменты, но из-за компиляции непонятно, какие файлы теперь отправляют клиенту? 2. В каком виде готовую верстку закачивают на сервер? Например, сайт без CMS: просто готовые html+css+js? Но тогда их менее удобно править при необходимости. Или на сервер как-то компилятор ставят? А если натягивать на CMS, то тогда как быть? Чувствую, для большинства участников форума это очевидные вещи. Подскажите, как хотя бы называется эта тема, чтобы погуглить. Всё, что находила сама — не по теме.
0 votes20 answers -
Обрезать текст по высоте.
Приветствую, подскажите друзья как быть, представим, что есть новость, высота блока новости 40px. Нужно сделать так, что текст обрезался не по ширине в одну строчку, а по высоте и в конце ставил троеточие, как это можно сделать используя text-overflow. http://htmlbook.ru/css/text-overflow тут описан способ обрезки текста в строчку без переносов, что мне не подходит.
0 votes3 answers -
Как сделать скролл на один экран вниз?
Посередине первого экрана будет кнопка скрола ко второму. Что нужно писать в джиквери, что бы прокрутить вниз на один экран?
0 votes2 answers