Кексби. Промежуточное испытание. Застрял на 2-м блоке


#48

Я решил сделать так:

8 блок
<div class="page-footer">
  <div class="footer-logo">
    <img src="img/logo.png" width="140" height="76" alt="Кваст">
  </div>

  <div class="footer-menu">
    <ul>
      <li><a href="#">История</a></li>
      <li><a href="#">Производство</a></li>
      <li><a href="#">Ассортимент</a></li>
      <li><a href="#">Где купить</a></li>
    </ul>
  </div>

  <div class="footer-social">
    <a class="social-btn" href="https://instagram.com/htmlacademy">Инстаграм</a>
    <a class="social-btn" href="https://facebook.com/htmlacademy">Фейсбук</a>
    <a class="social-btn" href="https://vk.com/htmlacademy">Вконтакте</a>
  </div>
  <p>При перепечатке материалов ссылка на сайт обязательна!</p>
  <div class="footer-copyright">
    <img src="img/htmlacademy.png" width="27" height="34" alt="HTML Academy">
    <b>Разработчик:</b>
    <a href="https://htmlacademy.ru">HTML Academy</a>
  </div>
</div>

Т.е. каждая логическая часть в своём блоке.
И блоки не вкладываются друг в друга…
В дальнейшем их проще будет размещать CSS.


#49

Спасибо огромное за совет!!!


#50

Подскажите в чем проблема. Жестко застрял. Не совпадает заголовок “Новинки” и дальше все съезжает. Почему так происходит? В других блоках (кроме 1-го и 8-го) схожая проблема. Вроде по разметке совпадает, но заголовок сразу мимо и весь блок красный:

    <div class="about-beer">
        <h2>Новинки</h2>
        <div class="beer-left">
            <h3>Вахтёр</h3>
            <table>
                <tr>
                    <td>Алк.</td>
                    <td>&lt; 1%</td>
                </tr>
                <tr>
                    <td>Ккал:</td>
                    <td>35</td>
                </tr>
            </table>
            <p>Ржаной хлеб, Вода, Солод, Соль</p><br>
            <img src="img/bottle-left.jpg" alt="Vahter">
            <p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
            <div class="item">
                <a href="#">Подробнее</a>
                <a href="#">Купить</a>
                <b>150 р.</b>
            </div>
        </div>
        <div class="beer-right">
            <h3>Романтик</h3>
            <table>
                <tr>
                    <td>Алк.</td>
                    <td>&lt; 0,5%</td>
                </tr>
                <tr>
                    <td>Ккал:</td>
                    <td>27</td>
                </tr>
            </table>    
                <p>Ячменный хлеб, Вода, Солод, Апельсин</p><br>
            <img src="img/bottle-right.jpg" alt="Romantic">
            <p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
            <div class="item">
                <a href="#">Подробнее</a>
                <a href="#">Купить</a>
                <b>90 р.</b>
            </div>
        </div>
    </div>


#51

Заголовок “Новинки” не сползает, ищите ошибку в предыдущем блоке.

Этот блок проверку проходит если убрать теги br.

<b>150 р.</b>   /* р. замените на заглавную Р. */
<b>90 р.</b>

<div class="beer-left">    
<div class="beer-right">

Этим блокам есть смысл присвоить одинаковое имя класса.


#52

предыдущий блок полностью принят системой. Объясните ктонить плиз, почему заголовок “Новинки” прилипает к верху и не сползает вниз? вот скан кода первого блока:

    <div class="ob-header">
        <img src="img/logo.png" alt="logo">
        <br>
        <ul>
            <li><a href="#">История</a></li>
            <li><a href="#">Производство</a></li>
            <li><a href="#">Ассортимент</a></li>
            <li><a href="#">Где купить</a></li>
        </ul>
        <p>Крафтовый квас<br> всему голова!</p>
    </div>


#53

У вас br в первом блоке. Его быть не должно.


#54

всем огромное спасибо!
мучился три дня. не понимал, что где и как я ошибся. вроде все сделал, как оно и должно быть, сравнивал с кодами с форума, а все красное и не бъет…
а потом смотрю, а у меня в шапке написано <!DOCTYPE>. Исправил на <!DOCTYPE html> и вуаля - всё сразу позеленело. ппц, ребята! будьте внимательней! :slight_smile:


#56

Здравствуйте! Помогите пожалуйста с 2 заданием!


#57

Расскажите подробнее о проблеме и различиях при проверке.


#58

Код не проходил проверку
Переписал код с нуля, проверку прошел, спасибо)


