Изучение CSS/CSS3 | #10 - Позиционирование блоков в CSS + создание небольшого веб сайта 

Этот курс уже устарел, поэтому я сделал новый 🔥 Смотрите обновленный курс здесь: ru-vid.com/group/PLDyJYA6aTY1meZ3d08sRILB46OJ-wojF2

ААААААА. минут 20 думал почему у меня футер и хидер криво лежат. уже полностью код переписал как в видео. пробема оказалась в том, что width должен выглядеть так width: calc(100% - 20px); , а не так calc(100%-20px);. люди, следите за пробелами. Гоша, ты меня расстраиваешь. даже такие мелочи надо объяснять новичкам.

Это сложно объяснить, я думаю вы поняли, а если вы не поняли то когда нибудь поймете)))

20:20, так вот оказывается как делают эти гребаные раздражающие рекламные блоки.

с увереностю скажу что это был сложный видеоурок даже для Гоши😂

Проблема с позиционированием блоков , после написания float: left; ничего не меняется

спасибо,бро)) ты мой второй наставник(первый хауди) я даже и не думал,что ещё кто-нибудь может так клёво объяснять. спасиб большое

Спасибо огромное, пришлось посмотреть 2 раза но зато материал усваивается на отлично именно то что искал, основы языка чтобы иметь знания как правильно начать писать книгу)

Спасибо, Георгий! Все запоминается на ура, уроки очень понятные, прямо на лету схватываю. Лайк!

У меня у одного не получается позицирование блоков через float подскажите как позицировать блоки?

Прекрасный урок! Спасибо! Вы мне помогли.

Спасибо, Гоша! За урок!

Гоша спасибо но этот урок напоминал сцену- брюки преврашаются, превращаются... и если бы не комментарии ниже то флойтинг не получился бы и у меня. Спасибо кто написал. Дай вам Бог здоровья

Спасибо от души !

Спасибо большое! Ты очень крутой !

гоша спасибо тебе я не знал как позиционировать блоки теперь знаю

Спасибо Вам!!!)

Благодарю!

Лайк за shift+tab)

Честно говоря, про свойство float рассказано невнятно.

Гоша ты ТОП!

когда пишешь article,aside {float:left;}, а также {float:left;} на header и footer, у меня все равно слетали блоки. Потом исправил след.образом:article,aside {float:left;} footer{clear:both;}, а {float:left;} на header и footer совсем убрал. Незнаю почему так. Но у меня только так не съезжал блок footer.

Круто!

18:40 "классно объяснил" )

Спасибо!

Спасибо за полезную информацию. Я поняла позиционирование. Кроме абсолютного блока, а в нем относительный. Это попробовала сама, но смысла не поняла

вот этому никто дельно не учит , все корявят понты . Мне понравилось как ты этой обьяснил , спасибо!

Спасибо за твой труд. Один вопрос, ты учился печатать на английском , ну чтоб было легче для работы или сам по ходу научился, своим способом?

Все круто!!!

Обожаю))

Вы не затронули еще одну маленькую, но очень важную тему transform:rotate

Привет, а правильно ли будет позиционировать каждый блок относительно документа ? кроме низа и шапки.

За 20 мин Вы научили меня всему, чего я так хотел узнать и все что скрывалось под подводным камнем CSS, спасибо Вам!

спасибо за инфу

Respect !

Странно, вы указали доктайп html5, но всё так же используете косую черту в конце одиночного тега и атрибуты, такие как type="text/css".

...А я чуть не пошел искать ролики о том как не допускать волю нервам чтоб утешиться от разстройства

Спасибо

В принципе все получилось, однако есть вопрос: почему когда мы вначале для всего документа задаем * { margin=0;}, то это все равно не мешает нам задавать отступы в article и aside {margin-top:10px. margin-left:5px, margin-right:5px}?? ведь мы же как бы задали значение для всего документа...

никто: абсолютно никто: Гоша в видеоуроке: "артайкл"

самый полезный видео-урок из всех остальных

не очень понял, почему про указании padding в идентификаторе headblock появляется отступ для краев блока? padding же отступ для текста внутри блока, а не для краев блока.

привет всем и тебе гоша мне 13 лет я хочу занятся програмированием смотрю тебя уже 2 месяца уже просматрел все уроки html очень хороший канал у тебя надеюсь канал останется в ютубе много лет я хочу сказать что ты помогаешь сбытся моей мечте!!! надеюсь ты это прочитаешь

У меня через header,article,aside,footer-не выходит,если писать через дивы с ИД это будет ошибкой? вот пример: * { background-color:yellow; } #header { width:calc(100% - 20px); height: 30px; background-color: #fff; border-bottom: 2px solid silver; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; float: left; font-family: Comic Sans MS; } #article, #aside { background-color: #fafafa; height:350px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box; } #article { width: 60%; margin-left: 5%; margin-right: 5%; float:left;} #aside { width: 30%; float:left;} #footer { width:calc(100% - 20px); height: 50px; float: left; margin-top: 20px; background-color: #fff; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; }

