anvyd

Решил освоить SASS, очень мне нравится его идея, большое коммьюнити, все нравится, но столкнулся с проблемой, собственно ниже и опишу. Хочу сделать миксин медиазапросов есть 4 переменные, в них описаны размеры экрана, и создан несложный миксин. $screen_xs: 320px;$screen_s: 768px;$screen_m: 1024px;$screen_l: 1200px;$screen_xl: 1376px;@mixin mediaquery($media) { @if $media == screen_s { @media only screen and (max-width: $screen_s + 1) { @content; } } @else if $media == screen_m { @media only screen and (min-width: $screen_m + 1){ @content; } } @else if $media == screen_l { @media only screen and (min-width: $screen_l + 1) { @content; } } @else if $media == screen_xl { @media only screen and (min-width: $screen_xl + 1) { @content; } }}дальше я этот миксин подключаю, например, к боди, пример абстрактный. body{ background: $blue_grey; @include mediaquery(screen_s) { background: $lime;} @include mediaquery(screen_m) { background: $teal;} @include mediaquery(screen_l) { background: $orange;} @include mediaquery(screen_xl) { background: $pink;} color: $color_base; font-family: $font_base; @include flexbox; @include flex-direction(column); min-height: 100vh;}суть такая, что фон меняется в зависимости от разрешения. НА выходе мы имеем // outputbody { background: #607D8B; color: #cccccc; font-family: "Proxima Nova", Tahoma, helvetica, sans-serif; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: vertical; -moz-flex-direction: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; min-height: 100vh;}@media only screen and (max-width: 769px) { body {background: #CDDC39;}}@media only screen and (min-width: 1025px) { body {background: #009688;}}@media only screen and (min-width: 1201px) { body {background: #FF9800;}}@media only screen and (min-width: 1377px) { body {background: #E91E63;}}Казалось бы этого я и ждал, так и есть, результат достигнут, но теперь у меня есть другой элемент, который я хочу видоизменять в зависимости от экрана, и пишу следующее .size:after{ content: "Size XS"; @include mediaquery(screen_s) { content: "Size S";} @include mediaquery(screen_m) { content: "Size M";} @include mediaquery(screen_l) { content: "Size L";} @include mediaquery(screen_xl) { content: "Size XL";}}Код несложный, есть блок, я в псевдоэлементе :after меняю слова в зависимости от разрешения. Собственно тут я и сталкиваюсь с проблемой избыточности, у меня дублируется код. На выходе я получаю ОТДЕЛЬНЫЕ медиазапросы // output.size:after {content: "Size XS";}@media only screen and (max-width: 769px) { .size:after {content: "Size S";}}@media only screen and (min-width: 1025px) { .size:after {content: "Size M";}}@media only screen and (min-width: 1201px) { .size:after {content: "Size L";}}@media only screen and (min-width: 1377px) { .size:after {content: "Size XL";}}так как же мне избавиться от этой избыточности? делать как и раньше в отдельном месте прописывать разрешение и в него вставлять все элементы, стили которых необходимо менять? но тогда пропадает прелесть использования SASS

В шапке у меня прописан вьюпорт <meta name="viewport" content="width=device-width, initial-scale=1">в css у меня прописано свойство body{ background: coral;}@media screen and (min-width: 480px){ body{ background: green; }}Но, смена фона происходит не на 480 пикселе, а на 463px. В хроме все в порядке. Может кто сталкивался, подскажите в чем причина? я хочу, чтобы изменения происходили четко после 480px

Есть сайт-галерея художника, скажем там 50 картин, хочет, чтобы на странице было по 5, я сдела, сделал постраничную нацигацию на php, подключил плагин галереи, на первой странице с 1 по 5 изображения, на второй с 6 по 10, но он хочет, чтобы когда нажимаешь на миниатюру и попадаешь в галерею можно было листать все изображения, это возможно как то реализовать? Может Ajax? А может есть уже велосипед придуманный?

