Jump to content

anvyd

Newbie
  • 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

Explorer (1/14)

1

Reputation

  1. Решил освоить 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
  2. В шапке у меня прописан вьюпорт <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
  3. Есть сайт-галерея художника, скажем там 50 картин, хочет, чтобы на странице было по 5, я сдела, сделал постраничную нацигацию на php, подключил плагин галереи, на первой странице с 1 по 5 изображения, на второй с 6 по 10, но он хочет, чтобы когда нажимаешь на миниатюру и попадаешь в галерею можно было листать все изображения, это возможно как то реализовать? Может Ajax? А может есть уже велосипед придуманный?
  4. Не знал к чему отнести этот вопрос, и написал в этой ветке. У меня "типа" динамический сайт, есть файл "config" где я подключаюсь к БД, определяю какие то константы основные. Есть модель, где я получаю какую-то информацию из БД Есть контроллер, в котором я данные из БД сообщаю с активным шаблоном. Есть соответственно папка шаблонов. В шаблонном файле index.php есть такая строчка <?php include "pages"."/" .$view. ".php"; ?>В папке "pages" у меня хранятся шаблоны страниц. в файле "controller.php" есть такая строчка $view = empty($_GET['view']) ? 'pictures' : $_GET['view'];в принципе все работает, не знаю насколько это правильная схема, но все работает. Страницы подаются динамически. но когда я смотрю стили в firebug, то не вижу там название css файла, только по #2 понимаю, что это 2 подключенный файл css в то время как на статичном, да и везде раньше было именно название файла там Подскажите, что я делаю неправильно
  5. Я не делал еще одну таблицу, просто я сделал еще один запрос(еще одну функцию) как мне посоветовал Switch74, спасибо. Ну плюс привел к нижнему регистру, как как форматированная дата возвращается с первой заглавной буквой SELECT DISTINCT LCASE(DATE_FORMAT(`date`, '%M')) as `ea` FROM `events` WHERE `approved` = '1'но вот у меня какой вопрос, я же не могу в одном запросе форматировать дату, чтобы у меня получилось два поля на разных языках средствами SQL? просто у меня в табах надо вывести класс на латинице, а название кириллицей january январь february февраль мне это надо будет делать уже в PHP? п.с. Вопрос не по теме, не могу нажать "нравится" на понравившемся ответе - "вы исчерпали лимит положительных оценок", что необходимо сделать, чтобы я мог оценивать комментарии участников
  6. У меня на сайте предусмотрены табы верстка такая суть вроде ясна, я с помощью jQuery ловлю 'data-class' в 'tabs-controls' и 'class' в 'tabs-content', и присваиваю им класс `selected`, а у соседей убираю этот класс В базе данных у меня есть таблица `events`(события/мероприятия) с такой структурой я хочу динамически выводить данные на сайт. но я не могу понять как мне это грамотно сделать. есть несколько вопросов: Необходимо ли мне делать еще одну таблицу с месяцами, и делать в таблице `events` поле, ссылающееся на месяц из таблицы месяцев? Мне надо будет делать два запроса в БД? первый для извлечения месяцев и посредством DISTINCT отсеивать дубликаты и пропускать через foreach в 'tabs-controls' а второй уже непосредственно для извлечения самих мероприятий?
  7. Хочу сделать логотип межу пунктами меню как на изображении 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?" и наоборот, но мне кажется это как то глупо
  8. а какие стили прописаны для label, label-info в файле css? Наверное для одно из этих классов задано правило border-radius. Найдите и закомментируйте его, если все станет как вам надо, то удалите вовсе.
  9. 1) Это процесс обучения, но всё равно благодарю за совет, такого рода задачи на практике буду делать непосредственно посредством php.2) разницы не имеет, я пробовал и ASC и DESC, по умолчанию делаю, то есть от меньшего к большему В задании не было ни слова о сортировке, я просто хотел сам отсортировать результаты выборки, но так и не смог Так работает, но на выходе я имею два поля, невозможно сделать это так, чтобы на выходе было одно поле?И я так и не понял, что значит 'amt' - это строка, это же вроде как псевдоним, я не могу разве к нему обращаться как к отдельному полю? Если не сложно в двух словах, если я применил конструкцию 'AS', то я уже не могу обратиться к выборке под этим псевдонимом и делать с ней какие либо манипуляции?
  10. У меня есть табличка задание было "Получите только целые части (без дробной части) сумм(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';ни один из результатов не отсорировал табличку по этому полю, что я делаю не так?
  11. Я всю жизнь писал код так <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. Но я хочу понять как правильно, как грамотно, хочу писать нормально. Подскажите очевидные плюсы либо минусы этих вариантов пожалуйста. Я просто с трудом представляю какие классы я смогу дать этим всем элементам на странице
  12. Доброе время суток, нужна помощь/совет есть сайт, связанный со спортом, единоборства есть три основных раздела со статьями(статьи примерно одного формата(название, изображение, текст, время добавления, автор)): новости, аналитика, полезные статьи полезные статьи содержат три подкатегории: питание, физическая подготовка, спортивная медицина Вопрос, как лучше спроектировать БД сделать одну таблицу `category` с полями : `id`, `name`, `title`, `parent_id` , где у "новости", "аналитика" в поле `parent_i` будет стоять значение "0", а у подкатегорий это поле будет "3", а вторую таблицу непосредственно "articles"? Либо сделать отдельные таблицы для трех видов статей? Но тогда как мне оформить таблицу "полезные статьи"? создавать для нее отдельную таблицу категорий? или в ней сделать три поля типа "enum", и к какой категории относится статья там ставить единицу? кто может подсказать как это правильнее реализовать? Как делают на реальных проектах?
  13. Впервые кому-то показываю свою работу, может что-то подскажите, может что-то явно неуместно, криво, категорически неправильно. К критике отношусь спокойно, даже привествую http://ketkin.pro/
  14. Доброе время суток. У меня есть блок (картинка+ее описание), необходимо, что это было ссылкой. вопрос такой, как правильней огранизовать это? На ум приходят два варианта: 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, кто что может сказать по этому поводу?
  15. Прошу прощения, но тогда что вы посоветуете? Как мне убрать все отступы и лишние стили устанавливаемые браузером? Какая альтернатива вообще?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy