Позиционирование боковой панели и статьи под панелью навигации с HTML и CSS - PullRequest
Новая
       28

Позиционирование боковой панели и статьи под панелью навигации с HTML и CSS

0 голосов
/ 09 ноября 2018

с этим HTML-кодом: 

    <header>
        <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>
    </header>

    <main>
        <nav>
            <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>
        </nav>

        <article>
            <section>
                <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>
            </section>

            <section>
                <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>
            </section>

            <section>
                <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>
            </section>

            <section>
                <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>
            </section>

            <section>
                <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>
            </section>
        </article>
    </main>

    <footer>
        <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>
    </footer>

Я пытаюсь написать CSS для этого:

  • один фиксированный navbar сверху (уже нормально)
  • основная область с боковой панелью и областью «артикула» (необходимо зафиксировать положение и выравнивание ее частей)
  • область статьи должна быть расположена ближе к боковой панели, но сейчас она отображается внизу.
  • отображается какой-то странный баннер (только если курсор мыши не наведен на него), например, здесь:

https://jsfiddle.net/klebermo/5axmocwp/1/

Кто-нибудь может дать несколько советов, как это исправить?

1 Ответ

0 голосов
/ 09 ноября 2018

Может быть, это то, что вы хотите? Я только изменить это в CSS: 

main {
  margin-top: 32px;

  /* below lines was added */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;

  /* below line was added */
  height: 50px;
}

Вот пример . Я использую flexbox в этом решении - отличный учебник по этому вопросу ЗДЕСЬ - однако вы также можете использовать еще лучший инструмент для макетов: GRID .

Предложение : используйте атрибут класса в html, а затем используйте это имя класса в css - использование прямых имен тегов html в css не рекомендуется - по возможности избегайте его

...