Тэг div

Доброе время суток всем. Помогите освоить div-ы. До сих пор работал только с таблицами. Хочу перейти на дивы, но сколько инфы по дивам не читал, даже с примерами, не могу сделать ничего своего на них. Просто не могу понять как правильно их расстановить на странице, чтобы отображались как надо, а не ездили куда попало. Можете объяснить пошагово с комментами какая строка и где, для чего нужна? Заранее всем спасибо.

-----
Написать код не проблема. Написать правильный код- это наука.

position, margin - читайте

Управление отображением div-слоев на странице в простых случаех осуществляется за счет их взаимного позиционирования и вложения - с указанием требуемых CSS-свойств которые определяют их внешние размеры и ширину различных отступов

-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/

Я перечитал уже кучу сайтов. Не смог сделать абсолютно ничего. Не доходит до меня. Не могу на этих....дивах сделать каркас для сайта (на таблицах не хочу уже, хочу научиться), но не знаю почему, но ни по одному приведённому примеру ничего не получается. Разъезжаются эти дивы все. Вроде пропишу в CSS что нить дополнительно, выравнивается, но делаю следующий див он вообще уезжает чёрт знает куда. Не могу понять их взаимодействие между собой. И ещё, пробую в получившихся дивах написать большой текст, как он выходит за пределы этого дива, хотя в CSS для этого дива прописано width: 250px;. В общем бестолковый я, не могу понять что к чему. Сможет кто нибудь помочь, на пальцах объяснить?

-----
Написать код не проблема. Написать правильный код- это наука.

Евгений 777 http://www[dot]smashingmagazine[dot]com/[dot][dot][dot]you-should-know/
так сказать "на пальцах" расписаны основные моменты. конечно знание английского на уровне хотя бы школы.

-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

Viper - нифигасе на пальцах ))))))))))))))))))
Евгений 777 ня воть пАпрАстому (Па руски) Аписняет ДядЯ на видио, как и чаво:
http://rapidshare[dot]com/files/4123[dot][dot][dot]/div_verstka[dot]rar
))))))))))))))))))))))))

-----
Шта? Репозиторий?

CSS хорошо знаешь?
Прочитай ка вот это, я на таблица вообще никогда не верстал.
К. Шмитт "CSS рецепты программирования"
Эрик А. Мейер "CSS каскадные таблицы стилей. Полное руководство"

В первой книге целая глава по вёрстке в том числе и дивами Только вот в интернете я её не нашёл, пришлось купить, хотя может уже и лежит где.

-----
Думать надо головой, а не головкой!

Да вроде проще даже чем таблицы..
JustUserR, все правильно говорит.
Сначало строиться главный каркас. те к примеру header body footer. Далее вкладываются divы с использованим стилей. Те мы выравниваем содержимое во всех столбцах. Во в принципе и все. Соотвественно если нужна резина то ставим проценты если жесткая то пикселя. Плюс свойствами управляем дальнейшим наложением слоев.

Пытался разобраться сам, но не смог, слава богу нашёл видеоурок по DIV'ам вот пробую сделать сам. Приложу код HTML и CSS, а также скрин того что получается. Почему то я никак не могу понять простой текст из книг, пока не увижу вживую что и как делается, просто не могу ничего сделать, даже простейших вещей Скину всё в архиве. Кое что уже сделал, надо сделать, чтобы если например "меню" кончается рантше чем "контент", чтобы у меня был просто фон хотя бы до того же уровня что и кончается "контент", т.е чтобы не было пустоты мужду например "меню" и "футером", потом у хедера и футера дивы кончаются в конце страницы, а у среднего дива (у средней строки) край немного не доходит до того же уровня, почему?? И также не могу понять, почему текст в "контенте" прилипает к низу дива, мне надо его поднять немного ниже чем начинается верхний бордер у дива "контент". Скажите что я не так делаю, где ошибки у меня, замучился уже

-----
Написать код не проблема. Написать правильный код- это наука.

забыл присобачить файлы, вот они

-----
Написать код не проблема. Написать правильный код- это наука.

В случае если вы имеете div-блок с фиксированными размерами ширины и высоты указанных в соответствующих CSS-свойствах - но его фактическое отображение на странице будет зависеть и от множества других факторов и свойств которые нужно учитывать Обычно при переполнении div-блока находящимися в нем inline-элементами происходит его постепенное расширение в высоту - тем не менее в зависимости от свойств контейнерных элементов в которых определенный вид расширения может быть заблокирован значениями соответствующих CSS-свойства - в вашем основной div-блоке может производиться увеличение размеров и по ширине Для фиксации размера блочного элемена вне зависимости от его содержимого используется CSS-свойство overflow:hidden и его модификации для определения параметров перекрытия по ширине и высоте - а для того чтобы размер блока также не зависел от величин полей и отступой следует использовать режим IE quirks который активизируется значением CSS-свойства box-sizing:bordex-box

-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/

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

Заготовка: скачать (посмотреть)

и полезную ссылочку

Памятка CSS

еще даю пример, позиционирование блока по центру страницы:

-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.

LEONeso Для того чтобы унифицировать отображение блочных элементах по фиксированным геометрическим параметрам а вместе с этим и их относительное позиционирование в различных браузерах - полезно использовать CSS-аттрибут box-sizing:border-box который позволяет указывать ширину и высоту блока как в модели IE quirks - что является удобным по причине того что все размеры указываются строго фиксированно вне зависимости от других параметров типа ширины border-границы или padding-отступа

-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/

Я не фанат IE в целом =) но имею эмуль xp pro с ie6.
Люблю использовать, то , что работает в большинстве браузерах.
На самом деле очень странно сейчас делать сайты для старых браузеров т.к. FF безвозвратно удаляет все старые версии браузера, без возможности скачать с офф сайта и постоянно рекомендует обновлять, думаю так же делают и другие разработчики... а вот то что мелкософт сделал с IE7 и как гнилая паскуда не давала никому скачать, вот - это странно (требуя лицензии, а как известно 50% юзеров винды без лицухи).

- У каждого свои цели и способы их реализации.

-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.

Если рассматривать конкретную технологию IE quirks которая определяет возможности CSS-стилей - то она дает дополнительное удобство при позиционировании блоках на странице и применяется во многих других браузерах - таких как Opera и Chrome путем включения опции box-sizing:bordex-box Преимущество использования формата quirks заключатеся в том что с его помощью размеры всех блочных элементов строго задаются с помощью свойств width и height - вне зависимости от любых других параметров таких как ширина border-границы и величина отступов - это удобно при создани блоков с запретом перекрытия overflow и позволяет обеспечивать им точный размер

-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/