Испытание 2 - Слайдер

Курсы Завершающие испытания
1

Испытание прошёл на 100%, но в силу некоторой “криворукости” решение получилось не очень хорошее. Разработчики утверждают, все отступы кратны 5, чего мне добиться не удалось. Поэтому прошу знающих людей, подскажите более оптимальный вариант кода без ловли пикселей. Вот мой код

2

К сожалению без позиционирования нельзя сделать в этом задании 100% и кратно 5.
Вот мое решение:

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание 2: слайдер</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="wrapper">
            <div class="slide">
                <h1>Долго, дорого, скрупулезно</h1>
                <p>Математически выверенный дизайн для вашего сайта или мобильного приложения.</p>
                <a class="button">Узнать больше</a>
            </div>
            <div class="navigation">
                <a href="" class="active"></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </div>
    </body>
</html>

И CSS:

html,body{
    margin:0;
    padding:0;
}
body{
    width:500px;
    height:300px;
    font-size:16px;
    font-family:"Tahoma", sans-serif;
    line-height:20px;
    color:black;
    background:#eeeeee;
}
.wrapper {
    padding:40px 20px 0;
    background:url(/assets/ifmo/slide-bg.png) no-repeat 280px 50%;
    height:300px;
    box-sizing:border-box;
}
.wrapper .slide {max-width:260px;}
h1 {
    font-size:25px;
    line-height:25px;
    margin:0;
}
/* Этого достаточно, чтобы пройти испытание =) Дальше перфекционизация*/
.button {
    display:block;
    text-align:center;
    margin-top:25px;
    height:40px;
    line-height:40px;
    width:200px;
    font-size:15px;
    text-transform:uppercase;
    color:#fff;
    background:#fb565a;
    border-radius: 5px;
}
.navigation {
    width:75px;
    margin:29px 205px 0 ;
}
.navigation:after{content:'';clear:both;display:table;}
.navigation a {
    width:15px;
    height:15px;
    background:#666;
    float:left;
    border-radius:50%;
    position:relative;
    margin-right:10px;
    padding:0;
}
.navigation a.active:after {
    content:'';
    position:absolute;
    top:5px;
    left:5px;
    width:5px;
    height:5px;
    border-radius:inherit;
    background:#fff;
}

Пытался сделать кратно 5 максимально чисто - не вышло(получил верхний маргин = 29 у “панели навигации”, спросил @juwain’a он раскрыл секрет, что там сделано через абсолют.

Не очень я люблю такое решение, но что поделать, не всегда кратность 5 достигается логически =(

Получилось позиционированием .navigation абсолют, относительно .slide с отступами: слева 205, снизу 25

3

По факту: нет какого-то эталонного решения, все на Ваше усмотрение!
Но лично мой совет - старайтесь избегать позиционирования, где явно можно обойтись и без него)

4

А что, есть какой-то подвох при использовании позиционирования?

5

Злоупотреблять им не стоит однозначно, по возможности использовать для позиционирования :before. :after относительно своего родителя (как правило это небольшие области).
Лично я стараюсь использовать absolute только там, где без него ни как не обойтись.
Иконки на кнопках, если они сделаны в спрайте.
Обводки какие-то, подсветки, выделение да и в целом в тех местах, которые вряд-ли подвергнутся модификациям дальнейшим. Что касается слайдера, Может здесь и уместно, но в данном курсе Я бы тогда сделал еще парочку уловок, чтобы посишн абсолют был уместен для навигации по слайдам.

Это всего-лишь совет.But You Can Do Whatever The Fuck You Wanna Do!!!

1 лайк
6

Тоже весьма криво набрал 100%, кратности 5 не получилось достичь сразу в нескольких местах, пока ломал голову над этим, неожиданно придумал интересное решение с переключателем))

<div class="tuner">
                <a class="active" href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>


.tuner {
    width: 70px;
    height: 20px;
    padding: 39px 0 0 20px;
    margin: 0 auto;
}

.tuner a {
    background: #666;
    height: 15px;
    width: 15px;
    display: inline-block;
    border-radius: 10px;
    margin-right: 5px;

}

.tuner a.active {
    height: 5px;
    width: 5px;
    border: 5px solid #666;
    background: #fff;
}

а почему нет?))

7

Почему, когда я задаю ширину P, то пропадает изображение???0_о

8

Скиньте код вашего решения, по опсианию не совсем понятно, в чём дело.