Не знал к чему отнести этот вопрос, и написал в этой ветке. У меня "типа" динамический сайт, есть файл "config" где я подключаюсь к БД, определяю какие то константы основные. Есть модель, где я получаю какую-то информацию из БД Есть контроллер, в котором я данные из БД сообщаю с активным шаблоном. Есть соответственно папка шаблонов. В шаблонном файле index.php есть такая строчка <?php include "pages"."/" .$view. ".php"; ?>В папке "pages" у меня хранятся шаблоны страниц. в файле "controller.php" есть такая строчка $view = empty($_GET['view']) ? 'pictures' : $_GET['view'];в принципе все работает, не знаю насколько это правильная схема, но все работает. Страницы подаются динамически. но когда я смотрю стили в firebug, то не вижу там название css файла, только по #2 понимаю, что это 2 подключенный файл css в то время как на статичном, да и везде раньше было именно название файла там Подскажите, что я делаю неправильно

Я не делал еще одну таблицу, просто я сделал еще один запрос(еще одну функцию) как мне посоветовал Switch74, спасибо. Ну плюс привел к нижнему регистру, как как форматированная дата возвращается с первой заглавной буквой SELECT DISTINCT LCASE(DATE_FORMAT(`date`, '%M')) as `ea` FROM `events` WHERE `approved` = '1'но вот у меня какой вопрос, я же не могу в одном запросе форматировать дату, чтобы у меня получилось два поля на разных языках средствами SQL? просто у меня в табах надо вывести класс на латинице, а название кириллицей january январь february февраль мне это надо будет делать уже в PHP? п.с. Вопрос не по теме, не могу нажать "нравится" на понравившемся ответе - "вы исчерпали лимит положительных оценок", что необходимо сделать, чтобы я мог оценивать комментарии участников

У меня на сайте предусмотрены табы верстка такая суть вроде ясна, я с помощью jQuery ловлю 'data-class' в 'tabs-controls' и 'class' в 'tabs-content', и присваиваю им класс `selected`, а у соседей убираю этот класс В базе данных у меня есть таблица `events`(события/мероприятия) с такой структурой я хочу динамически выводить данные на сайт. но я не могу понять как мне это грамотно сделать. есть несколько вопросов: Необходимо ли мне делать еще одну таблицу с месяцами, и делать в таблице `events` поле, ссылающееся на месяц из таблицы месяцев? Мне надо будет делать два запроса в БД? первый для извлечения месяцев и посредством DISTINCT отсеивать дубликаты и пропускать через foreach в 'tabs-controls' а второй уже непосредственно для извлечения самих мероприятий?

Хочу сделать логотип межу пунктами меню как на изображении http://storage9.static.itmages.ru/i/15/0830/h_1440960187_5020454_95be8f1766.jpg Но не до конца понимаю как это все сделать грамотно. У меня есть два варианта, как это реализовать. <header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"><img src="" alt=""></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header><header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Либо сделать одним из пунктов ссылку и в нее вставить картинку, либо ссылке установить бэкграунд и туда вставить картинку логотипа? Но, что меня больше интересует, как мне это провернуть с адаптивностью? мне по идее надо как вырвать эту ссылку оттуда и поставить перед меню, а оттуда вообще убрать этот `li` с ссылкой на логотип, подскажите как это делаю вообще? на маленький устройствах я бы хотел, чтобы была такая верстка <header> <a href="" class="logo"><img src="" alt=""></a> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Или мне надо создать сразу эту ссылку и установить ей свойство "display: none?" и наоборот, но мне кажется это как то глупо

а какие стили прописаны для label, label-info в файле css? Наверное для одно из этих классов задано правило border-radius. Найдите и закомментируйте его, если все станет как вам надо, то удалите вовсе.

1) Это процесс обучения, но всё равно благодарю за совет, такого рода задачи на практике буду делать непосредственно посредством php.2) разницы не имеет, я пробовал и ASC и DESC, по умолчанию делаю, то есть от меньшего к большему В задании не было ни слова о сортировке, я просто хотел сам отсортировать результаты выборки, но так и не смог Так работает, но на выходе я имею два поля, невозможно сделать это так, чтобы на выходе было одно поле?И я так и не понял, что значит 'amt' - это строка, это же вроде как псевдоним, я не могу разве к нему обращаться как к отдельному полю? Если не сложно в двух словах, если я применил конструкцию 'AS', то я уже не могу обратиться к выборке под этим псевдонимом и делать с ней какие либо манипуляции?