thanks !

13:41 разве команда не сработала не по той причине что сайт читает команды сверху вниз(ты сам это в предыдущих видео говорил), а до этого стоит общее значение "float: left;"

Если вы не поняли, это не важно, потом поймете)) Если example будет больше размером, будет вылазить за границы. Нужно было добить уже этот косяк как и другие. Много оставляешь вопросов после себя, напоминает кадр из фильма "И брюки превращаются..."

Как только прописываю float:left; для article,aside у меня footer тоже принимает такое значение.сто раз проверял,даже отдельно для footer ставил float:none; ,но он все равно отображает footer на одной линии с article,aside.Что делать?Помогите.(100% - 5px) с пробелами прописал.

Здравствуйте, у меня проблема с кодом. footer налаживается на header, хотя вроде все сделано как на видео header {float: left; width: calc(100% - 20px); height: 50px; background-color: #fff; border-bottom: 2px solid silver; padding: 10px; font-size: 1.2em; color#333; font-family: Comic Sans MS; clear: right} article, aside {float: left; margin-top: 20px; background-color: fafafa; height: 400px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box} article {width: 60%; margin-left: 5%; margin-right: 5%} aside {width: 25%} footer {footer: left; width: calc(100% - 40px); height: 50px; background-color: #fff; border-top: 2px solid silver; margin: 20px; padding: 10px; font-size: 1.2em; color#333; font-family: Comic Sans MS}

Я хотел посмотреть что будет если хром открепить (то есть выйти из полноэкранного режима), и когда пробовал изменить размер границы хрома то размер блоков на сайте то же подстраивается под размер окна. как это исправить?

можно пользоваться position вместо float?

как говорил Майкл Розен: Nice!

А как сделать чтобы футер был подогнан по размеру вниз, аналогично хэдеру? Т.е. Хедер четко вверху, футер четко внизу

Я article и aside сделал через div :С Почему у меня по бокам по 8 пикселей, в которые не помещают в себя боксы :С

header{ width: calc(100%-20px); height: 50px; background-color: #fff; border-bottom: 2px solid silver; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; } article, aside { background-color: #fafafa; height:400px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box; } article { width: 60%; margin-left: 5%; margin-right: 5%;} aside { width: 30%;} footer { width: calc(100%-20px); height: 50px; margin-top: 20px; background-color: #fff; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; }

спасибо, на 18:40 помог

при написании во header и footer ширину с calc 100%-20% блоки квадратиками, article и aside один находиться сзади, а другой спереди, то есть наложились друг на друга, исправьте пожалуйста!

спасибо за толковые уроки

Это дело надо обмыть

гоша ты расскажи если после color: поставить \ color: red\

У меня получилось.Все сделал так как у автора,кроме того что: float:left не вставил в шапку.и все заработало.

Расскажи что такое Float и с чем его едят????

Делаю всё то же самое, но почему-то блоки header и footer, как и вся картинка сайта уезжает за боковые пределы монитора. И когда двигаю мышкой влево, слова "шапка" и "футер" в блоках уезжают за левую границу монитора. Народ, подскажите, в чём дело и как это исправить?

Почему пединг добавляет отступ по ширене? он же должен делать отступ внутри блока.

Добрый день! Из за того что я прописываю в стилях calc (100%-20px); у меня летят все блоки... ставлю просто 100% и нормально отображается, единственное что остается горизонтальная прокрутка. Остальной код идентичен... как можно решить данный вопрос, всем заранее спасибо...

Как быстро код закомментировал на 6.37?

Почему у меня не работают эти теги как на видео header, article, footer, aside?

при увелечения сайта position:absolute; терйайит свое место. почему так присходит. у родитела position:releative; стоит? кто знаеть помогите

Уважаемый автор.... Вопрос на миллион долларов... Все эти технологии создания сайтов уместны в 2017 году и будут ли востребованы в ближайшие лет пять?

курс интересный, спасибо автору! получила для себя что-то новое!) но пожалуйста исправьте английское произношение, например артайкл, хидер и многое другое, ведь кто-то будет так потом говорить!)

