Перенос main-menu вправо-вверх.

Здравствуйте. Вроде всё более-менее выходит, но вот этот элемент никаким образом не получается поставить на своё место. Всё время прилеплен к футеру. Паддинги и марджины тоже в данном случае не помогают.


Код:
/* Общие стили для документа и блоков, менять не надо */

body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
padding: 10px 20px 10px 20px;
background-color: #f5f5f5;
border: 2px solid #cccccc;
}

/* Собственные стили блоков */

.header {
min-height: 40px;
margin-bottom: 20px;
}

.logo {
float: left;
width: 100px;
text-align: center;
background-color: #333333;
color: #ffffff;
width: 230px;
font-weight: bold;
}

.contacts {
float: right;
width: 110px;
text-align: center;
background-color: #333333;
color: #ffffff;
font-style: italic;
}

.about-us {
margin-bottom: 10px;
width: 230px;

}

.about-us h1 {
font-size: 20px;
}

.about-us p {
font-size: 12px;
}

.main-menu {
width: 110px;
float: right;
}

.footer {
background-color: #333333;
color: #ffffff;
clear: both;
}

Все дело в блоке .about-us которому вы не задали float: left.

Спасибо.
По урокам курса и похожим темам на форуме, что-то натыкала, что 100% получилось, но так ничего и не поняла.
По той простой причине, что на этих самых уроках и курсах кое-чего не хватает. И очень. Не хватает списка свойств по данному курсу, которые стоит выучить, и объяснения этих свойств, особенно, если они потом должны использоваться в таком вот задании.
Что значит clear: both;? Откуда мне было знать, что его нужно поставить в данном задании, если о нём ничего не сказано, даже что оно значит?
Откуда мне было знать про flow, если его не было в “Теории”, а оно было в примере для исполнения, которые лично я не читаю, так как после кота думала, что там просто какой-то набор ничего не значащих слов, которые нужно оформить?
А эти самые font-style: italic; и font-weight: bold;? Откуда они вообще взялись? Их где-то описывали, задавали учить? Я бы В ЖИЗНИ не догадалась, если бы форум не почитала.
Очень непродуман данный момент. Крайне отрицательно сказывается на желании продолжать, так как просто руки опускаются(
Не спорю, может это было в предыдущих курсах, и я не нашла, но блин, я всю тетрадку перелистала, нет такого.
Что вы скажете? Это всё где-то есть, просто я не могу найти?
В любом случае, я данный курс плохо поняла, как-то сумбурно, путанно, и из 15 урока вообще ничего не вынесла. К чему тот clear, он меня вообще с толку сбил…

Знакомая ситуация. Я вам расскажу, откуда взялись неизвестные вам свойства в задании. Дело в том, что ученики, которые проходят курсы дальше, потом возвращаются к заданиям и совершенствуют свой код. И то, что для вас не знакомо, им уже известно.
Про float и clear будет рассказано в курсе “Сетки”, тогда вы все поймете.
А вообще, скорее всего предполагается, что кроме курсов htmlacademy у вас есть книга еще или вы пользуетесь справочником свойств с сайта webref.ru, к примеру.

2 лайка

Вот здесь все же есть немного об этом https://htmlacademy.ru/courses/41/run/4
С тем, чтобы в итоговом испытании присутствовало абсолютно незнакомое свойство, я не сталкивалась ни разу.

У меня вот так с селекторами было. Прошла курс еще раз, руки приподнялись)))

Установите дополнение для браузера htmlbook и будет вам счастье, и все тени сможете знать, не опускайте руки это же free курсы поэтому не договаривают, побольше самостоятельности и самообразования и все будет отлично;)

2 лайка

Ух ты, всем большое спасибо! Я же ж не знаю, что тут кем предполагается)) Буду знать)
По поводу самообразования у меня уже был плохой опыт. Пыталась записаться на платные курсы по вёрстке. Препедша занималась своими делами, а мне сказала за несколько дней пройти один сайт на 50 или 60 уроков основ html, и просто садила меня перед компом, открывала программу уже с CSS, что-то показывала, и говорила: Делай. А я как баран на новые ворота. Не всем такой подход подходит. Кому-то нужно всё по полочкам и структурированно. 4 или 5 раз я там побыла, да и забросила. Ну, здесь хоть ничто не поджимает) Буду пробовать что-то сама искать. Ещё ж советский подход в мозгах, шаг влево/вправо - расстрел, страх сделать ошибку…
Всем огромное СПАСИБО за советы и за терпение)

2 лайка

очень отлично расширение, спасибо за совет

Советую еще page ruler если он есть для браузера которым вы пользуетесь

1 лайк