300 Сайдбаров ► Как сверстать структуру сайта?

  Переглядів 406,123

Хауди Хо™ - Просто о мире IT!

Хауди Хо™ - Просто о мире IT!

7 років тому

Знаете HTML, CSS, но Вам всё еще сложно верстать сайдбар, футер, шапку и так далее?
Научитесь как это делать правильно в этом видео!
►►► Второй канал Хауди, подпишись ;)
vk.cc/5lPADD
Человеческие цены на игры Steam и рандомы только тут - bit.ly/SteamAlmostFreeGames
Хочешь зарабатывать на своих видео в UKposts?
Подключайся! - youpartnerwsp.com/join?23195
#Ссылки из видео:
1) css-tricks.com/snippets/css/c...
► Жми красную кнопку "Подписаться" под видео :)
► Есть вопрос? - Задай его лично мне в наших группах!
===
► Наша группа ВКОНТАКТЕ - howdyho_net
► Наш Twitter - howdyho_net
#Реквизиты для донатства | Поддержи канал!
Z252920168434
R250434217196
Музыкальный трек предоставлен UKposts Audio Library.

КОМЕНТАРІ: 650
@MrSkunk26
@MrSkunk26 7 років тому
1) ИМХО, более правильный вариант разметки с точки зрения html5 стандарта + seo: - создаем не div-ы с классами .header, .footer, а используем теги, заложенные в html5: , , а уже им, при необходимости можно дописывать какие-то классы, если мы на разных страницах хотим задать им разные свойства, например, цвет фона шапки на главной странице должен отличаться от цвета фона шапки на внутренних страницах, тогда уже стандартному тегу можно добавлять классы (.header_inner, .header_main). - все основное содержимое страницы опять же помещается не в какой-то див с рандомным названием, а в тег . Если нужно разбить на 2 части, то внутри него используются теги (для основного контента) + (боковая колонка). 2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0; 3) Чтобы задавать отступ для .siderbar, не создавая кучу оберток, можно от его ширины отнять значение отступа: width: calc(30% - 10px); margin-left: 10px; 4) Плохая практика плодить названия блоков с цифрами, в таком коде легко запутаться самому и заставить запариться другого человека, если он потом будет работать с вашим кодом. 5) В стилях идет постоянное дублирование 1 и тех же свойств, что мешает, допустим, блоки .content_1 и .content_2 перечислить через запятую, чтобы задать им ширину в 50% и левый флоат? Либо задать этим блокам 1 общий класс .content, на него повесить общие свойства, а при необходимости добавить классы .content_left и .content_right, чтобы на них навешивать уже отличающиеся свойства? Я понимаю, что автор может быть только в уроке так пишет, чтобы не затягивать видео, но если это смотрит новичок, то он будет делать точно также, даже не зная о том, что совершает ошибку.
@LittleBoogeyman
@LittleBoogeyman 7 років тому
Я тот самый новичок, но который заподозрил, что Хауди усложняет =) И хочу сказать вам большое спасибо за ваши замечания и буду рада если поделитесь, вдруг вам известен какой-нибудь видео-блоггер вроде Хауди кто бы так же славно описывал ситуации, но на более современном уровне: максимально компактно, максимально красиво. Либо ссылка на хороший платный курс который, возможно, вы прошли/написали сами и можете порекомендовать (html5, css, javascript, что угодно).
@sb_boiler
@sb_boiler 7 років тому
видео с вас, для новичков для тех кто не рубит, но хочет.
@mihhailk4749
@mihhailk4749 7 років тому
"2) Вместо float: left для .sidebar + .content, а потом костыля с clearfix, можно просто прописать для .container: font-size: 0;" вот этот пункт не совсем понял. может кто объяснить?
@user-tn9lg5lq9d
@user-tn9lg5lq9d 7 років тому
По умолчанию между блоками создается пробел, то есть ты создаешь пробел когда в текстовом редакторе пишешь каждый div с новой строки, а font-size 0 убирает эти пробелы. Например создай 3 div блока с одинаковым классом (здесь создается пробел) (здесь создается пробел) (здесь создается пробел) задай им ширину и высоту и бэкграунд чтоб ты их видел size { background: #000; height: 300px; width: 300px; display: inline-block; } Между блоками появятся пробелы. Чтоб их убрать в класс wrapper пишут font-size: 0; .wrapper { font-size: 0; } Можно еще написать код в одну строчку так и пробелы пропадут(но это вроде плохо): Думаю доступно объяснил.
@MrSkunk26
@MrSkunk26 7 років тому
1) Не нужно смотреть устаревшую информацию о поддержке на htmlbook, это нужно делать на can i use, 97.87% браузеров поддерживают тег , это базовый тег html5 стандарта, точно такой же, как и . 2) Не нужно пользоваться float вообще, когда почти все браузеры уже поддерживают flexbox. Или используйте сетку хотя бы на inline-block-ах. 3) По поводу id vs class, гугл в помощь.
@user-wd3tk1jg8p
@user-wd3tk1jg8p 7 років тому
Побольше таких уроков по html+css
@U-nieskladovaje
@U-nieskladovaje 4 роки тому
Хоть урок и устаревший, но все равно единственный нормальный, который я нашел. Остальные чето мусолят на час, иногда сами не понимают темы. Хотя то, что урок устаревший, в какой-то степени даже плюс, т.к. надо самому брать куски кода, улучшать его, экспериментировать, и т.д., а это практика. Это хорошо))
@coop4442
@coop4442 4 роки тому
привет эээээээм ват? Полно превосходных уроков по верстке.
@Strochkin
@Strochkin 2 роки тому
он не стареет. Актуален и сегодня!
@genaanimeboy
@genaanimeboy 6 років тому
Таких бы уроков по практике побольше!) Считаю что по подобным уроках луче всего приходит понимание написания кода))
@user-qb5ro6zi3s
@user-qb5ro6zi3s 4 роки тому
Спасибо за урок. Немного отличается от того, что я уже насмотрелся, оно и понятно. 3 года прошло, причем почти ровно. Сейчас вижу, что многие на флексах верстают. Но данное видео - это идеальный вариант начать свою практику по верстке. Немного замудрено на мой взгляд с кучей вложенных дивов, но лайк 100%! Буду пересматривать и закреплю свои знания по флексам и флоатам. Попробую и так, и так. Спасибо.
@denzeroneYT
@denzeroneYT 9 місяців тому
Ну флексы имба, на них намного проще, чем было раньше, делать костылями некоторые моменты и т. д.
@user-hi2uz2el2r
@user-hi2uz2el2r 3 роки тому
Очень круто объяснял даже 4 года назад!
@user-uv1sf1cb6p
@user-uv1sf1cb6p 7 років тому
Спасибо, Хауди! еще бы подробный урок по верстке, чтобы там была какая-то витрина товаров (или разделов каталога) в контентной части.
@HowdyhoNet
@HowdyhoNet 7 років тому
Это называется вывод материалов, примерно такой урок будет )
@wireinet
@wireinet 7 років тому
Еще один совет, чтобы блоки имени различие по цвету через один (а не как у тебя: синие), для большей наглядности. Хотя и не для новичков, но может, где-то освятишь...смотри, ставим классы обычные и добавляем к ним, например, .wire класс и ему свойства .wire {background:gray;height:300px} .wire:nth-child(even) {background:lightgray;height:300px} Думаю, понял в чем трюк... Блогов не веду, поэтому решил поделиться, раз уж к месту..просто очень наглядно, когда каждый следующий див окрашен иначе, так легко составлять разметку. Спасибо за уроки! Все супер!
@shandorm
@shandorm 6 років тому
Автору спасибо! Всё доступно и понятно. Мне пригодилось, а по поводу HTML5 и CSS3, то что писали ниже, предлагаю автору записать отдельный ролик, т.к. мало кто может так доступно и подробно объяснять!!! ;-)
@CKPiM4iKTV
@CKPiM4iKTV 7 років тому
Замечательный туториал. Побольше бы видосов, касающихся верстки.
@user-cz2qb9en4t
@user-cz2qb9en4t 7 років тому
Спасибо! Очень долго возился с контентом и сайдбаром!
@mx1xmx
@mx1xmx 7 років тому
Хауди, как всегда красавчик. И по больше видео по вёрске пожалуйста. Было бы не плохо если бы про BootStrap видосик сделал.
@mx1xmx
@mx1xmx 7 років тому
И вёрска шаблонов тоже не помешала бы
@HowdyhoNet
@HowdyhoNet 7 років тому
Про BootStrap в планах сделать нормальный курс.
@mx1xmx
@mx1xmx 7 років тому
+Хауди Хо™ - Просто о мире IT! Молодчина
@moroz_dev
@moroz_dev 7 років тому
Скорее бы курс по BootStrap
@GutsWarhammer
@GutsWarhammer 6 років тому
Плохо ищете значит. Смотрите у WebDesign Master по плейлистам. И еще у него урок есть, как провильно искать информацию нужную. думаю вам будет полезно.
@artromani1182
@artromani1182 7 років тому
Как всегда класс! Отлично, что есть такой канал! Ждём ещё вёрстки! Спасибо за труд!
@guyxxxxxxxx
@guyxxxxxxxx 7 років тому
шикардос. вот практика это лучше тысячи слов!!! однозначно палец вверх!
@user-xb7uv5cv4y
@user-xb7uv5cv4y 7 років тому
спасибо за урок потому что я тоже задался тем же вопросом как склеить разные части в одно целое.Найдя ваше видео я подумал наконец то появилось видео простое о сложном!!!Спасибо за потраченое время на нас!!!
@HowdyhoNet
@HowdyhoNet 7 років тому
+Работа Время Рад помочь!)
@justaname7225
@justaname7225 4 роки тому
спасибо за такие видео .Благодарен тебе за твои уроки!!!
@vadimb.2948
@vadimb.2948 7 років тому
Очень доступно рассказал. Спасибо большое. Ребят, хотел поинтересоваться у кого-нибудь. Сейчас стоит заменять те дивы на теги с html5: , , и прочее? Как предпочтительней и как сейчас больше делают? Спасибо за ответ
@Room-zk2wc
@Room-zk2wc 6 років тому
Спасибо огромное за качественный контент, всё предельно ясно и понятно Автору 5+ за работу
@HowdyhoNet
@HowdyhoNet 6 років тому
Рад помочь!
@arttur1672
@arttur1672 6 років тому
Быстро,понятно и по делу! Хауди ты лучший блогер!!!
@user-ml5bj9qw1w
@user-ml5bj9qw1w 4 роки тому
Он не блогир а летсплейщик
@wireinet
@wireinet 7 років тому
Спасибо за видео! А все-таки сложный и не понятный этот сlearfix! Я это проще решал...под блоками с float ставил пустой div и его классу свойство clear:both...
@andreyorlov2138
@andreyorlov2138 2 роки тому
Нашел то что искал. Все кратко и по делу!
@user-mw3cb9pl7w
@user-mw3cb9pl7w 7 років тому
Очень крутой урок, благодарочка!) что насчет полного курса по верстке сайта с нуля с применением gulp или grunt, на бутстрапе (подобные ролики уже есть, но ты круто объясняешь, хочется услышать и увидеть в твоем исполнении). Хотел еще узнать каким стеком ты владеешь? и чем более детально?
@user-cz6jc9lw4j
@user-cz6jc9lw4j 4 роки тому
Возможно, это поможет тем, у кого не работает clearfix. Для этого, вы должны добавить в футер одно свойство(В CSS файле), это свойство clear:both; После этого свойства, вы должны прописать в сайдбаре margin-bottom: Npx;(где N- любое число) Только что мы убрали обтекаемость у футера, вызванную свойством флоат в сайдбаре. Вот и всё, что нужно было сделать(я провозился с этим~час, мда...)
@jaa619
@jaa619 Рік тому
красава, гораздо лучше всяких кусков кода с разных мест
@ferryterry1873
@ferryterry1873 Рік тому
@@jaa619 Это такие страшные костыли , за которые вас по голове точно не погладит ваш тим лид . Такой контент смотреть , вредно
@vasmax1521
@vasmax1521 9 місяців тому
Мне тоже помогло, спасибо)))
@fiordnord
@fiordnord 7 років тому
Все четко. Еще бы про то как прибить футер к низу браузерного окна и вообще огонь было бы
@Oleksandr9665
@Oleksandr9665 3 роки тому
Чтобы при скроллинге футер оставался на месте? - display: fixed;
@MrNewdima
@MrNewdima 7 років тому
Прикольный видео. Но я думаю что проблема новичков состоит в том что никто не знает про стоймость сайтах. Точнее мы как новички не знаем сколько нужно брать за саит к примеру : 1) landing page + ( страница админа со всеми подписчиками) . 2) За блог (не буду ставить ссылки как пример чтоб не воспринимать как рекламу) который создаётся с помощью ( PHP , MYSQL, HTML, CSS/CSS3 , JS, JQUERY в том числе включает lightbox , gallery + админ панель который имеет обычный CRUD [ Create, Read, Update,Delete posts ] ). Заранее приношу свои извинения если где нибудь писал неграмотно с уважение Дмитрий.
@HowdyhoNet
@HowdyhoNet 7 років тому
1) Недостаточно информации, в чём функционал? Или просто лэндинг? 2) От $50 до $300, в зависимости от требований заказчика к движку
@user-fh8kx6or3d
@user-fh8kx6or3d 7 років тому
Спасибо за видео. А разве float сейчас используют? Вроде как про float рекомендуют забыть и использовать position
@alexejkedrin7569
@alexejkedrin7569 3 роки тому
Благодарю, Хауди. Для новичка самое то.
@user-pt2uz5st7i
@user-pt2uz5st7i 5 років тому
Хорошее видео! Побольше бы таких особенно сейчас актуально учитывая как оно устарело.
@user-pi1yh1lt2q
@user-pi1yh1lt2q 7 років тому
Хауди, ю амєйзинг! Огромное спасибо за твои видео,все понятно! Больше уроков по html и css! ))
@amirichisomadinov
@amirichisomadinov 7 років тому
круто. то что мне нужно было знать. Спасибо Хауди.
@mershavka
@mershavka 6 років тому
Это лучшеее видео по веб дизау знаю почти все HTML и CSS но так и не знал как правильно верстать шаблон спасибо большое очень помогло в обучение
@HowdyhoNet
@HowdyhoNet 6 років тому
Рад помочь
@annaanokhina6950
@annaanokhina6950 5 років тому
Мне очень нравятся твои видео! :) Понятней и лучше никто больше не объясняет) Сделай пожалуйста уроки по flex и grid.
@xyz76021
@xyz76021 7 років тому
Хауди, спасибо за урок :) Нет предела твоей крутости. Скажи пожалуйста, какими аддонами Sublime Text ты пользуешься( я только Emmet узнал в видео)
@user-qo5sq4me6k
@user-qo5sq4me6k 4 роки тому
live reload, autofilename
@azizzoom9568
@azizzoom9568 7 років тому
Хауди Хо спасибо тебе большое, спасибо что помогаешь, спасибо за старания, спасибо за всё!
@Opp1um
@Opp1um 7 років тому
Вооот! Вооот! Где ж ты раньше был с этим контеном))) Я неделю рыл зарубежные сайты и форумы и переводил их, в итоге сам допер как и что сделать, да и clrfx применял по-другому. В итоге сделал всё через одно место, но оно работало. Жаль ты это раньше не выпустил)))
@Darkrogua
@Darkrogua 7 років тому
аналогично коллега, изучил все основы, сел верстать структуру, вроде бы все логично, но то одно сползало, то второе.. я делал через контейнеры, но не так глубоко, как у автора видео.. Спасибо
@KEHU008
@KEHU008 7 років тому
+1 Мне бы это оч помогло пол года назад)) сейчас все через одно место ))
@orionpro79
@orionpro79 7 років тому
это есть везде, не знаю что там можно было рыть ... в любых уроках. Мало того, не обязательно применять clearfix, можно ведь просто задать overflow: hidden
@Opp1um
@Opp1um 7 років тому
orionpro79 когда не знаешь что ищешь, это тяжело, да и на русских форумах никто не выкладывает почти, т.к. это лишний труд для многих, либо им жалко.
@user-fk2fu4yc6b
@user-fk2fu4yc6b 7 років тому
По его урокам вы даже не изучили основы. Если хотите быть верстальщиками, то лучше css и html на каких-нибудь htmlbook учить или у Попова.
@Lopa_boba
@Lopa_boba 3 роки тому
Большое спасибо, очень полезный ролик для начинающих.
@user-si1jl3xu5l
@user-si1jl3xu5l 5 років тому
Здравствуйте. Всё делал в точности по Вашему видео. Всё получилось кроме "сайдбара". Во первых не становится с права от "контента". Если меняю float left на right, становится справа как и должен но внизу под "контентом". Пробовал поднять командой "margin-top", не получается. Значения брал положительные и отрицательные. Стоит как приклеенный. Помогите пожалуйста найти ошибку! Хотя код пишу прямо в Sublime Text3 с Вашего видео.
@bondekrtv
@bondekrtv 6 років тому
насчет clearfix:
@user-jh1nb9ie9m
@user-jh1nb9ie9m Рік тому
шикарно! огромное спасибо, а то уже успела замучиться
@andreygrinenko3061
@andreygrinenko3061 7 років тому
Большое спасибо. Ты очень круто все рассказал .
@user-xy9ge3xn4m
@user-xy9ge3xn4m 7 років тому
Всегда с интересом смотрел твои уроки! Но могу высказать замечание ты пытаешься изложить бывает сложные вещи простыми решениями, но это бывает только усложняет процесс. Кто более менее в теми тот поймет а вот у начинающих останутся пробелы в понимании. И это в большей степени плохо ))), чем хорошо. Про clearfix нужно было по подробней написать ведь это суть всего и лучше было разбить видео на 3 часть по 10 - 15 -15 мин. Тогда получилось и компактно и материал изложенный лучше усвоился. Сохранилось и динамика и содержательность материала. Ну это мое мнения повторяюсь всегда с интересом смотрю твой канал !!!
@span4ev
@span4ev 7 років тому
"так не делается, но нужно делать именно так". Железная логика. Хотя бы объяснил в двух словах, почему так делается и почему нет
@katekate5779
@katekate5779 2 роки тому
15:36 - float: left для sidebar_1 и sidebar_2 ? может для sidebar_1 - float: left и для sidebar_2 - float: right ?
@___avka___924
@___avka___924 4 роки тому
смотрел старые уроки. Ты говорил писать в type"text/css" почему тут не написал? что-то поменялось или это просто не нужно?
@artemmrn
@artemmrn 6 років тому
А вместо float нельзя использовать flex?
@orionpro79
@orionpro79 7 років тому
div можно не писать, если стоит emmet (хватит и .container к примеру) или это для наглядности делается?
@merlinulg
@merlinulg 7 років тому
Где-то давненько видел сайт-конструктор всех этих структур - задаешь ему все параметры, а на выходе получаешь файлы html и css, оформленные по всем стандартам. И не надо голову ломать. Хотя думаю, что у спецов и так под рукой имеются шаблоны под все варианты структуры сайта, чтобы на этом время не терять.
@DiBaHHbIi_Expert
@DiBaHHbIi_Expert 7 років тому
как раз попался такой макет с тьмой блоков и внутри них не хотели писаться margin и padding, второй день на дизморали даже не хотел подходить к вёртске а тут более-менее объясняется эта дичь и понятно что пробовать. спасибо) ещё недавно приуныл из-за новых тегов в html5 аля nav menu footer header и прочих, типо через них лучше писать, роботы быстрее находят и бла бла. а тут только-только стандартные выучил почти) если они актуальны, то можешь с ними в уроках верстать? рано или поздно они вытеснят старые сайты с div'ами из сети и хочется поспособствовать этому) Ps как жеж легко и быстро у него выходит... ничо, скоро и мы так сможем;)
@DiBaHHbIi_Expert
@DiBaHHbIi_Expert 7 років тому
напишу тут, что б там полотна небыло) 1) расскажи как нить про css reset, постоянно ли его подключать, что он может поменять в коде и т.д. 2) расскажи про схлопывающиеся отступы, вот это новичкам думаю будет полезно. а то очень большие шансы столкнутся с этой жопой на первых шагах. и методы борьбы) дада, всё гуглится, но вдруг кончатся темы для видео или захочешь рассказать про это. шота психанул с писаниной, сорь))
@vsezanyato
@vsezanyato 7 років тому
А если использовать display: inline-block; ???
@paravozpendos3292
@paravozpendos3292 3 роки тому
Это по стандарту в Сублайме можно #Что-та обернуть в див? Или нужно что-то докачивать?
@barrydinh
@barrydinh 7 років тому
А если пользовать Bootstrap, то будет быстрее и удобнее верстать ? или есть свои минусы?
@heavenlygaze131
@heavenlygaze131 5 років тому
я пока только изучаю html & css. Но почему в данном видео процентами не выставить разделение между блоками. Допустим из 100% 1 блок 79,9% 2 блок 20%. разделение между блоками будет 0.1% без сноса крайнего блока ниже. или я что то не понимаю и в дальнейшем будут проблемы?
@mishasv1490
@mishasv1490 5 років тому
Пример по уроку получился, но я понимаю, что сам без видео с примером, какие и где теги ставить, не разберусь. Сколько нужно времени и практики, что б научиться, без подсказок верстать простые такие "макеты" сайтов?
@user-eg7gl9jn4t
@user-eg7gl9jn4t 7 років тому
как называется у тебя док панель?
@maliyev7978
@maliyev7978 Рік тому
единственный прогррамист который пишет имена классов на человеческом языке!
@user-vu9bv6gs2o
@user-vu9bv6gs2o 5 років тому
А начальный урок есть? Где можно посмотреть? С уважением, совсем чайник
@cerberuscsgoandmore6968
@cerberuscsgoandmore6968 5 років тому
2k18 . в класс контейнер поместите контент и сайдбар ( Контент Сайдбар )после чего в css файле пишем: .container{display: flex} . все. не нужно ничего другого и float в том числе. просто задайте бэкграунд и высоту, далее смотрим :)
@Noob-rv3wh
@Noob-rv3wh 5 років тому
Спасибо огромное, спас. Мне все эти дивы сливаются и хрен че поймешь, а так более наглядно все становится если убрать лишнее.
@cerberuscsgoandmore6968
@cerberuscsgoandmore6968 5 років тому
@@Noob-rv3wh обращайся)
@GameChannelOfficial
@GameChannelOfficial 5 років тому
Agree
@kalyszhek5296
@kalyszhek5296 6 років тому
HELLO! у меня есть вопрос: как сделать висячий header или как там называется.. ну например как у сайта: vaadin.com. когда вниз прокрутишь наверху header остается на месте.. заранее спасибо!
@chillmusic8691
@chillmusic8691 3 роки тому
когда смотришь видос в 2020, спасибо flex :)
@nekki9321
@nekki9321 4 роки тому
Спасибо Хауди, я смотрел несколько уроков до этого и ни##я не понял, но посмотрел твой урок стало всё ясно
@altodit2081
@altodit2081 5 років тому
У меня все точно также, но почему после введения (и всех других блоков с inner) сайтбар съехал вниз. Помогите пожалуйста.
@BloodrideWOT
@BloodrideWOT 7 років тому
Создай урок по работе с гулп файлом - его настройка, подключение и т.д.
@septembercult985
@septembercult985 5 років тому
А почему padding, а не Margin? Просто по логике ведь лучше именно внешний отступ от внешних границ, а не вминание внутреннего содержания блока паддингом? Или это как-то завязано на box-sizing?
@user-ok9qn8bq8h
@user-ok9qn8bq8h 6 років тому
Извините. подскажите новичку, вот когда вы набирали # header+#content#sidebar+# footer и саблайм преобразовал это, - это какой-то специальный плагин? И как это сделать?
@max2gir569
@max2gir569 6 років тому
Emmet
@user-ok9qn8bq8h
@user-ok9qn8bq8h 6 років тому
Max 2Gir oooh snak youuuu°
@barchaan
@barchaan 5 років тому
все доступно и просто, молодец
@smsergey5821
@smsergey5821 5 років тому
2 минуты видео.....на повторение ушло 3 часа хух потно го дальше
@alexcapraru3299
@alexcapraru3299 4 роки тому
Тоже самое
@user-zi1ot5co1l
@user-zi1ot5co1l 6 років тому
Я не могу понять, как у тебя получается написал в редакторе изменение , а в браузере все сразу поменялось , не нажимая обновить, там получается автообновление какое-то стоит , подскажи пожалуйста ?
@destroyerofpussy7184
@destroyerofpussy7184 5 років тому
огромное тебе спасибо все понял все прекрасно понял спасибо еще раз !!!!
@victorkuznetsov5632
@victorkuznetsov5632 7 років тому
слушай, а как сделать так чтобы был заголовок слайда по середине но фон был одинаковый , нужно делать несколько сайт баров
@mytrip4604
@mytrip4604 6 років тому
А почему не через тег ?
@shvarts95
@shvarts95 7 років тому
чтобы футер встал на место достаточно задать ему свойство: clear: both; Зачем копировать кучу строк кода и создавать лишние классы в стилях, а в разметке лишние блоки лепить, когда все решается одним свойством?
@Night_Eagle_en
@Night_Eagle_en 7 років тому
Тогда не работает margin, поэтому другой выход может и есть, но лично я его не знаю.
@dimex882
@dimex882 6 років тому
.group:after { content: ""; display: table; clear: both; }
@sergeipirogov5396
@sergeipirogov5396 6 років тому
Интересно было бы послушать коммент Хауди насчёт clear: both; А то людям непонятно,зачем писать лишнее
@baltaralto6521
@baltaralto6521 4 роки тому
да гавно этот флоат, выкручивайтесь без него, иначе багов будет куча
@igoribadov5646
@igoribadov5646 7 років тому
float не используют уже жи есть? inline-block
@Vicont777
@Vicont777 7 років тому
Отличное видео! Но подскажите новичку, как сверстать так, если нужно, чтобы футер был шириной как контентная часть и упирался в сайдбар?
@abcdabcd400
@abcdabcd400 3 роки тому
рили помог хоть и сейчас 2021))
@Nazar0005
@Nazar0005 7 років тому
Скажи что это за тема у тебя стоит в sublime?
@ksardesksardes1919
@ksardesksardes1919 7 років тому
хотелось бы увидеть видео как витаскиват из готовова шаблона меню или вид новостей с html и css кодом и видео про движок dle как витаскиват нужное нам и ставет в другой шаблон
@velimirpokhvalenko3297
@velimirpokhvalenko3297 4 роки тому
Спасибо огромное! Вы лучшый!
@snchs7
@snchs7 3 роки тому
Проблема, возникшая с начала видео (с float), можно решить с помощью убратия точки запятой в классе sidebar, после wight.
@user-px5ny1kl4u
@user-px5ny1kl4u 3 роки тому
уже раз 5-ый пересматриваю данный видео урок - видимо где то что то я делаю не так, если каждый раз что то да не так как в видео
@exxtrippy
@exxtrippy 3 роки тому
есть дс?
@exxtrippy
@exxtrippy 3 роки тому
просто с того момента некоторые детали поменялись
@user-px5ny1kl4u
@user-px5ny1kl4u 3 роки тому
@@exxtrippy что такое дс?
@user-qu5rs7be3q
@user-qu5rs7be3q 7 років тому
Классный обзор! А что за музыка на заднем фоне, название?
@mazafakaphilosopher
@mazafakaphilosopher 6 років тому
Давай побольше таких видео!
@murkoteg
@murkoteg 5 років тому
Чувак, ты гений. Аааааа😳 крутяк
@abdulhamid_bd
@abdulhamid_bd 4 роки тому
2020: используем грид или флекс верстку
@newview8925
@newview8925 4 роки тому
Согласен можно совмещать грид и флекс верстку
@basstiyofficial67
@basstiyofficial67 3 роки тому
Кст как я выжу в коментах эти информации уже устарели. Тоист уже можно сделать более лёгким способом
@snobou12
@snobou12 3 роки тому
@@basstiyofficial67 бутстрэп
@flatronkujo
@flatronkujo 3 роки тому
@@snobou12 Не рекомендовал bootstrap,потому что сайт будет долго загружатся.
@snobou12
@snobou12 3 роки тому
@@flatronkujo Каким образом? И на сколько, если у тебя в нетворке выставить 3g
@arturkarneyavets7586
@arturkarneyavets7586 5 років тому
а как сделать так что бы можно было листать страницу ? что бы она была больше по вертикали , или в будущем при добавлении контента она станет в итоге больше ?
@user-ly8ik4vt9p
@user-ly8ik4vt9p 7 років тому
Очень хорошее видео, сильно помог
@nikitadnepr1735
@nikitadnepr1735 7 років тому
Хауди как ты делаешь так,что при надписи #conternt он у тебя сразу в div все помещал как на 2:28?
@HowdyhoNet
@HowdyhoNet 7 років тому
+Nikita Dnepr Emmet
@diestri3654
@diestri3654 7 років тому
таб точнее нажмимай после
@oleksiimiroshnychenko3850
@oleksiimiroshnychenko3850 7 років тому
Хауди, ты работаешь на Убунту. Очень интересует набор софта, который ты используешь для верстки именно под Убунту, в том числе мелкие полезные плюшки типа Colour Picker и т.д.
@HowdyhoNet
@HowdyhoNet 7 років тому
Да, на Ubuntu и фронт и бэк пишу
@musaxudiyev7754
@musaxudiyev7754 4 роки тому
Какой плагин надо установить чтоб после точки, сам дописывался класс в sublime?? Подскажите пожалуйста:)
@user-ni9ir7uj2v
@user-ni9ir7uj2v 4 роки тому
emment Всегда пожалуйста но в 2019годе думал все знают Emmtnt но сам недавно узнал XD
@musaxudiyev7754
@musaxudiyev7754 4 роки тому
Артур Каримуллин 😀 спасибо, прослушивая другие уроки узнал, что просто нужно было нажать таб😁
@user-ni9ir7uj2v
@user-ni9ir7uj2v 4 роки тому
@@musaxudiyev7754 учись удачи :--)
@musaxudiyev7754
@musaxudiyev7754 4 роки тому
Артур Каримуллин, спасибо и тебе удачи.
@anmenigyt
@anmenigyt 3 роки тому
Не ожидал этого. Что сюда попаду по html. Dino 3D
@kenabd5129
@kenabd5129 5 років тому
ХАуиди пожалуйста оставляй ссылки на хотя бы на часть кода
@ivanprogramming
@ivanprogramming 7 років тому
Хауди, Класные Видосы. Единственное скидывай ссылку на файлы(например на gulp файлы)
@Cronles
@Cronles 7 років тому
Подскажите, в какой программе идет работа? Это ведь не notepad++?
@HowdyhoNet
@HowdyhoNet 7 років тому
Нет, это Sublime Text 3.
@user-of4kp7pe9l
@user-of4kp7pe9l 7 років тому
все четко , но прошу вас снять полный урок по созданию сайта с 0
@user-vu9bv6gs2o
@user-vu9bv6gs2o 5 років тому
Присоединяюсь А Кену.
@user-cj2wu2do5w
@user-cj2wu2do5w 6 років тому
Что делать,если после того,как я даю цвет id header,а потом даю другой цвет id content,цвет content просто становится поверх предыдущего,а не под ним,паддинги и марджины не помогают.
@vladgolodok3705
@vladgolodok3705 5 років тому
Ребят ,подскажите ,как сделать так ,чтоб gulpfile работал и обновлял . Не могу подключить
@nojik-ejik
@nojik-ejik 5 років тому
Раньше. До бутстрапа на резиновых сайтах и не только я этот вопрос решал так. Контейнер основного блока имел полицию реалтайв. Контент width:100% padding-right:265px; а у сайдбара абсолютное позиционирование и контент 250 пикселей. Выходит, что основная часть адаптируется по ширине, а сайдбар всегда фиксированного размера
@Professor_Ro
@Professor_Ro 3 роки тому
Как сделать подобные блоки без float а на флексах либо гридах?
@Ghost-nf5pz
@Ghost-nf5pz 4 роки тому
Я просто похлопаю!!! ха ах а а ааха ахах ! Гениально! Спасибо большое!!!
@artemkhmelik605
@artemkhmelik605 7 років тому
ты использовал фиксированую высоту для контента... из-за этого футер не до конца вниз опустился... и если float так криво работает, почему бы не использовать display: inline-block;
@khan-gu6jg
@khan-gu6jg 3 роки тому
У меня вопрос можно ли разделить не на 90градусов а на 45градусов (под углом)
Учим HTML за 1 час! #От Профессионала | HD Remake
1:04:45
Хауди Хо™ - Просто о мире IT!
Переглядів 1,5 млн
Учим CSS за 1 час! #От Профессионала
1:26:02
Хауди Хо™ - Просто о мире IT!
Переглядів 2,3 млн
3 НОЧИ в Замке с привидениями | GhostBuster
1:03:33
Дима Масленников
Переглядів 9 млн
Stop This Train, Win a Lamborghini
18:53
MrBeast
Переглядів 100 млн
Как стать Full Stack веб разработчиком? ► Самый Верный Путь!
33:38
Хауди Хо™ - Просто о мире IT!
Переглядів 266 тис.
Я сделал сайт за 10 минут!
13:11
Хауди Хо™ - Просто о мире IT!
Переглядів 1,3 млн
Верстка сайта основные ошибки начинающих
7:40
Тебе НЕ НУЖЕН антивирус! И вот почему :3
11:12
Хауди Хо™ - Просто о мире IT!
Переглядів 162 тис.
Мы НЕ одни во Вселенной, и вот почему...
12:41
Злой Космос
Переглядів 84 тис.
😱 Как стать программистом с нуля? Без курсов самому.
24:43
Хауди Хо™ - Просто о мире IT!
Переглядів 213 тис.