Crios


#1

Помощь нужна по макету из рассылки 59 crios.


#2

Задавайте вопросы. Покажите, что уже сделано, через песочницу или gihub pages.


#3


Правильно ли я оформил лого? Не понимаю как сделать его на половину. И посмотрите на флоаты. есть ли ошибки?


Подскажите ресурс, где можно решать HTML и CSS задачи.
#4

Добавьте еще изображение макета, чтобы я могла понимать, чего вы хотели добиться.


#5


#6

Я бы посоветовала вам использовать абсолютное позиционирование для логотипа. С помощью отрицательной координаты top вы сможете спрятать лишнюю часть круга.
Тогда для меню и поиска вы сможете оставить флоаты и не понадобятся некрасивые отступы в 200px.
Вот так будет:

.header-top {
    height: 250px;
    position: relative; 
}
.menu {
    float: left;
   /* margin-top: 208px;*/
}
.logo {
    width: 414px;
    height: 414px;
    box-shadow: 0 0 65px rgba(218, 229, 239, 0.55);
    background-color: white;
    border-radius: 50%;
    border: 2px solid;
    /*margin: 0 auto;*/
    position: absolute;
    transform: translateX(-50%); // горизонтальная центровка
    left: 50%; // горизонтальная центровка
    top: -250px; // или меньше - смотря какую точно часть нужно скрыть
}
.search {
    float: right;
    /*margin-top: -211px;*/
}

Также при использовании флоатов не забудьте добавить распорку clearfix.


#7

Распорка на .header-top должна стоять?


#8

Да, распорка вешается на ближайший родительский элемент - в данном случае .header-top.


#9

Большое вам спасибо за помощь)


#10

https://codepen.io/kim3333/pen/MLGWPp

Здравствуйте. Можете дать обратную связь по этому блоку.


#11

@Hierumo, глянь пожалуйста. Нет ноута сегодня с собой.


#12

соре, сам с телефона =)


#13

А почему у вас половина сетки на флоатах, а половина - на флексах? Вы что-нибудь одно выбирайте, и лучше уж флексы.


#14

О том, почему фиксированная высота блоков не есть хорошо https://isqua.ru/blog/2016/06/19/crash-test-viorstki/


#15

Ну и, конечно, в данном случае очень спорный момент, но мне кажется, что в разделе, который вы озаглавили как About, картинки планируются как иллюстрации к тексту справа/слева и поэтому это контентные изображения, а не фоновые, и размечаться должны тегом <img>


#16

Спасибо за обратку. Буду исправлять.