-
Posts
23 -
Joined
-
Last visited
About anvyd
- Birthday 04/20/1988
Information
-
Sex
Мужчина
-
From
Moscow
-
Interests
web
Contacts
-
Web site
http://anvyd.com
-
Skype
web.anvyd
anvyd's Achievements
Explorer (1/14)
1
Reputation
-
Решил освоить 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
- 1 reply
-
- media queryresponsive design
- width
-
(and 1 more)
Tagged with:
-
Есть сайт-галерея художника, скажем там 50 картин, хочет, чтобы на странице было по 5, я сдела, сделал постраничную нацигацию на php, подключил плагин галереи, на первой странице с 1 по 5 изображения, на второй с 6 по 10, но он хочет, чтобы когда нажимаешь на миниатюру и попадаешь в галерею можно было листать все изображения, это возможно как то реализовать? Может Ajax? А может есть уже велосипед придуманный?
- 1 reply
-
- Pagination
- html
-
(and 2 more)
Tagged with:
-
Не знал к чему отнести этот вопрос, и написал в этой ветке. У меня "типа" динамический сайт, есть файл "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, кто что может сказать по этому поводу?
-
reset.css файл, кто какой использует, плюсы\минусы?
anvyd replied to anvyd's question in HTML Coding
Прошу прощения, но тогда что вы посоветуете? Как мне убрать все отступы и лишние стили устанавливаемые браузером? Какая альтернатива вообще?