HTML+CSS+JavaScript

Здрасте. Объясните, что такое слои в HTML, какими тегами они задаются, в чём их преимущество перед таблицами и т.д. Либо ссылочку дайте, где можно об этом прочитать.

Слои задаются тегами <div> и </div>, преимущество их заключается в том, что это гораздо короче, чем <table><tr><td></td></tr></table>, в результате чего получается более прозрачная и более легковесная структура документа. Полностью заменить таблицы на слои на современном этапе не выйдет (браузеры не поддерживают все возможности современных стандартов), да не нужно... Так как слои заменяют не табличные структуры, которые и лучше таблицами и представлять, а заменяют таблицы в области дизайна - так как изначально таблицы для этого не предназначались - их задача струтурировать документ, а не выступать в качестве каркаса дизайна.

"Слоев" в HTML давно уже нет.
Очень-очень давно - с октября 1994 по март 2000 года, "когда деревья были большими"(с) существовал браузер Netscape (от 1-й версии до 4-й) и был этот Netscape единственным бесплатным браузером, так вот в этом браузере существовал специальный тег <LAYER>, что и переводится как "слой".
Ни один иной браузер НИКОГДА этого тега не поддерживал.

Как понимаете, российские пользователи интернета в те времена (1994-1999) были бедными (неплатежеспособными). И пользовались исключительно халявной продукцией в сети. И, соответственно, только браузером Netscape.

В апреле 200 года вышла новая версия браузера Netscape (причем сразу ШЕСТАЯ, а 5-й не появлялось даже в бета-версии) - и от этого тега решено было ОТКАЗАТЬСЯ. И это ЕДИНСТВЕННЫЙ случай в истории браузеростроения, когда фирма-производитель перестает поддерживать то, что сама ввела. К примеру, многие теги и свойства тегов в браузере Explorer давно стали deprecated (сиречь, запрещенными) по спецификации W3C, но Эксплорер их поддерживает до сих пор, даже в самых последних версиях (например, тег <PLAINTEXT>). А вот Netscape отказался от поддержки собственной наработки... вот и потерял поддержку у специалистов/пользователей - с первого места по популярности Netscape сейчас скатился на 7-10-е.


В общем, никаких СЛОЕВ вот уже более 7-ми лет НИГДЕ НЕТ.

Существует свойство стиля (правило CSS) Z-INDEX, кое было установлено спецификацией CSS2 в 1997 году и в том же 1997 году реализовано в браузере Эксплорер (4-я версия).
Это свойство позволяет ЛЮБОЙ (!!!) тег HTML "поднять над страницей", т.е разместить "выше страницы". Поддерживается это свойство для ВСЕХ тегов HTML абсолютно ВСЕМИ современными браузерами.

Ещё раз подчеркиваю - ЛЮБОЙ тег!!!! А не только <DIV>

Но... недалекие российские программеры, пользовавшие тот самый Netscape, и понимавшие СЛОЙ как специальный отдельный тег, не смогли понять сути этого свойства Z-INDEX и, когда тег <LAYER> перестал существовать, эти ребята САМИ для себя решили - "СЛОЕМ будем называть теперь только и исключительно тег <DIV>".

И эти недалекие ребята (и те, кто сегодня их бездумно слушает, не пытаясь самостоятельно разобраться) до сих пор "жуют ту же жвачку", т.е. советуют везде и всем: "если, например, хочешь разместить какой-нить текст НАД какой-нить картинкой <IMG>, необходимо поместить этот текст в СЛОЙ <DIV>, которому надо прописать Z-INDEX: 10"
И когда их спрашивают - "а если этот текст у меня оформлен в виде таблицы, то что делать?" - они отвечают: "Помести эту таблицу в этот самый <DIV STYLE="Z-INDEX: 10"><TABLE...>...</TABLE></DIV>"

Ибо ума у них не хватает прописать <TABLE STYLE="Z-INDEX: 10">...</TABLE>, что будет прекрасно работать без какого-либо дополнительного контейнера <DIV> - ибо для них, недалеких, слой - это только и исключительно <DIV> :-)

"Ну, сумасшедшие, что с них возьмешь?" (с)

никогда не пользовалась браузером Netscape. он вызывал отвращение, омерзение и
стойкое ощущение непрофессионализма как его создателей, так и его пользователей.
недаром Netscape умер, был бы хорош, не умер бы.

и вовсе не любой ТЭГ поднимает z-index, он применим только к блочным элементам.
к тому же может и опускать их. а добавлять свойства таблицам или ячейкам с помощью
div - это издержки Dream'a, те, кто кода не знает, именно так и орудуют. вот мой любимый
редактор себе такого не позволяет.

>и вовсе не любой ТЭГ поднимает z-index, он применим только к блочным элементам.

Поделитесь, плиз, источником информации. Кто вам таковое - про блочные - "напел"?

Смотрите, например, http://msdn.microsoft.com/en-us/library/ms535167(VS.85).aspx , а там раздел применимости "Applies to":

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, I, IFRAME, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Когда, например, <SPAN> стал блочным элементом?:-)

Найдите в мозилловской доке - http://developer.mozilla.org/en/docs/CSS:z-index - хоть что-нить о том, что, например, <SPAN> не поддерживает Z_INDEX...

И, наконец, удостоверьтесь, что ЛЮБЫЕ теги Z-INDEX поддерживают - проверьте в любом браузере:

<html> <head> <style> span {position: absolute; top: 100px; left: 100px} #first  {background-color: aqua; z-index: 1} #second {background-color: lime; z-index: 2} </style> <script> var CurrSt = 0; function mF () { if (CurrSt == 0)    {    document.getElementById  ('first').style.zIndex = 2;    document.getElementById ('second').style.zIndex = 1;    CurrSt = 1;    } else    {    document.getElementById  ('first').style.zIndex = 1;    document.getElementById ('second').style.zIndex = 2;    CurrSt = 0;    } } </script> </head> <body> <span id="first">FIRST</span> <span id="second">SECOND</span> <input type="button" value="Change Z-INDEX" onclick="mF ()"> </body> </html>

1.2.5. Блочные и текстовые элементы
Большинство элементов HTML, используемых в теле документа, подразделяются на блочные (block-level) и текстовые (inline) элементы. Блочные элементы могут содержать как текстовые элементы, так и другие блочные элементы. При отображении они всегда выводятся как отдельный абзац. Текстовые элементы могут содержать только текст и другие текстовые элементы, но не могут содержать блочных элементов. При отображении они выводятся в текущей строке.