Recommended Posts

для верхнего слайдера со скроллом можно использовать jQuery UI ? или принципиально только на jQuery нужно все написать?

Share this post


Link to post
Share on other sites

Вообще можно, но я бы рекомендовал использовать что-то более тематичное. Slick slider, на приимер

Share this post


Link to post
Share on other sites
7 часов назад, klierik сказал:

Вообще можно, но я бы рекомендовал использовать что-то более тематичное. Slick slider, на приимер

там же нет бегунка прокрутки, там только точки

Share this post


Link to post
Share on other sites
1 минуту назад, tripjunkie сказал:

там же нет бегунка прокрутки, там только точки

Не понимаю в чем проблема отобразить точки полочками симулирую скроллбар? А профит использования одного плагина в том что надо подключать меньше ресурсов.

Share this post


Link to post
Share on other sites
10 минут назад, klierik сказал:

Не понимаю в чем проблема отобразить точки полочками симулирую скроллбар? А профит использования одного плагина в том что надо подключать меньше ресурсов.

так а как же перетаскивание скроллбара зажатой клавишей мыши? точками это тоже реализуемо?

Share this post


Link to post
Share on other sites
13 минуты назад, klierik сказал:

Не понимаю в чем проблема отобразить точки полочками симулирую скроллбар? А профит использования одного плагина в том что надо подключать меньше ресурсов.

Проблема в выборе велосипеда, если уж берешь чужой интрумент, то надо его выбирать так, чтобы он максимально подходил под твою задачу.

По сабжу, я бы на твоем месте выбрал самый сложный путь, написал бы сам, это реально будет не очень просто и думаю долго (хотя хз какой у тебя уровень), подтянешь js, я же так понимаю это одна из целей, иначе зачем ты делаешь это задание.

Share this post


Link to post
Share on other sites
4 минуты назад, tripjunkie сказал:

так а как же перетаскивание скроллбара зажатой клавишей мыши? точками это тоже реализуемо?

Смотря что именно ты хочешь реализовать. В ТЗ не сказано что колонки требуется скролить скроллбаром, но ты волен усложнять задачу как хочешь, в рамках обучения.

В реальных условиях ответственность за выполнение задачи и пользование плагинов ты возьмешь на себя.

Share this post


Link to post
Share on other sites

Приветствую. 

Сделал этот сайт. 

До этого никогда не верстал ничего крупнее примеров.

Не сделал модальное окно с конвертом и тд(сначала забыл, а теперь лень)

При первоначальном построении структуры html, я не учёл то, что придется писать скрипты - поэтому там есть некоторые странные обёртки и блоки(да, и там странные названия в одном из js - я на кошка тренировался :) ).

Не очень понимаю как делать адаптивную верстку. Там на сайте есть, но для планшетов(я думаю, что для планшетов). Мобильную версию не сделал. 

Написал скрипты на чистом js чтоб разобраться получше. К сожалению, сжал js файл для основного слайдера и исходников не сохранил(каюсь).

Есть проблема, с которой я сталкиваюсь не первый раз, но не могу понять её суть: если кликать на пункте меню слайдера, то через transition список товаров движется вправо\влево ПЛАВНО. Но при первом клике просто срабатывает скрипт и всё резко перескакивает. после второго клика уже всё плавно и аккуратно. ПОЧЕМУ ТАК?! Такая же проблема наблюдалась в 4-х столбовом слайдере и я решил написать анимацию на чистом js. 

https://lnf353.github.io/

архив с scss и js

Возможно, эта тема мёртвая, но я всё равно получил много удовольствия за вёрсткой этого макета. 

Спасибо. 

splat.zip

Share this post


Link to post
Share on other sites

@METENC,

Рекомендую начать от сюда: Типичные ошибки начинающего верстальщика

20 часов назад, METENC сказал:

Но при первом клике просто срабатывает скрипт и всё резко перескакивает. после второго клика уже всё плавно и аккуратно.

не смог повторить. у меня вполне нормально работает.

Share this post


Link to post
Share on other sites

Добавил размеры в тег img - вопрос: что делать, если при адаптивной вёрстке мне нужно менять размеры этих изображений? В css это решается просто, но как быть тут? Скриптом писать в html? Или как нужно поступать? 

Поправил nav.

Поправил ID.

Валидатор ругается на отсутствие заголовка в article. Так ли это критично? По логике, почему статья не может быть без заголовка, собственно? 

Могли бы вы указать места, на которые стоит обратить внимание?

У меня ни на одном устройстве, браузере, сервере не работает transition с первого клика по меню. У вас точно меню плавно ползёт с первого клика? 

Спасибо.

splatpng.png

Share this post


Link to post
Share on other sites
1 час назад, METENC сказал:

Добавил размеры в тег img - вопрос: что делать, если при адаптивной вёрстке мне нужно менять размеры этих изображений? В css это решается просто, но как быть тут? Скриптом писать в html? Или как нужно поступать?

Я не понял что подразумевается. Менять размер картинки позволяет css. А вот грузить картинку соответствующего размера под соответствующую ширину экрана позволит https://webref.ru/html/picture

Share this post


Link to post
Share on other sites
17 часов назад, METENC сказал:

У меня ни на одном устройстве, браузере, сервере не работает transition с первого клика по меню. У вас точно меню плавно ползёт с первого клика? 

.goods-name__text {
    line-height: 70px;
    float: left;
    padding: 0 25px;
    font-size: 21px;
    transition: all .5s; /* данное правило следует установить по умолчанию, а не после того как ожидается его применение */
}

 

Share this post


Link to post
Share on other sites

При клике на меню, срабатывает скрипт, который пишет в список ul margin-left. Не работало с первого клика, т.к. не был задан никакой margin для блока и transition, видимо, не знал на что ему реагировать с первого клика. Но после клика margin-left появлялся и уже начинал работать так, как было задумано. Просто добавил вертикальный margin = 0 и всё стало работать.

 

Есть какие-то критические неправильные моменты в моей верстке, на которые стоит обратить внимание и изменить подход?  

Спасибо. 

Share this post


Link to post
Share on other sites

@METENC,

расти есть куда, но времени на объяснение ошибок у меня нет . на текущий момент, в целом, — не плохо

Share this post


Link to post
Share on other sites

Хорошо, спасибо за помощь. Буду учиться, может к макету десятому будет выходить лучше.

Share this post


Link to post
Share on other sites

Хочу спросить у Гуру, помогите начать.  В общем решил я взяться за этот макет. Grunt я не стал изучать, мне больше понравился Gulp. Настроил его, всё классно работает! Установил я приложение pixel perfect(решил сделать согласно ТЗ) и тут меня постигло разочарование. Мой жалкий монитор в 1280х1024px в браузере добавляет прокрутку так, как ширина исходника 1440.

Что делать? Уменьшить размер макета до 1280px и нормально верстать в pixel perfect или как?  

Share this post


Link to post
Share on other sites
В 10/27/2017 в 09:45, nightgremlin сказал:

Что делать? Уменьшить размер макета до 1280px и нормально верстать в pixel perfect или как?  

А если обрезать макет по бокам?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
    • By artaka
      Работаю верстальщиком за небольшую плату (100-300руб в зависимости от работы) Связь со мной : 
      VK vk.com/artakagrand
      Telegram @artakagrand
      email fefsert@gmail.com
      Примеры работ:
      http://teslamodelx.epizy.com
      http://teslamodelx.epizy.com/infoblog/index.html
      http://teslamodelx.epizy.com/blog/index.php
  • Member Statistics

    46,298
    Total Members
    3,128
    Most Online
    Govt_sm80
    Newest Member
    Govt_sm80
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <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>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors