Предлагаю вам, уважаемый читатель, познакомиться с тегом <div>. Да так познакомиться, чтобы никаких вопросов о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать <div>, больше не возникало. Ведь тег <div> — основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.
Информацию о теге я записал в формате видеоурока.
Тематика видеоурока:
- Размеры блока «div» и контента, их соотношение;
- Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative);
- Объясняю принципы построения плавающей модели;
- Иллюстрирую необходимость использования свойства CSS clear:both.
Переходите к просмотру видео.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- Условные комментарии
- Вёрстка динамической кнопки на CSS
- Работа с визуальным редактором CKeditor
- ТОП популярных HTML-тегов
- Раскрутка сайта. Часть 2. Маркетинг
Комментарии:
Alekim
Спасибо Андрей за видео урок. Многое прояснил для себя.
Правда просмотрел пока только 1ю часть, возник вопрос и пока его не забыл, отпишусь.
В конце урока говорится об обтекаемости блоков див.
«первый блок див при свойстве Float:left прилипает своим левым блоком к левой границе родительского элемента. В данном случае родительский элемент это тег Body»
Так вот вопрос. Если при данном свойстве каждый блок див должен прилипать к левой границе родительского элемента, почему второй блок прилип к левому блоку а не к левой границе тега Body?
Андрей Морковин
Очень правильный вопрос. Конечно, не к родительскому блоку, а к предыдущему блоку в нормальном потоке.
Гений
И не только с блогом.
Спасибо, все детально разъяснил.
Виталий
Здравствуйте Андрей! Спасибо за содержательный материал. У меня такой вопрос: а надо ли париться с версткой CSS, если есть движки типа Вордпресс. Одним словом, как на Ваш взгляд, что лучше сайт сверстанный самолично, или взять скрипт движка, да и только. Каковы достоинства и недостатки обеих методов?! С уважением Виталий.
Андрей Морковин
Здравствуйте, Виталий!
Во-первых, чувствую у Вас некоторую запутанность в понятиях «движок» и «верстка».
Действительно, есть множество движков, например тот же WordPress, но они не имеют отношения к верстке.
Движки эти — это PHP-скрипты, MySQL базы данных, которые позволяют реализовать те или иные функции (в WordPress — это добавление постов, сортировка по категориям, отправка комментариев и т.д.). Вся эта штуковина называется БИЗНЕС ЛОГИКА.
Другая штуковина — это ЛОГИКА ОТОБРАЖЕНИЯ. Вот тут уже, здравствуй, верстка. На все эти разнообразные движки сверху надевается шкура внешнего вида, которая выводит в те или иные места сформированные PHP-скриптами данные.
Теперь давайте разберемся с Вашим вопросом. Он, как вы видите, распался на два:
1) Нужно ли писать бизнес логику самому или нужно использовать готовые скрипты и движки.
2) Нужно ли самому верстать логику отображения, или использовать готовые шкурки.
Ответ такой: нужно использовать готовое.
А вот на вопрос «нужно ли самому разбираться в HTML, CSS, PHP, MySQL» — ответ ДА, обязательно. Иначе вы не сможете отличить плохой код от хорошего. Среди готовых шкурок и скриптов я встречал принципиальные ошибки, которые могли бы привести к неприятным последствиям.
Раз уж мы тут про HTML — иногда, заглянув в HTML и CSS код готовых тем для WordPress, я прихожу в ужас от безалаберности и наплевательства при их верстке.
Это одна сторона. Другая сторона — предположим готовый шаблон Вас не устраивает в той или иной мере (а это обычно таки бывает). Или у Вас возникло жгучее желание добавить какой-то блок. Как Вы это сделаете без знаний HTML и CSS?
Порой задача стоит столь специфическая, что выбор среди готового продукта Вас не удовлетворяет. Оно так и бывает для сложных интернет-проектов. Вы не можете подобрать ничего из готовых наработок, чтобы это нечто, на достаточном уровне без огромного количества переделок, отвечало Вашим требованиям. И тут становится гораздо проще сделать все самому с нуля.
Так что все зависит от конкретной ситуации, но знания обязательны при любом раскладе.
Виталий
Спасибо Андрей за хороший ответ. В отношении запутанности Вы правы, я еще только учусь. С уважением Виталий.
Дмитрий
Лучше внедрять другие шаблоны или свои и как влияет это всё на индексацию страниц. Что лучше, а что хуже…Есть же в верстке, что-то, что помогает при индексации страниц роботами, можете рассказать о некоторых секретах… Даже о тех, которые в Вордпрессе используются, потому что сайты довольно-таки быстро индексируются, когда построены на движке Вордпресса.
Андрей Морковин
Друзья, мы очень далеко начинаем уходить от темы поста
Тут нельзя однозначно сказать, что лучше, а что хуже. Бывают хорошие темы, отлично влияющие на индексацию и ничего самому писать не нужно. Бывает все наоборот.
Но как по мне, копаться среди огромного количества тем, выискивать что-то готовое и подходящее — это не по мне. Я беру какую-то более-менее подходящую тему и начинаю ее допиливать, в результате практически полностью переделывая (потому что все они очень косячные, не косячная только дефаултная, но она уродливая).
О том, что помогает в индексации и занятии правильных позиций можно почитать здесь: https://www.seoded.ru/webmaster/morkovin/optimizaciya.html (в комментариях к посту можем более детально все обсудить) а еще вот здесь: http://www.terehoff.com/temlate-optimisation.html
Ольга
Здравствуйте Андрей.
Что то у меня не получилось со скачиванием урока. Вернее он скачался, но отображается листком с заглавием. А мне бы очень пригодился этот урок, может проверите, что там и как?.
Ольга
Простите. Всё получилось. Спасибо большое, очень нужный урок!!!!
Андрей Морковин
Отлично. Хорошо, что все работает нормально.
Gomer
Привет, Андрей. Разобрался со скачиванием с Депозита. Теперь могу качать Ваши уроки. Очень рад этому, потому что Вы очень доступно и локанично поясняете материал. Спасибо.
Андрей Морковин
Ну вот и отлично
Never Lex
Хорошая идея разобраться с позиционированием одним ударом Очень полезная информация.
Олександр
Дякую за відео. Література — це добре, але таке відео то взагалі бомба)))
Гость
Омельченко, це ти?!
Mirrow
У меня возник такой вопрос: зачем создавать пустой div, почему не задать параметр clear:both прямо в нижележащем div-е?
Начинающий
Одинарный тэг br style=»clear: both»
Лучше так:
вместо «clear: both» можно «overflow: hidden»
Орест
Здраствуйте Андрей!
Весьма полезные уроки, но у меня возник вопросик, как зделать в блоковой версии ссылки на нужный блок, как делалось с фреймами
пример:
дапустими есть ссылка на етот фрейм
вот, а как зделать похожій вариант з ????((((((
Иван
Спасибо вам Андрей!!!
Ваши уроки очень понятны, и легко усваиваются!
Огромное СПАСИБО!!!
Константин
Спасибо за бонус!