Иллюстрированный самоучитель по созданию сайтов


Динамическое управление позиционированием элементов - часть 2


Вот теперь при загрузке страницы (а точнее, сразу после нее) наш блок

<DIV>

, содержащий таблицу, будет отцентрирован. Но как быть с ячейками таблицы? Ведь мы знаем, что если даже в тегах

<TD>

указать ширину и высоту, эти требования будут восприняты броузером лишь как рекомендательные, и на экране просто не отобразится ни одна ячейка. Если же поместить в ячейки неразрывные пробелы, то строки таблицы получатся мизерной высоты (рис. 7.8).

puc. 7.8. Указание в тегах

<TD>

высоты и ширины, не приводит к желаемому результату

Что же делать? Есть один прием, который позволяет сделать минималь- ную ширину и высоту ячейки таблицы такой, какой нужно именно нам, а не такой, какой захочет броузер. Дело в том, что при наличии рисунка в ячейке таблицы броузер обязательно расширит границы ячейки так, чтобы рисунок был виден целиком. Поэтому создадим очень маленький графи ческий файл, содержащий целиком прозрачный рисунок (в нашем при- мере был использован прозрачный рисунок размером 4х3 пиксела). Рисунок такого маленького размера будет загружаться очень быстро, прак- тически не влияя на скорость загрузки страницы. Однако в соответствую- щем ему теге

<IMG>

установим ширину и высоту (с помощью атрибутов WIDTH= и HEIGHT=) такими, какими мы хотим видеть ширину и высоту ячейки таблицы. Таким образом, мы получим как бы пустую ячейку с заданными минимальными размерами!

Вот как можно это сделать в нашем примере:

<TD><IMG SRC="Images/diafanol.gif" WIDTH="100" HEIGHT="100"</TD>

На всякий случай поместим этот рисунок в каждую ячейку таблицы. Теперь давайте поместим изображения плашек слева от игрового поля, расположив их вертикальными рядами по пять штук:

<IMG ID="pl" SRC="Images/digitl.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="1" STYLE="position: absolute; top: 120px; left: 10px;">

<IMG ID="p2" SRC="Images/digit2.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="2" STYLE="position: absolute; top: 220px; left: 10px;">




- Начало -  - Назад -  - Вперед -



Книжный магазин