• Сетка изображений ломается при уменьшении ширины браузера, как поправить?

    julia_amake
    @julia_amake
    Front-end разработчик
    Ответ написан
    Комментировать
  • Не получается использовать стили css?

    julia_amake
    @julia_amake
    Front-end разработчик
    Не верстайте так. Использовать float для сеток и центровать отступом слева – это плохая практика.

    Чтобы расположить контент по центру, нужно не у логотипа слева отступ делать, а центровать весь header (content и т.д.). Для этого заводите специальный класс (как правило, его называют .container) и добавляете его везде, где нужно отцентровать контент. И вместо float используйте flexbox.

    Например, для вашего header-а:

    <header class="container">
      <div class="header-logo">
        <img src="http://jakimez.ru/sites/all/themes/vladweb/img/logo.png" alt="logo">
      </div>
      <nav class="header-menu">
        <ul>
          <li class="navigation-menu">Главная</li>
          <li class="navigation-menu">Наши Услуги</li>
          <li class="navigation-menu">Цены</li>
          <li class="navigation-menu">Контакты</li>
        </ul>
      </nav>
      <div class="header-contacts">
        8(4922)33-56-09
        <br>info@jakimez.ru
      </div>
    </header>

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
    header {
      display: flex;
      justify-content: space-between;
    }
    Ответ написан
    Комментировать
  • Почему Input длинее div'а в котором он находится?

    julia_amake
    @julia_amake
    Front-end разработчик
    Может быть у input есть padding, тогда ширина этого input = 100% + отступы. Тогда можно задать box-sizing: border-box и padding учитываться не будет. Но было бы проще, если бы вы показали код, т.к. сейчас это пальцем в небо или гадание на кофейной гуще.
    Ответ написан
    Комментировать
  • Что ужасного в использование тэга br?

    julia_amake
    @julia_amake
    Front-end разработчик
    У каждого тега есть свое назначение, <br> - это переход на новую строку, именно на новую строку, а не абзац (для этого есть <p>) и, тем более, не для задания отступов между блоками (для этого есть padding и margin).

    что страшного - то может быть, если использовать

    Страшно смотреть на такой код, ладно если вы от и до сами занимаетесь сайтом, но если над ним будут работать другие люди, у них будут в голове только такие мысли: "За что мне это? Что это вообще такое?? Какой ламер это писал? Неужели так трудно выучить назначение тегов? и т.д.". Плюс верстку на br-ах не так просто редактировать, если отступы в css мы можем контролировать и делать с ними все, что угодно, то br верстальщика такой возможности лишают.

    Вобщем, br не для оформления, как и другие теги, в принципе. Теги - для разметки, каждый тег используется по своему назначению, а для оформления есть css. Вы же не красите ногти помадой? Надеюсь, что нет, для этого же есть лак.
    Ответ написан
    Комментировать
  • Заголовок сайта текстом или можно обойтись и изображением?

    julia_amake
    @julia_amake
    Front-end разработчик
    Заголовок должен быть заголовком, h1 - это один из самых важных моментов в SEO, так что если нет никакой другой возможности, кроме, как сделать его картинкой - делайте, но, как вариант, можно заголовок написать текстом и через css заменить его на картинку.
    Ответ написан
    Комментировать
  • Выбор cms Joomla vs ModX?

    julia_amake
    @julia_amake
    Front-end разработчик
    Если нужен быстрый, безопасный и качественный сайт - советую MODx, но здесь не будет большого кол-ва готовых дополнений. Но, с другой стороны, если в Joomla без меры устанавливать сторонние плагины, то он быстро перестанет быть быстрым и безопасным. Админка в Joomla удобнее для обычного смертного, но в MODx можно настроить админ панель под себя: создавать поля, переименовывать, удалять ненужные, менять дизайн, можно даже создать отдельную панель администрирования для контент-менеджеров, одним словом, настройка MODx ограничивается только фантазией и умением специалиста.
    Ответ написан
    Комментировать
  • Адаптивная верстка, что я делаю не так?

    julia_amake
    @julia_amake
    Front-end разработчик
    @media (min-width: 400px) {} - это не media-переменная для телефона, это media-запрос, срабатывающий когда ширина больше 400px, т.е. это также и планшеты, и десктопы. Такое поведение абсолютно логично и правильно, это mobile first. Когда вы будете прописывать остальные media для устройств побольше - они будут добавлять и перезаписывать основные стили и стили из предыдущих media-запросов.

    Если же нужно добавить стили жестко для мобильных, добавьте еще max-width, как советовали выше: @media (min-width: ...) and (max-width: ...) {}
    Ответ написан
    Комментировать
  • Непонятно по какой причине input email съезжает вниз?

    julia_amake
    @julia_amake
    Front-end разработчик
    Вроде бы, нормально все, ничего не съезжает. Или вы про отступ сверху и снизу от h4? Если это, тогда задать заголовку margin: 0;
    Ответ написан
  • Как узнать высоту элемента с Position=Absolute?

    julia_amake
    @julia_amake
    Front-end разработчик
    Вместо float использовать inline-block, тогда блоки спокойно идут друг за другом и, в то же время, вы можете их двигать куда пожелаете через position: relative
    jsfiddle.net/e13z69yr/1
    Ответ написан
    Комментировать
  • Можно ли сжимать подключаемые файлы на лету?

    julia_amake
    @julia_amake
    Front-end разработчик
    Можно, используйте сборщики, например, Gulp
    Ответ написан
    Комментировать
  • Как избавиться от смещения текстового меню в HTML?

    julia_amake
    @julia_amake
    Front-end разработчик
    Если не помещается, почему не сделать margin поменьше? И вы используете float для элементов списка, но не используете clearfix. Из-за этого тоже могут быть проблемы.
    Ответ написан
    1 комментарий
  • Верстка градиента?

    julia_amake
    @julia_amake
    Front-end разработчик
    Пипеткой выбираете самые крайние цвета на картинке. Угол у вас от верхнего левого к правому нижнему. Получится что-то вроде этого:
    background: rgb(0, 181, 197);
    background: -moz-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
    background: -webkit-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
    background: -o-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
    background: -ms-linear-gradient(30deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);
    background: linear-gradient(120deg, rgb(0, 181, 197) 0%, rgb(0, 140, 164) 100%);

    В крайнем случае можете затереть надписи и воспользоваться конвертером изображения в css от colorzilla
    Ответ написан
    4 комментария
  • Как убрать отступ между блоками block?

    julia_amake
    @julia_amake
    Front-end разработчик
    поубирайте лишние <br>
    Ответ написан
  • Отдельный стиль для элемента css?

    julia_amake
    @julia_amake
    Front-end разработчик
    использовать css-сигнатуры (т.е. задать в конкретном шаблоне класс только тегу body, а все остальные классы менять не придется).

    А вообще лучше не использовать такие селекторы, старайтесь делать классы более уникальными, чтобы можно было использовать только один класс в селекторе, что-то вроде .header-contacts-phone или еще проще .header-phone
    Ответ написан
    Комментировать
  • Как сверстать такую страницу?

    julia_amake
    @julia_amake
    Front-end разработчик
    если задать свойство background-size: cover, изображение будет масштабироваться под размеры блока.

    десятки br не используйте, для позиционирования есть такие свойства, как margin (внешний отступ) и padding (внутренний), абсолютное позиционирование или псевдо-таблицы (display: table-cell; vertical-align: bottom;)
    Ответ написан
    5 комментариев
  • Как оцените данную верстку?

    julia_amake
    @julia_amake
    Front-end разработчик
    Мне очень нравится, получилось здорово. Единственное, немного смущает отсутствие hover-эффектов и cursor:pointer на кнопке в блоке Subscribe.

    И некоторые "придирки" по коду:

    1) скрипты из head вы нести вниз страницы
    2) a можно было не оборачивать в div. И strong использовать с осторожностью, он обозначает высокую важность, поэтому для оформления лучше использовать теги попроще, например, обычный span или b
    <div class="logo">
        <a href="#"><strong>. one</strong>town</a>
    </div>

    3) h1 нежелательно использовать на странице больше одного раза, в html5 это разрешается, но seo-шники обычно ругаются за такое
    4) вместо этого ужаса
    <input type="text" class="email" value="Enter Your Email Address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

    уже давно можно использовать атрибут placeholder
    5) стили для ie можно вынести в отдельный css-файл, и загружать его только для IE
    6) элементы типа стрелочек, точек, линий можно сделать на css,а не картинками ;-)

    А так для первого раза это больше, чем отлично!!) Красиво, валидно и быстро!
    Ответ написан
    5 комментариев
  • Как правильно делить сайт на блоки?

    julia_amake
    @julia_amake
    Front-end разработчик
    Даты не советую выносить в sidebar. Они относятся к контенту, поэтому не вижу смысла выносить их отдельно, причем дата и текст, относящиеся к ней, должны быть в одном блоке, что-то вроде:
    <div class="item1">
        <div class="date">Дата</div>
        <div class="text">Текст</div>
    </div>
    <div class="item2">
        <div class="date">Дата</div>
        <div class="text">Текст</div>
    </div>

    как правильно разбивать сайт перед версткой

    Рекомендую при разметке сильно не обращать внимания на дизайн, а думать прежде всего о логике размещения элементов и только после разметки приступать к написанию стилей. Т.е. анализировать контент, что за чем идет (иерархия), какой тег соответствует тому или иному содержимому (семантика), элементы, которые неразрывно связано объединять в один блок и независящие друг от друга, наоборот, не объединять и т.д.

    Семантика или разметка со смыслом
    Семантика: что всё это значит
    Ответ написан
    Комментировать
  • Как правильно сверстать такой элемент?

    julia_amake
    @julia_amake
    Front-end разработчик
    можно так:
    <fieldset>
      <legend>About us</legend>
      <p>Lorem ipsum...</p>
    </fieldset >
    Ответ написан
    2 комментария
  • Как в input и textarea вставить иконку?

    julia_amake
    @julia_amake
    Front-end разработчик
    можно сделать иконку background-ом и задать padding размером с иконку, чтобы текст не наезжал
    Ответ написан
    3 комментария
  • Как убрать горизонтальный скролл в фиксированной верстке на мобиле?

    julia_amake
    @julia_amake
    Front-end разработчик
    Для неадаптивных страниц лучше использовать реальную ширину контента вместо width=device-width, попробуйте указать<meta name="viewport" content="width=1170">
    Ответ написан