У меня есть табличка задание было "Получите только целые части (без дробной части) сумм(amt)" Я использовал функцию SUBSTRING_INDEX, запрос выглядит так SELECT SUBSTRING_INDEX(`amt`, '.', 1) AS 'amt' FROM `orders`;то есть возьми поле `amt` найди там первое вхождение подстроки '.' и отсей все, что идет за ним. результат меня устривает, задачу я выполнил. Но, я решил пойти дальше, и захотел сортировать результат по полю amt SELECT SUBSTRING_INDEX(`amt`, '.', 1) AS 'amt' FROM `orders` ORDER BY amt;SELECT SUBSTRING_INDEX(`amt`, '.', 1) AS 'amt' FROM `orders` ORDER BY `amt`;SELECT SUBSTRING_INDEX(`amt`, '.', 1) AS 'amt' FROM `orders` ORDER BY 'amt';ни один из результатов не отсорировал табличку по этому полю, что я делаю не так?

Я всю жизнь писал код так <nav id="navigation"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></nav>а потом посредством css добавлял стили элементам #navigation{ width: 100%;} #navigation ul{ display: block; ... } #navigation ul li{ display:inline-block: ... } #navigation ul li a{ display: block; ... } #navigation ul li a:hover{ text-decoration: none; }Стили просто для примера. В принципе горя не знал, все работало. Сегодня посмотрел один миникурс, где сказано, что лучше каждом элементу давать класс и уже к классу подбираться в CSS типа такого <nav class="nav"> <ul class="navigation"> <li class="nav-element"><a class="nav-link" href=""></a></li> <li class="nav-element"><a class="nav-link" href=""></a></li> <li class="nav-element"><a class="nav-link" href=""></a></li> <li class="nav-element"><a class="nav-link" href=""></a></li> </ul></nav>Ну и вы поняли как писать CSS. А теперь скажите, реально ли второй вариант правильный, но это ведь слишком много кода каждому элементу присваивать класс, ведь гораздо удобней писать просто родительские и дочерние элементы в CSS. Но я хочу понять как правильно, как грамотно, хочу писать нормально. Подскажите очевидные плюсы либо минусы этих вариантов пожалуйста. Я просто с трудом представляю какие классы я смогу дать этим всем элементам на странице

Доброе время суток, нужна помощь/совет есть сайт, связанный со спортом, единоборства есть три основных раздела со статьями(статьи примерно одного формата(название, изображение, текст, время добавления, автор)): новости, аналитика, полезные статьи полезные статьи содержат три подкатегории: питание, физическая подготовка, спортивная медицина Вопрос, как лучше спроектировать БД сделать одну таблицу `category` с полями : `id`, `name`, `title`, `parent_id` , где у "новости", "аналитика" в поле `parent_i` будет стоять значение "0", а у подкатегорий это поле будет "3", а вторую таблицу непосредственно "articles"? Либо сделать отдельные таблицы для трех видов статей? Но тогда как мне оформить таблицу "полезные статьи"? создавать для нее отдельную таблицу категорий? или в ней сделать три поля типа "enum", и к какой категории относится статья там ставить единицу? кто может подсказать как это правильнее реализовать? Как делают на реальных проектах?

Впервые кому-то показываю свою работу, может что-то подскажите, может что-то явно неуместно, криво, категорически неправильно. К критике отношусь спокойно, даже привествую http://ketkin.pro/

Доброе время суток. У меня есть блок (картинка+ее описание), необходимо, что это было ссылкой. вопрос такой, как правильней огранизовать это? На ум приходят два варианта: 1) <a href="#"> <figure> <img src="img/img.png" alt="описание"> <figcaption>описание</figcaption> </figure></a>2) <figure> <a href="#"><img src="img/img.png" alt="описание"></a> <a href="#"><figcaption>описание</figcaption></a></figure>Но правильно ли это, и если правильно, то какой вариант ближе к истине. Используя первый вариант я вижу, что у меня не ресайзятся изображения почему то, хотя max-width=100% и height=auto для изображений прописано. Но мне кажется первый вариант более логичный, не требуется плодить лишние ссылки, может кто подскажет как правильнее делать? еще я вычитал, что не надо помещать логотип+краткое описание в тег figure, кто что может сказать по этому поводу?

Прошу прощения, но тогда что вы посоветуете? Как мне убрать все отступы и лишние стили устанавливаемые браузером? Какая альтернатива вообще?

Товарищи, перелопатил много менюшек, но не нашел нормального решения ( Требуется многоуровневое меню(2х, 3х-уровневое), адаптивное, скачал одно, разобрался, но на планшете и в телефоне глючит и заедает, другое так же, может есть какое то готовое хорошее решение?

Все (ну или почти все) используют какой то *css файл для сброса стилей или приведения их к одинаковым на всех браузерах. Подскажите какой вы используете. У меня есть файл сброса стилей, что можете сказать по нему, я не специалист, уверен, тут есть ляпы или чего-то не хватает, пожалуйста владеющие темой сделайте замечания. гугл много чего подсказывает, и, например, первый в выдаче идет reset.css Eric Meyer от января 2011 года, подозреваю, что он весьма устарел html{ box-sizing: border-box;}*, *:before, *:after{ box-sizing: inherit;}html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, main, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display: block;}body{ line-height: 1;}ol,ul{ list-style: none;}blockquote,q{ quotes: none;}blockquote:before,blockquote:after,q:before,q:after{ content: ''; content: none;}table{ border-collapse: collapse; border-spacing: 0;}img,embed,object,video{ border: none; max-width: 100%;}a{ text-decoration: none;}input,button{ font: inherit; border-radius: none; box-shadow: none; appearance: none;}textarea:focus, input:focus{ outline: none;}button{ cursor: pointer;}

Шрифт можно собрать свой, где будут только те иконки которые вам нужны. Весить такой файлик будет мало Дико извиняюсь, а есть мануал какой-нибудь или туториал? очень любопытно, но не знаю даже как запрос оформить в поисковике ((

Существует несколько методов вывода иконки навигации(три горизонтальных линии) на сайте кто-то просто вставляет png иконку, кто-то делает с помощью border`a, кто-то использует box-shadow, кто-то градиенты, кто-то svg. кто-то псевдо-элементы. я не сильно силен в этой теме, но понимаю, что мне хотелось бы менять, к примеру, цвет иконки в зависимости от цвета фона шапки, поэтому я хотел бы иметь возможность гибко работать с иконкой. Суть вопроса, кто какой метод использует и какие плюсы/минусы разных методов. п.с. Кто-то подключает иконочный шрифт, вопрос такой, имеет ли смысл грузить мобильный трафик подключением этого шрифта ради 1-2 иконок?? или это не особо влияет на скорость загрузки сайта?

Проблему решил, может кому надо будет. Когда верстаете на флексбоксе, обязательно проставляйте все префиксы, для всех селекторов flexbox. кто не знает как они выглядят где можно найти эти самые префиксы есть хорошая подсказка http://ptb2.me/flexbox/ , там собраны основные префиксы для современных и устаревших браузеров. просто на ПК или браузерах на андроиде этого не замечаешь, а на iOS на айпадах это, пусть и долисекундное, разсползание верстки очень напрягает

прошу прощения, планшеты iPad Air и iPad mini3, iOS 8.3 , не могу найти версию сафари, дефолтная сафари вобщем

Господа, есть элементарный сайт визитка, насколько это возможно, на пк все вроде неплохо, без глюков, сделан по принципу mobile first, но на планшете, если нажимать на пункты меню, буквально долисекунды я вижу, как верстка съезжает, это очень напрягает, делал я его флексбоксами, может кто подскажет, что и где и сделал неправильно? Сайт пока находится по адресу anvyd.ru

А нормально это как? подгружать этот шрифт сразу? в том то и дело, что я не знаю как нормально, но логично же, что сторонние шрифты погружать на более высоком интернете, как эту проблему решить? я правильно понял, инициализировать шрифт надо в в обычном файле, а уже использовать в медиа запросах, тогда шрифт не будет загружаться у пользователей мобильников?

У меня есть подгружаемый шрифт, но подгружать я его хочу на определенном разрешении, я не хочу, чтобы пользователи мобильного интернета теряли в скорости загрузки сайта и даю им стандартный шрит, а для пользователей стационарных ПК я подгружаю шрифт, но валидатор ругается на подобное подключение, хотя все работает, помогите разобраться, как мне сделать грамотно все в этой ситуации. У меня в основной таблице стилей подключен другой шрифт, там нет ошибки, но при подключении именно в @media screen выдается ошибка.