Урок 6. Позиционирование в CSS | Курс Веб разработчик | Академия верстки

Поделиться
HTML-код
  • Опубликовано: 8 ноя 2024

Комментарии • 148

  • @alexandrbasiuk7358
    @alexandrbasiuk7358 5 лет назад +173

    Гениально чувак! Отличная дикция, отсутствие воды, быстрая и не затянутая речь, хороший микрофон.

  • @yookey1004
    @yookey1004 2 года назад +6

    Из всех прослушанных мной курсов, ваш - самый лучший! Вся информация расставлена по полочкам, четко структурирована, без воды и с множеством примеров. К тому же, бесплатна! Спасибо огромное 🖤

  • @dendirob
    @dendirob 2 года назад

    дружище,всё устаканил,огромный респект за вклад в развитие человечества!!

  • @mykhailoyashchuk3182
    @mykhailoyashchuk3182 4 года назад +5

    Реально чёткая дикция, всё понятно и доходчиво, и как говорят :'без воды '.! Тоже задумываюсь о платных курсах, но только после бесплатных =)

  • @houdini4673
    @houdini4673 6 лет назад +48

    Это видео моя шпаргалка навсегда, очень понятно все объясняешь, все очень подробно и примеры понятные и крутые, теперь это будет мой любимый канал на ютуб) лайк)
    В голове не то что каша, но пока смотрел до конца уже забыл что такое "overflow: auto;" cтал перематывать) но все прям оочень круто

  • @juliadmitrivna1219
    @juliadmitrivna1219 3 года назад

    Одно из лучших видео из тех, что я просмотрела по теме позициониррвание CSS. Очень доступно объясняете. Спасибо.

  • @vseslavr
    @vseslavr 5 лет назад +7

    Недавно начал изучать HTML и CSS, и это лучшие уроки из всех, что я смотрел. Огромное спасибо тебе за них! С меня подписка и лайк по умолчанию =)

  • @mxxew
    @mxxew Год назад

    спасибо за ваши уроки, нет воды, все по делу! все отлично просто

  • @АлексейКарпенко-ы2о

    Госпаде, 2 дня не мог решить проблему с позиционированием. Пересмотрел ваше видео два раза и нашёл ответ. Спасибо!

  • @ВикторияМельникова-ш5у

    Хочу поблагодарить за урок!!! Лучшее, что я видела, отличное объяснение с примерами! Только начала изучать вёрстку и было много не понимая, но благодаря Вам нашла ответы на вопросы)

  • @FAZA_FAZA
    @FAZA_FAZA 3 года назад

    Чувак, очень клево объясняет материал: четко, детально, в хорошем темпе и хорошей дикцией. И самое главное без идиотского юмора и дебильных визуальных вставок, которыми пестрят большинство низкосортных учебных видосов. Люблю качественный ресурс. Респект, подписался!

  • @БаймырзаАбидинов-й6о
    @БаймырзаАбидинов-й6о 4 года назад +1

    Мужик ты хищник.Очень трудно удается находить качественный контент из-за всякого мусора,которого очень много в ютубе.Также хочу отметить,что у тебя очень хорошая дикция и это не позволяет заскучать при просмотре твоих видеоуроков.Продолжай в том же духе.

  • @vitaliyk.6371
    @vitaliyk.6371 6 лет назад +2

    Лучшего объяснения по позиционированию не встречал.Спасибо,все стало ясно и просто!

  • @АндрейАнтонюк-ц1ы
    @АндрейАнтонюк-ц1ы 2 года назад

    Артём, спасибо тебе большое за урок. Только после него начал понимать, как работает позиционирование.

  • @СелимДжанджаков-ш6ч

    наконец-то я нашел то что мне нужно. Очень хорошо объясняешь, все быстро понятно. Затрагиваешь все мелочи. Удачи в развитие канала

  • @smert-chekistam
    @smert-chekistam 3 года назад

    Так классно про свойство position рассказал. Прям препод от Бога!!!

  • @Vidarr-4
    @Vidarr-4 4 года назад +3

    Ты лучший и нет никакой каши любой дурак поймет ибо тут все разжевано) спасибо))

  • @МаксимкаМаксик-ц9й
    @МаксимкаМаксик-ц9й 6 лет назад +6

    Очень полезное видео! Спасибо!!! Ты отличный учитель, очень приятно слушать тебя и узнавать то, что действительно важно. Низкий поклон тебе 🤗

  • @Hello_world_2020A
    @Hello_world_2020A 5 лет назад +2

    Рекомендую именно этого автора без воды очень понятно Мало таких хороших авторов как ты я доволен спасибо тебе огромное за твой труд

  • @anzorro04
    @anzorro04 5 лет назад +5

    Объяснения просты и понятны,без воды,все по теме.Лайк и подписка конечно же.Спасибо за видео!

  • @ВикторСорокин-ч3м
    @ВикторСорокин-ч3м 4 года назад +2

    в одном видео нашел ответы на разные каверзные вопросы. Спасибо!

  • @Nazarioo0
    @Nazarioo0 6 лет назад +6

    Превосходно объясняешь! Все очень понятно. У такого преподавателя с удовольствием учился бы за деньги.

    • @Glo_Academy
      @Glo_Academy  6 лет назад +1

      Приходи на наш курс веб-старт, сможешь учиться у меня.
      vk.me/glo_academy

  • @AkkayHT228
    @AkkayHT228 5 лет назад +4

    Самая сложная тема для меня позиционирование и отступы элементов, спасибо что объяснил, буду смотреть 100 раз пока в голову не войдёт все это

    • @Glo_Academy
      @Glo_Academy  5 лет назад +2

      А лучше не просто смотреть - а делать)

    • @simplewebdev1098
      @simplewebdev1098 5 лет назад

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

    • @AkkayHT228
      @AkkayHT228 5 лет назад +1

      @@simplewebdev1098 а лучше потом пытаться про себя пересказать все темы или объяснить другому как это работает

    • @simplewebdev1098
      @simplewebdev1098 5 лет назад +4

      @@AkkayHT228 да, обычно коту объясняют. Звучит как прикол, но это работает.

    • @justspartak
      @justspartak 5 лет назад

      Аминь!

  • @california486
    @california486 4 года назад +5

    Снимаю перед вами шляпу) Сегодня только на вас наткнулся. Здорово всё. Если и дальше видео будут в таком формате, куплю доп инфу)

  • @rasulali4690
    @rasulali4690 4 года назад +1

    Спасибо за труд братишка. Всё просто и понятно. Только 2 нюанса: 1) так и не объяснил про vh, em, rem в начале видео, 2) hidden произносится также, как и читается.
    П.с. Позиционирование это для меня как заноза в задницк и это видео расставило хоть и не все, но почти половину точек над и :)

  • @_Fantom_.
    @_Fantom_. 5 лет назад +3

    Отличный мастер-класс! Очень информативно, познавательно и доходчиво..

  • @ЭрикХерунц
    @ЭрикХерунц 5 лет назад +2

    Это лучшее что я слушал на ютубе

  • @annamalevich3183
    @annamalevich3183 5 лет назад +12

    Спасибо за объяснение. Это лучше из всех пересмотренных мною.

  • @yurisamarin8200
    @yurisamarin8200 5 лет назад +3

    Досмотрел до половины и этот видос уже летит в мою папку шедевров

  • @ruslayder9387
    @ruslayder9387 7 месяцев назад

    Артем Гирман ученик вышей школы пропустил ваш урок! Это недопустимо! Требую отчисление этого неуча!

  • @KoT-ew2dk
    @KoT-ew2dk 6 лет назад +35

    Отступы у инлайновых блоков это не баг. Дело в том что блочные инлайновые элементы также имеют свойство по типу строчных слов, по аналогии, слово=inline-block. А между словами как всем известно есть пробел, или тот самый отступ который мы видим у этих блоков.

  • @НатальяДавыдова-т9ф
    @НатальяДавыдова-т9ф 4 года назад +1

    Лучшие уроки я не встречала !!!!

  • @Just_A_Man
    @Just_A_Man 4 года назад +4

    Дай тебе Бог здоровья!!!

  • @johna6436
    @johna6436 Год назад

    Спасибо!
    Очень хорошая подача материала!!!

  • @mishachubenko3394
    @mishachubenko3394 Год назад

    Дякую, position: була для мене сама важка тема, особливо в побудуванні меню бургер!

  • @РоманКущ-и8ь
    @РоманКущ-и8ь 5 лет назад +10

    padding со всех сторон задается сверху по часовой стрелке padding: верх, право, низ, лево. Так легко запомнить короткую формулу.

  • @СергейАльфред
    @СергейАльфред 4 года назад +2

    Центрировать элемент можно и так: задать блоку нужную ширину , а margin-left и margin-right установить в auto;

  • @ynivermine7750
    @ynivermine7750 5 лет назад +2

    спасибо очень круто )) (особенно когда закипает голова сразу себя вспомнил )

  • @ihorkondratov2189
    @ihorkondratov2189 5 лет назад +4

    Дуже файно та зрозуміло дякую!!!

  • @shermuhammadwolf10
    @shermuhammadwolf10 6 лет назад +7

    *privet brat za polchesa uznal bolshe chem pol goda spasiba* 😊😊

  • @ГульзанаКаткелдиева-ъ4ь

    Ценная понятная информация, спасибо !

  • @AmirLT-x6y
    @AmirLT-x6y 10 месяцев назад

    thank you, a lot of everything is explained, visually and interestingly.

  • @РусланЮрьевич-г5г
    @РусланЮрьевич-г5г 5 лет назад +2

    Артём молодец... Думаю про одно позиционирование забыл... Это margin: 0 auto;
    Если блок меньше к примеру родителя, то часто его используют.
    Ещё раз, подача на высоте....

  • @nadzeya2023
    @nadzeya2023 3 года назад

    Благодарю за знания! Очень доступно!

  • @МаксимАлексеев-ч4й
    @МаксимАлексеев-ч4й 4 года назад

    absolute позиционируется относительно ближайшего предка с position absolute или relative. Так что не обязательно, чтобы у родителя был relative, для позиционирования absolute элемента относительно родителя.

  • @Artmel
    @Artmel Год назад

    Спасибо, много полезной информации.

  • @maksym3682
    @maksym3682 5 лет назад +2

    Очень хорошо объясняешь, обязательно куплю твой курс!

  • @nikolajlazar6020
    @nikolajlazar6020 3 года назад

    Красава, всё объяснил по полкам!!! 🤝Спасибо!

  • @Леха-н5ь
    @Леха-н5ь 3 года назад

    Моё почтение.. клево объясняешь

  • @vd7533
    @vd7533 4 года назад +3

    Спасибо, так всё четко!!! Ура.

  • @Lexa34rus
    @Lexa34rus 6 лет назад +1

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

  • @ЮрийТьюбер
    @ЮрийТьюбер 5 лет назад +1

    Спасибо, отличный урок, вдумчивый и подробный.

  • @justspartak
    @justspartak 5 лет назад +2

    Хорошая подача материала. Спасибо!

  • @МаксимКостелло-ь2ю
    @МаксимКостелло-ь2ю 4 года назад +1

    Спасибо за урок!

  • @1MrAnonymous11
    @1MrAnonymous11 4 года назад +5

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

    • @WhiteBear141981
      @WhiteBear141981 4 года назад

      Anonymous Legion, он же Александр Пауков)

  • @Unknown_User768
    @Unknown_User768 5 лет назад +2

    Классный урок, огромное спасибо

  • @АлМ-ы8ъ
    @АлМ-ы8ъ 4 года назад +1

    Если у .mini-box (31 минута) поставить relative а у родителя position явно не задавать, то .mini-box будет позиционироваться относительно родителя

  • @NIkFreedomForce
    @NIkFreedomForce 4 года назад +3

    Просто супер! Спасибо огромнейшее, Артем!) Скажи, приобрести запись данного курса, с домашками , примерами и дипломной работой, все еще актуально?

  • @justdoit8369
    @justdoit8369 3 года назад

    просто пишу коментарии чтобы раскрутить твой канал каждый нуждается в поддержке

  • @vaccinetwenty-four9237
    @vaccinetwenty-four9237 5 лет назад +2

    Очень понятный урок, спасибо большое автору

  • @mavlon_s
    @mavlon_s 4 года назад +2

    спасибо бро

  • @АфанасийМуксунов
    @АфанасийМуксунов 5 лет назад +1

    Спасибо за объяснение

  • @kvibrik
    @kvibrik 6 лет назад +1

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

  • @Dreadlight92
    @Dreadlight92 3 года назад

    Очень доступно и понятно!! Спс.

  • @freeziizplay7453
    @freeziizplay7453 5 лет назад +1

    Я смотрю и сразу делаю,
    что то получается

  • @thekhokirov7871
    @thekhokirov7871 3 года назад +1

    Я вообще остановился на этом float и как создать менюшку в aside. Забросил все, а сейчас уже хочу начать изучать

  • @antonywell1701
    @antonywell1701 4 года назад +2

    Неплохой урок, спасибо вам!

  • @ГерманХамитов-ж4ь
    @ГерманХамитов-ж4ь 6 лет назад +6

    Спасибо, все топ, так понятно объясняешь!

  • @vasyapupkin997
    @vasyapupkin997 3 года назад

    хорошо объясняешь

  • @Библиотеказнаний-у6р

    Потрясающе доходчиво!! Великолепная подача материала!!!

  • @chkpg4317
    @chkpg4317 5 лет назад +1

    Спасибо,очень четко!Молодец

  • @ДенисМальцев-п6ц
    @ДенисМальцев-п6ц 6 лет назад +3

    Спасибо сан сей, покупаю курс !)

  • @serhiizvieriev1120
    @serhiizvieriev1120 4 года назад +1

    30:30 - position: relative | absolute

  • @viktorzaivii5562
    @viktorzaivii5562 5 лет назад +3

    Отступ между inline-block это не баг, а обычное поведение строчных элементов, в которых учитывается один пробел

  • @antarktidataet
    @antarktidataet 5 лет назад +7

    Если уже есть некий опыт ,то можешь скипнуть первые 15 минут.

  • @it-891
    @it-891 5 лет назад +1

    Круто! Спасибо!

  • @gaudix9036
    @gaudix9036 3 года назад

    Благодарю)

  • @Bakytov
    @Bakytov 3 года назад

    У меня проблемы при выравнивании блочных элментов с помощью inline block. Н: выравниваю основных блоков потом при добавление новых элементов внутри этого блока все блоки уходят куда то вниз вверх

  • @danielocaballero1111
    @danielocaballero1111 4 года назад +1

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

  • @ivanmendelson751
    @ivanmendelson751 5 лет назад +2

    Не ожидал встретить НАСТОЛЬКО крутой курс на русском языке!

  • @turbo9284
    @turbo9284 5 лет назад +1

    Спасибо

  • @apleathergoods
    @apleathergoods 3 года назад

    Как мне сделать, допустим у меня есть: хедер ширина 80%, 3 блока, которые расположены в ряд по горизонтали снизу хедера, 1 блок 15%, 2й 40%, 3й 25%, и еще ниже футер ширина тоже 80%. Мне нужно все эти блоки расположить по центру страницы.
    Хедер и футер получается сделать, а этих 3 блока нет. В чем может быть проблема? Если прописать даже margin: 0 auto в * {, то центрирует только хедер и футер, а блоки остаются прижатыми к левому краю страницы...

  • @eastaladin3167
    @eastaladin3167 4 года назад +1

    Можно просто написать точку потом нажать TAB!

  • @ОмарКасаб
    @ОмарКасаб 4 года назад

    27:10
    А не проще было бы задать параметры
    width: 50%;
    left: 25%;
    ?
    Единственное наверное что мне лично было полезно узнать это про суммирование размеров параметров и про то что есть такая штука как margin

  • @TarasAndriutsa
    @TarasAndriutsa 2 года назад

    дякую

  • @ftinkere
    @ftinkere 4 года назад +2

    Можно занулить шрифт, чтобы не было пробела ещё

  • @maholnt_play9223
    @maholnt_play9223 4 года назад +1

    14:41 у меня не работает сразу все бордеры,у меня работает только первый!

  • @ВасилийВесло
    @ВасилийВесло 5 лет назад +1

    Топ!)

  • @OleksandrZolotarov-d3z
    @OleksandrZolotarov-d3z 3 года назад

    Толково

  • @АликКоваленко-ю3д
    @АликКоваленко-ю3д 3 года назад

    Друг помоги, обыскал весь интернет так и не узнал, вопрос совершенно не стандартный, но интересный, у меня есть объект div при наведении на него (&:hover), я на этом объекте создаю псевдоэлемент (before), но мне нужен еще один объект рядом, и я его создаю с помощью псевдоэлемента (after), и так я имею два псевдоэлемента, вопрос: могу ли я из одного псевдоэлемента сделать ячейку ввода типа (input), вот мой код:
    .barberry
    display: block
    height: 152px
    width: 147px
    background: url('../img/berry/barberry.png') center center / cover no-repeat
    z-index: 2
    border: 1px solid #023100
    &:hover
    &:before
    content: ''
    display: block
    height: 190px
    width: 160px
    background: url('../img/controls/frame.png') center center / cover no-repeat
    z-index: 2
    transition: 1s all
    &:after
    content: ''
    display: block
    position: relative
    margin: -30px 0 0 80px
    border: 1px solid #023100
    height: 20px
    width: 40px
    background: #ffffff
    border-radius: 15%
    z-index: 3
    вот здесь бы из этого блока как то сделать input

  • @romkagm7756
    @romkagm7756 5 лет назад +1

    Мне нравиться что он на ты говорит прям прикольно)

  • @axelvermontov6607
    @axelvermontov6607 5 лет назад

    как так, ты только написал новый код CSS и у тебя уже обновились значения в браузере?

  • @annnbes4200
    @annnbes4200 2 года назад

    overflow: hidden - читается [hɪdn] никак не хайден.

  • @bravebrave9574
    @bravebrave9574 2 года назад

    👍

  • @diatrima6855
    @diatrima6855 3 года назад +1

    14:15
    Отмечаю, где я остановился*

  • @ДмитрийВасильев-ж1е4ь

    при объяснении z-index я бы использовал понятия "над", "под" (про колоду карт норм аналогия), имхо более понятно чем оси x,y,z

  • @romkagm7756
    @romkagm7756 5 лет назад

    еще как ты догадался есть margin-right тогда будет отступ слева, и еще margin left тогда отступ будет слева, мне кажетьяс что он понял что сморозил дичь но смолчал)) А так то ролик топ.

  • @Noname-hu3vz
    @Noname-hu3vz 3 года назад

    НИФИГА НЕ ПОНЯТНО НО ОЧЕНЬ ИНТЕРЕСНО

  • @hancock1686
    @hancock1686 5 лет назад

    Можно ссылку на видео инспектора элементов. 7:20

  • @bender4000
    @bender4000 3 года назад

    Ай эм голаб голаб голаб голаб швабл габл габл габл габл габл вайт, ай венс ис гастинг айтс би хайнз итс шик ту ревел ай сон вайс