тег div Как создать свой сайт > Вебмастеру > Создание своего сайта > Блог Андрея Морковина > Работа с тегом «div»

Работа с тегом <div> — основным инструментом блочной вёрстки

Если человек не хочет по утрам заниматься бегом,
его ничто не может остановить.
Йоги Берра.
23 октября 2009 года

    Предлагаю вам, уважаемый читатель, познакомиться с тегом <div>. Да так познакомиться, чтобы никаких вопросов о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать <div>, больше не возникало. Ведь тег <div> — основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.

    Информацию о теге я записал в формате видеоурока.

Тематика видеоурока:

  • Размеры блока «div» и контента, их соотношение;
  • Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative);
  • Объясняю принципы построения плавающей модели;
  • Иллюстрирую необходимость использования свойства CSS clear:both.

    Переходите к просмотру видео.

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

Комментарии:

Alekim
Спасибо Андрей за видео урок. Многое прояснил для себя.
Правда просмотрел пока только 1ю часть, возник вопрос и пока его не забыл, отпишусь.
В конце урока говорится об обтекаемости блоков див.
«первый блок див при свойстве Float:left прилипает своим левым блоком к левой границе родительского элемента. В данном случае родительский элемент это тег Body»
Так вот вопрос. Если при данном свойстве каждый блок див должен прилипать к левой границе родительского элемента, почему второй блок прилип к левому блоку а не к левой границе тега Body?

Андрей Морковин
Очень правильный вопрос. Конечно, не к родительскому блоку, а к предыдущему блоку в нормальном потоке.

Гений
И не только с блогом.
Спасибо, все детально разъяснил.

Виталий
Здравствуйте Андрей! Спасибо за содержательный материал. У меня такой вопрос: а надо ли париться с версткой CSS, если есть движки типа Вордпресс. Одним словом, как на Ваш взгляд, что лучше сайт сверстанный самолично, или взять скрипт движка, да и только. Каковы достоинства и недостатки обеих методов?! С уважением Виталий.

Андрей Морковин
Здравствуйте, Виталий!
Во-первых, чувствую у Вас некоторую запутанность в понятиях «движок» и «верстка».
Действительно, есть множество движков, например тот же WordPress, но они не имеют отношения к верстке.
Движки эти — это PHP-скрипты, MySQL базы данных, которые позволяют реализовать те или иные функции (в WordPress — это добавление постов, сортировка по категориям, отправка комментариев и т.д.). Вся эта штуковина называется БИЗНЕС ЛОГИКА.
Другая штуковина — это ЛОГИКА ОТОБРАЖЕНИЯ. Вот тут уже, здравствуй, верстка. На все эти разнообразные движки сверху надевается шкура внешнего вида, которая выводит в те или иные места сформированные PHP-скриптами данные.
Теперь давайте разберемся с Вашим вопросом. Он, как вы видите, распался на два:
1) Нужно ли писать бизнес логику самому или нужно использовать готовые скрипты и движки.
2) Нужно ли самому верстать логику отображения, или использовать готовые шкурки.
Ответ такой: нужно использовать готовое.
А вот на вопрос «нужно ли самому разбираться в HTML, CSS, PHP, MySQL» — ответ ДА, обязательно. Иначе вы не сможете отличить плохой код от хорошего. Среди готовых шкурок и скриптов я встречал принципиальные ошибки, которые могли бы привести к неприятным последствиям.
Раз уж мы тут про HTML — иногда, заглянув в HTML и CSS код готовых тем для WordPress, я прихожу в ужас от безалаберности и наплевательства при их верстке.
Это одна сторона. Другая сторона — предположим готовый шаблон Вас не устраивает в той или иной мере (а это обычно таки бывает). Или у Вас возникло жгучее желание добавить какой-то блок. Как Вы это сделаете без знаний HTML и CSS?
Порой задача стоит столь специфическая, что выбор среди готового продукта Вас не удовлетворяет. Оно так и бывает для сложных интернет-проектов. Вы не можете подобрать ничего из готовых наработок, чтобы это нечто, на достаточном уровне без огромного количества переделок, отвечало Вашим требованиям. И тут становится гораздо проще сделать все самому с нуля.
Так что все зависит от конкретной ситуации, но знания обязательны при любом раскладе.

Виталий
Спасибо Андрей за хороший ответ. В отношении запутанности Вы правы, я еще только учусь. С уважением Виталий.

Дмитрий
Лучше внедрять другие шаблоны или свои и как влияет это всё на индексацию страниц. Что лучше, а что хуже…Есть же в верстке, что-то, что помогает при индексации страниц роботами, можете рассказать о некоторых секретах… Даже о тех, которые в Вордпрессе используются, потому что сайты довольно-таки быстро индексируются, когда построены на движке Вордпресса.

Андрей Морковин
Друзья, мы очень далеко начинаем уходить от темы поста
Тут нельзя однозначно сказать, что лучше, а что хуже. Бывают хорошие темы, отлично влияющие на индексацию и ничего самому писать не нужно. Бывает все наоборот.
Но как по мне, копаться среди огромного количества тем, выискивать что-то готовое и подходящее — это не по мне. Я беру какую-то более-менее подходящую тему и начинаю ее допиливать, в результате практически полностью переделывая (потому что все они очень косячные, не косячная только дефаултная, но она уродливая).
О том, что помогает в индексации и занятии правильных позиций можно почитать здесь: http://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»

Орест
Здраствуйте Андрей!
Весьма полезные уроки, но у меня возник вопросик, как зделать в блоковой версии ссылки на нужный блок, как делалось с фреймами
пример:
дапустими есть ссылка на етот фрейм
вот, а как зделать похожій вариант з ????((((((

Иван
Спасибо вам Андрей!!!
Ваши уроки очень понятны, и легко усваиваются!
Огромное СПАСИБО!!!

Константин
Спасибо за бонус!

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Партнёрская программа интернет-магазина Двоеточие, тире

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!