1

html

    <header>
    <section class="intro">
        <input type="radio" name="name" id="link1" checked>
        <input type="radio" name="name" id="link2">
        <input type="radio" name="name" id="link3">
        <input type="radio" name="name" id="link4">
        <input type="radio" name="name" id="link5">

        <section class="content">
            <section class="inner">
                <li class="home-page background">
                    <section class="home section-background">
                        <article>
                            <span class="logo"></span>
                            <span class="about">
                                <h1>megapolis studio</h1>
                                <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
                                <a class="read-more">Узнать больше</a>
                                <a class="callback">Позвоните мне</a>
                            </span>
                        </article>
                    </section>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </section>
        </section>

        <section class="radio-buttons">
            <label for="link1"></label>
            <label for="link2"></label>
            <label for="link3"></label>
            <label for="link4"></label>
            <label for="link5"></label>
        </section>
    </section>
</header>

css

.intro {
    position: relative;
}

.inner {
    width: 500%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}

.inner li {
    width: 20%; height: 100%;
    float: left; display: block;
    padding: 68px 0;
}

    /* Content section */


    /* Home page */

    .background {
        background-size: cover;
        background-position: center;
    }

    .section-background {
        float: right;
        width: 70%; height: 100%;
        background-color: rgba(17, 17, 17, .925);
    }

    .home-page {
        background-image: url(img-1.jpg);
    }

    /* Controls */

    /* Labels buttons */

    .radio-buttons {
        width: 20%;
        position: absolute;
        top: 68px; bottom: 68px; left: 0;
        background-color: rgba(17, 17, 17, .925);
    }

Проблема в контейнере с label. Отступ сверху есть, снизу не делает. У всех контейнеров оберток задана фиксированная высота и ширина 100%

1 ответ 1

1

Все у вас прекрасно работает. Просто у section.intro высота МЕНЬШЕ, чем нужно для размещения блока .radio-buttons (она определяется содержимым, спозиционированным не абсолютно, т.е., в данном случае кучкой радиокнопок). Поставьте section.intro высоту, например, 200px и понаблюдайте за поведением .radio-buttons.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.