#59

Инеска, подскажите пожалуйста, а на основании чего понят что этот текст нужно обернуть в див? Я думаю это делается на стадии создания стилей, т.е, когда мы видим что тот или иной текст нам нужно как-то изменить мы добавляем к нему класс и меняем, может я не прав, поделитесь своим опытом, хоть кратко. Заранее благодарен!


#60

Какой именно текст вы имеете в виду?


#61

Я имею ввиду код, сам код который указан выше, т.к. у меня и без дивов все сходиться с макетом.


#62

Покажите свой код.


#64
<html>
  <head>
    <meta charset="utf-8">
    <title>Кваст</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="page-header">
      <div class="header-top">
        <div class="header-logo">
         <img src="img/logo.png">
       </div>
      <ul>
        <li><a href="#">История</a></li>
        <li><a href="#">Производство</a></li>
        <li><a href="#">Ассортимент</a></li>
        <li><a href="#">Где купить</a></li>
      </ul>
       <div class="promo"> 
        <p>Крафтовый квас <br> всему голова!</p>
      </div>
    </div>
  </div>
    <div class="novelty">
      <h2>Новинки</h2>
      <div class="catalog-item">
        <h3>Вахтёр</h3>
        <div class="structure">
        <table>
          <tr>
            <td>Алк.</td>
            <td>&lt; 1%</td>
          </tr>
          <tr>
            <td>Ккал:</td>
            <td>35</td>
          </tr>
        </table>
          <p>Ржаной хлеб, Вода, Солод, Соль</p>
        <img src="img/bottle-left.jpg" alt="Вахтёр">
      </div>
      <div class="description">
        <p>Терпкий и мощный, вкус этого кваса взбодрит после тяжёлого дня и придаст сил для вечерних приключений!</p>
        <a class="btn" href="#">Подробнее</a>
        <a class="btn" href="#">Купить</a>
        <b>150 Р.</b>
      </div>
    </div>
    <div class="catalog-item">
      <h3>Романтик</h3>
      <div class="structure">
      <table>
        <tr>
          <td>Алк.</td>
          <td>&lt; 0,5%</td>
        </tr>
        <tr>
          <td>Ккал:</td>
          <td>27</td>
        </tr>
      </table>
        <p>Ячменный хлеб, Вода, Солод, Апельсин</p>
      <img src="img/bottle-right.jpg" alt="Романтик">
    </div>
    <div class="description">
      <p>Лёгкий и освежающий напиток поможет сохранять отличное настроение в течение всего дня.</p>
      <a class="btn" href="#">Подробнее</a>
      <a class="btn" href="#">Купить</a>
      <b>90 Р.</b>
    </div>
  </div>
</div>
  <div class="advantage">
    <ul>
      <li class="advantage-1">
        <h2>Варим сами</h2>
        <p>Вот этими самыми руками. Экспериментируем и творим, что хотим.</p>
      </li>
      <li class="advantage-2">
        <h2>Своё, родное</h2>
        <p>Не заработка ради, а импортозамещения для. Поднимаем производство.</p>
      </li>
      <li class="advantage-3">
        <h2>Не экономим</h2>
        <p>Человек это то, что он ест и пьет. У нас только качественные ингредиенты.</p>
      </li>
    </ul>
  </div>
  <div class="history">
    <h2>Немного истории</h2>
    <dl>
      <dt>
        <h3>Происхождение кваса</h3>
        <i>Источник:</i> <a target="_blank" href="#">ru.wikipedia.org</a>
      </dt>
      <dd>
        <img src="img/wiki-1.png" alt="Происхождение кваса">
        <p>Квас на Руси появился в X-XI веке. Само слово «квас» тоже имеет древнерусское происхождение. Помимо России квас готовят в Белоруссии, Сербии, Македонии, Словакии и многих других странах, но называется он везде одинаково — квас.</p>
      </dd>
      <dt>
        <h3>Классификация кваса</h3>
        <i>Источник:</i> <a target="_blank" href="#">ru.wikipedia.org</a>
      </dt>
      <dd>
        <img src="img/wiki-2.png" alt="Классификация кваса">
        <p>По российскому ГОСТу для промышленного изготовления — это напиток с объёмной долей этилового спирта не более 1,2%, изготовленный в результате незавершённого спиртового и молочнокислого брожения сусла.</p>
      </dd>
  </dl>
  </div>
  <div class="press">
    <h2>Пресса о нас</h2>
    <div class="press-list">
      <blockquote class="press-item">
        <p>Сегодня мы провели дегустацию чего-то действительно новенького — крафтового кваса. Да, да, вы не ослышались! Спасибо Арсену и Руслану за то, что предоставили целую бочку своего напитка!</p>
        <cite>Газета столичный Стольник</cite>
        <a class="btn" href="#" title="Посмотреть вcю статью">Читать далее</a>
      </blockquote>
  </div>
