Вернемся к вам. Чтобы не запутаться, предлагаю вам оставить в покое это название и написать вместо head в этом фрагменте header:
<div class="header">
<img src="img/head_font.jpg" alt="Шапка сайта" width="1100" height="90"> <!--фон шапки-->
<div class="header-logo">
<img src="img/logo.png" alt="Логотип сайта" width="325" height="89"> <!--лого-->
</div>
...
</div>
А сss-код поправить.
Но вопрос остается открытым. Где блок с классом adsens?
Далеко не всё, что делается - к лучшему)
Ага… Вот где он?)
Интересно… У меня не так отображается.
Но суть вот в чем. Блоки располагаются слева направо. Третьим по счету является adsens. Его ширина гораздо больше. чем оставшееся место в строке, поэтому он у вас съехал вниз. Попробуйте поменять блоки adsens и news местами…
А скажите, вы прошли курс “Сетки”?
нет еще 2 занятия до него.
Тогда понятно. О “распорках” вы еще не знаете. Пройдите курс “Сетки”, без распорок вы не выровняете ваши блоки.
Спасибо.
На данном уровне сносно получилось?
Ну, как вам сказать… Очень много повторений. Учитесь группировать одинаковые стили.
а есть возможность взять несколько классов и задать ему одно свойство
что то типо?
class-1, class-2, class-3… {
border: 5px;
}
или нужно добавить какой дополнительный класс?
Да, вы можете писать классы через запятую, но пользуйтесь этим способом, когда у вас несколько общих свойств, а не только одно.
каким именно я 2 примера привел.
Спасибо.
Вот что вышло в итоге.
www.m.aliop.ru
а тут код
See the Pen aliop by Alex (@marinex) on CodePen.
не знаю как в меню и в подвале сделать так что бы при наведении не изменялось позиционирование элементов.
и еще не знаю как сделать вот такой поиск
а слово поиск вам надо кнопкой или просто как placeholder?
Я хотел что бы это слово и было как бы кнопкой
создаете блок в него помещаете форму, создаете форму поиска, создаете кнопку с данным текстом, кнопку относительно позиционируете и ставите на данное место. Не забудьте задать padding внутри формы поиска чтоб вводимы текст не залезал под кнопку.
1 лайк
что то вроде этого?
search {
border: 1px solid #cccccc;
border-radius: 5px;
margin: 10px;
padding: 3px;
}