artemhp
-
Posts
29 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by artemhp
-
-
Добрый день,
Подскажите, существует ли аналог такой экосистемы как grunt'а, но на ruby?
-
Как можно тестировать адаптив если у тебя нету всех устройств? с помощью этого сайта можно? http://www.browserstack.com/responsive
или как вообще?
В ссылке Вами приведен один из самых полезных ресурсов для тестирования верстки. Там можно проверять не только при разных вьюпортах, но и особенности разных операционных систем (благодаря виртуальным машиным в мембер аккаунте).
Адаптив верстка она во всем адаптив - адаптив к разным устройствам (десктопный компьютер, дислей на холодильника), адаптив к цветовым гаммам устройств (kindle, macbook), адаптив под интерфейсы управления (мышка, тач, клавиатура) и т.п.
Вопрос как тестировать и в чем больше зависит от Вашей целевой аудитории. Но всём проверить нереально.
Я чаще всего ограничиваюсь режимом эмулуции разных устройств в Chrome.
-
Почему подключаете файлы скриптов в head и без async?
Какой у вас принцип именования классов? Вот к примеру main_nav-wrap, responsive-menu_btn, name_option, franchise-content. Как Вы решаете для себя какой разделитель для слов выбрать?
Какой смысл этого селектора - a.zend ?
он у Вас очевидно по свойствам и по разметке только в ссылке используется.
-
А что не устраивает?
Изначальную позицию меню нужно было высчиать чем то типа offsetTop, а то там статика и не совсем подходящая, по этому и глючит.
Применять стили в JS - тоже лихо. Вы же там вроде классы какие то создавали, почему не создать было отдельный css-класс и не применить ему необходимые свойства?
-
Рекоммендую никогда не использовать id в стилях.
Вам же тогда крайне сложно будет модифицировать стили при необходимости переопределить какое то свойство другим селектором.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
-
Это фокус у кнопки. Убирается легко:
selector:focus {
outline: none;
}
Такого стоит избегать:
-
Простых знаний в javascript хватит, чтобы создать такую админку?Или что-то еще нужно знать дополнительно?
javascript - "клиентский" язык программирования. Мне интересно, как Вы себе представляете подключаться к базе данных?
Если предположить что данные в файлах и включив фантазию подумать, как это сделать только JS (не nodejs даже), то в голову приходит только ActiveXObject и то... подойдет для администрирования ресурса в браузере сервера, где находится ваш новостной портал (конечно если там Windows, иначе магия с Wine).
-
Скажите какую программу лучше исползовать для HTML CSS JS.
Visual studio?
Для начинающих
Visual Studio Express для веб-разработки вполне нормально.
У меня первой IDE был Macromedia Dreamweaver 7.0.
В наше время очень популярный для веб-разработки Sublime за счет своей легкости и гибкости.
Сейчас использую WebStorm + Visual Studio 2013.
Для начинающих подойдет что угодно.
Для профессиональной разработки в дальнейшем уже остановитесь на том, что больше подходит под проект, с которым будете работать.
-
Помогите пожалуйста c идеzvb по поводу реализации подобного счетчика для слайдов
-
Подскажите, а если така вот конструкция?
<span><input type="radio"></span><label>Test</label>
Как построить селектор, что бы получить доступ к Label только переключателей?
Ведь если сделать что то такое:
span ~ label
, то мы получим доступ абсолютно ко всем лейблам, будь там в спане переключатель или текстовое поле.
Спасибо
-
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.
Подскажите, какой способ сейчас лучше и почему?
-
Чем ждать у моря погоды пол месяца, я бы давно уже в этот модуль влез и исправил что надо.
Та работы просто хватает. А от кастомных переключателей пришлось пока отказаться. Да и влезть и исправить нельзя, это написание темы для плагина в котором рендерятся разметка с разных блоков системы, которые редактировать нельзя. И jQuery как бы мне хотелось, тоже нельзя. Есть подключаемый файл стилей только.
...
input[type="radio"] + script ~ label::before
...
input[type="radio"]:checked + script ~ label::before
...так и в опере и в хроме пашет
Спасибо большое, о ~ и не знал. Это может быть и решением, даже если ещё какие теги непредсказуемо появляться будут))
-
Оберни каждый input+label в какой-нибудь div
<div class="input-wrapper">
<input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
</div>и пиши стили отталкиваясь от него.Будет во всех браузерах работать.
Спасибо за ответ, но решение не подойдет так как:
1. У меня к разметке особого доступа нету. Рендерится без меня.
2. Оборачивается он то в li, то div, и нет в том контейнере никакого обозначения, что там переключатель.
-
Никто не посоветует?
-
Сделал реализацию переключателя таким способом:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
input[type="radio"]{
opacity: 0;
position: absolute;
}
input[type="radio"] + label::before{
content: "";
display: inline-block;
width: 13px;
height: 13px;
line-height: 13px;
margin: 0 8px 0 0;
background: green;
vertical-align: middle;
}
input[type="radio"]:checked + label::before{
background:red;
}
</style>
</head>
<body>
<form action="" name="form">
<input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
<input type="radio" name="test" id="second" value="2" /><label for="second">Second</label>
</form>
</body>
</html>И работает всё отлично. Всё бы хорошо, но модуль, к которому я делаю этот стиль рендерит в одном месте один переключатель с такой структурой:
<input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label>Следовательно я дополнительно пропишу то же самое для селектора:
input[type="radio"]:checked + script + label::before
и получается:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
input[type="radio"]{
opacity: 0;
position: absolute;
}
input[type="radio"] + label::before,
input[type="radio"] + script + label::before{
content: "";
display: inline-block;
width: 13px;
height: 13px;
line-height: 13px;
margin: 0 8px 0 0;
background: green;
vertical-align: middle;
}
input[type="radio"]:checked + label::before,
input[type="radio"]:checked + script + label::before{
background:red;
}
</style>
</head>
<body>
<form action="" name="form">
<input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
<input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label>
</form>
</body>
</html>Последняя реализация работает в Opera, но не работает в Chrome. Помогите решить, что бы заработало в Chrome
-
Как сделать вот такую вот картинку дивами?
Рядом стоящие и растягивающиеся по высоте в не зависимости от контента
Напрашивается таблица, но хотелось бы дивами подобной структуры:
-
Не совсем понял, что именно ты хочешь сделать
.Если это не то, отобрази на рисунке где точно должен быть скролл и что именно он должен прокручивать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style>
*{padding:0px;margin:0px;}
html,body{height:100%;overflow:hidden;}
.body{position:absolute;left:0px;right:0px;top:0px;height:100%;overflow:hidden;}
.top{position:absolute;left:0px;right:0px;top:0px;height:200px;background:#bbb;z-index:2;}
.content{position:absolute;left:0px;right:0px;top:200px;bottom:100px;background:#eee;overflow:auto;z-index:1;}
.bottom{position:absolute;left:0px;right:0px;bottom:0px;height:100px;background:#999;z-index:2;}
</style>
</head>
<body>
<div class="body">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</div>
</body>Большое спасибо, это заработало.
В конечном результате я хотел получить что то типа этого:
http://jsfiddle.net/artemhp/tCzZt/
Спасибо, попробую разобрать код и сделать в конечном счете то, что мне нужно будет.
-
body {
position: relative;
}
div.not_table {
width: 100%;
position: absolute;
top: 200px
bottom: 100px;
}http://jsfiddle.net/artemhp/TnjYe/2/
Метод не работает
div.not_table {
display: table;
height: 100%;
}http://jsfiddle.net/artemhp/AEEPd/1/
тоже не работает.
-
div.not_table {
display: table;
height: 100%;
}или
body {
position: relative;
}
div.not_table {
width: 100%;
position: absolute;
top: 200px
bottom: 100px;
}например.
Спасибо, очень даже привлекательно выглядит, попробую
-
Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок div по центру должен быть растянутым физически так как там будет скролл.
-
А, пардон. В таком случае таблица, вероятно, — неудачное решение. Разве что скриптами высоту считать.
А Вы не могли бы помочь в подборе более удачного решения?
-
Можно ли осуществить приведенную мною разметку на базе дивов (блоков), а не таблицы.
Главное что бы шапка была статической, а нижняя часть продлевалась до самого конца страницы?
-
Чтобы работало, сделайте ещё одну обёртку внутри td и позиционируйте относительно неё.
Тоже не получится. Я использую здесь таблицу только для того что бы у меня верхняя часть (шапка) была статической, а весь остальной контент (блок td) растягивался вниз.
-
Вычитал, что
style="position:relative;"
плохо работает для td, следовательно данный метод не очень подходит
Аналог grunt на ruby
in HTML Coding
Posted
Ruby разработчики внесли большой вклад в развитие front-end вне рубишных проектов:
Чего только стоит: sass, haml, coffeescript
(с другой стороны - nodejs разработчики, которые активно развивают свои препроцессоры для front-end.)
И для комфортной разработки на front-end нужно две среды - nodejs, ruby.
К nodejs у меня привязка сейчас в основном из-за grunt. Отсюда и интерес - можно ли обойтись без nodejs/grunt.