Кексби. Промежуточное испытание. Застрял на 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

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