</div>
  <div class="assortment">
    <h2>Ассортимент</h2>
    <table class="assortment-table">
      <tr>
        <th>Название</th>
        <th>Алк.</th>
        <th>Ккал</th>
        <th>Объём</th>
        <th>Стоимость</th>
      </tr>
      <tr>
        <td>Классика</td>
        <td>&lt; 1,2%</td>
        <td>33</td>
        <td>330 мл</td>
        <td>120 Р.</td>
      </tr>
      <tr>
        <td>Шабаш</td>
        <td>&gt; 1,2%</td>
        <td>45</td>
        <td>330 мл</td>
        <td>250 Р.</td>
      </tr>
      <tr>
        <td>Вахтёр <sup>Новинка</sup></td>
        <td>&lt; 1%</td>
        <td>35</td>
        <td>0,5 л</td>
        <td>150 Р.</td>
      </tr>
      <tr>
        <td>Романтик <sup>Новинка</sup></td>
        <td>&lt; 0,5%</td>
        <td>27</td>
        <td>0,5 л</td>
        <td>90 Р.</td>
      </tr>
    </table>
  </div>
  <div class="order">
    <h2>Заказать</h2>
      <p class="order-text">Не ждите пока нас отрекламируют, как Вятский квас, и мы поднимем цены! Закажите настоящий крафтовый квас сейчас. При заказе от 10 баррелей — скидка 10%.</p>
      <form class="order-form" action="/keksby-mail" method="post">
        <div class="order-form-group">
          <label for="fullname">Представьтесь:</label>
          <input type="text" name="fullname" id="fullname">
        </div>
        <div class="order-form-group">
          <label for="tel">Номер телефона:</label>
          <input type="tel" name="tel" id="tel">
        </div>
        <div class="order-form-group">
          <label for="tel-2">Доп. номер:</label>
          <input type="tel" name="tel-2" id="tel-2">
        </div>
        <div class="order-form-group">
          <label for="email">Email:</label>
          <input type="email" name="email" id="email">
        </div>
        <div class="order-form-group">
          <label for="volume">Объем заказа:
            <select name="volume" id="volume">
              <option value="1" selected>От 5 до 10 баррелей в неделю</option>
              <option value="2">От10 до15 баррелей в неделю</option>
              <option value="3">От15 до20 баррелей в неделю</option>
            </select></label>
        </div>
          <label for="comment">Доп. комментарий:
            <textarea name="comment" id="comment" rows="10" cols="96">
            </textarea>
          </label>
          <div class="checkbox-area">
          <input type="checkbox" name="checkbox" id="checkbox">
          <label for="checkbox">Я согласен получать квасную рассылку</label>
        </div>
        <input type="submit" value="Отправить заказ">
      </form>
      </div>
      <div class="page-footer">
        <div class="footer-top">
          <div class="footer-logo">
           <img src="img/logo.png">
         </div>
        <ul>
          <li><a href="#">История</a></li>
          <li><a href="#">Производство</a></li>
          <li><a href="#">Ассортимент</a></li>
          <li><a href="#">Где купить</a></li>
        </ul>
        </div>
        <div class="footer-social">
          <a class="social-btn" href="https://instagram.com/htmlacademy">Инстаграм</a>
          <a class="social-btn" href="https://facebook.com/htmlacademy">Фейсбук</a>
          <a class="social-btn" href="https://vk.com/htmlacademy">Вконтакте</a>
        </div>
        <div class="promo">
          <p>При перепечатке материалов ссылка на сайт обязательна!</p>
        </div>
        <div class="footer-logo-bottom">
         <img src="img/htmlacademy.png">
         <span class="heart"><b>Разработчик:</b></span> <a href="https://htmlacademy.ru">HTML Academy</a>
       </div>
    </div>
  </div>
  </body>
</html>

#65

Ваш код с дивами как раз.


#66

Они у меня правильно расставлены? Хм, ладно, тогда вопрос отменяется.


#67

Здесь div-оберка лишний, и div.header-top лучше закрыть до div.promo.


#68

:+1::+1: Спасибо огромное, проходил дальше, не видел ответа!