Подскажите в чём проблема? Я вписываю в header float: left; в footer тоже самое и в article, aside. Но делается какая-то каша. Помогите Вот код... header{ width: calc (100% 20px); height: 50px; background-color: #fff; border-bottom: 2px solid silver; border-top: 2px solid silver; padding: 10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; } article, aside { background-color: #fafafa; height: 400px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box; margin-top: 20px; } article{ width: 60%; margin-right: 5%; margin-left: 5%; } aside{ width: 30%; } footer { width: calc (100% 20px); height: 50px; margin-top: 20px; background-color: #fff; border-top: 2px solid silver; padding: 10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; } Спасибо если что за ответ

Один раз вас поправлю на счет article и aside, странно было слышать, что они в сумме не должны превышать 100%, это не так, они не зависят друг от друга, они зависят от самих себя, иначе сбой в логике, тогда все должно пойти наперекосяк, если зависят от друг друга.

Подскажите пожалуйста в чём проблема header{ width: calc(100%-20px); height: 50px; background-color: #fff; border-bottom: 2px solid silver; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; } article, aside { background-color: #fafafa; height:400px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box; } footer { width: calc(100%-20px); height: 50px; margin-top: 20px; background-color: #fff; border-top: 2px solid silver; padding:10px; font-size: 1.2em; color: #333; font-family: Comic Sans MS; }

пишем стили Шапка Тело сайта, содержание сайта блок с боку Подвал

Ну вы даете, а теперь сверните и поиграйтесь размерами окна просмотра и посмотрите на свои плавающие блоки, как бы про это тоже нужно рассказывать.

18.01.2019 Свойство "calc" не работало в гугл хром(обновлённый),в яндексе всё получилось

Я делал всё как автор и получилась полная каша, но после того как я убрал float из header и footer, всё встало на свои места. Может кто объяснить в чём причина?

артайкл :)

Ничего не отображается.Писал код через notepad++ дошло до того что тупо пересмотрел все видосы и под копирку списал все,ничего не работает.С HTML проблем нет,а вот с CSS вообще беда.Ребят может в настройках что то нужно сделать?Кто в курсе,подскажите!

Гоша, почему у меня текст, в блоке article тем же цветом что и фон сайта? * { background: #0C8629; margin: 0; padding:0; text-decoration:none; } #header {color: red} h3.style { color:yellow;} p.style{background-color: #EC0856;} p#exemple:first-letter { color: #092BF0;} p#exemple:first-line { color: #11EEB4;} .href: {color: #8CD41E;} .href:hover {color: #F4071D;} .href:active {color: #F7EE07;} p:hover {background-color: #0B25BC;} #textstyles {background-color:#0C8629; } p { text-indent: 1.1em; } #textstyles { font-size:1.1em; font-weight: normal; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", sans-serif ; text-align: left; text-transform: capitalize; line-height: 30px; } #textstyles span{text-transform: none;} header { width:calcl(100% - 20px); height:50px; background-color:#fff; border-bottom:2px solid silver; padding:10px; font-size:1.2em; color:#333; font-family:Comic Sans MS; } article, aside { background-color:#fafafa; height:400px; border-radius: 5px; border: 1px solid silver; box-sizing: border-box; margin-top:20px; float:left; } article { width:60%; margin-left:5%; margin-right:5%; padding:10px; } body{ position:relative; } aside{ width:25%; } footer { width:100%; box-sizing: border-box; height:50px; float:left; margin-top:20px; background-color:#fff; border-top:2px solid silver; padding:10px; font-size:1.2em; color:#333; font-family:Comic Sans MS; }

как создавался сайт it proger А что , похоже

Margin или position?

htmlbook.ru/css/calc думаю,эта статья будет здесь полезна:)

Начал смотреть, ХИДЕР? Серьезно?)

Почему у меня aside не работает? Ну то есть написал article, aside {} Но когда отдельно article {}работает А aside {} нет

Кто заметил на 24:10 как он сказал просто высота слишком большая

Гош, я поржал, parent, body стал парент(вдруг кому-то поможет), И хотелось бы поведение с 3мя вложениями float[left/rigt](кстати что такое inherit, и почему клерфикс не использует none) во флоат/не во флоат, relatve в relative и absolute в absolute и relative в absoulute. Это так сложно, сделать исчерпывающее видео, а не комик санс с половиной инфы

Такая проблемка: Без значения в тегах arcticle и aside они не появляются в браузере, хотя в Css все стили прописал. 8:30 где проверяешь. У меня просто шапка и подвал появляются и все. Делаю четко по видео...

Шрифт из нескольких слов надо брать в кавычки, иначе не применится

10:36 может кто-то подробнее расказать почему ушел футер? просто я не понял

у меня footer не слетает но на всю ширину не растягивается хотя установлено 100% много всего перепробовал может кто-нибудь даст ответ здесь?

display:inline-block не не слышал?

А кепки не было?

20:18 Я не вижу блока. У меня Adblock заблокировал этот рекламный блок

Article - артикал, header - хэдер, height - хайт и так далее...

Если все таки остаются отступы по краям, используйте * { margin: 0px; }

Как вертикальный линии делать

сразу после того как появились артайкл и асайд я перестал понимать

Помогите, у меня вместо блоков пустой экран, блоки не отображаются.

Помогите пожалуйста, я уже все тупо скопировал как у него, но у меня все в разброс. Я в бешенстве, скажите что не так????