Смещение расположения объекта на экране

Видимость

Рассмотрим следующую задачу. В тексте некоторые слова выделены. При щелчке по этим словам ниже текущего абзаца появляется абзац или несколько абзацев, поясняющий смысл данного слова. При повторном щелчке по слову пояснение исчезает. Решить такую задачу можно, используя свойство «видимость».

Свойство стиля visibility позволяет сделать объект видимым или невидимым. Невидимый объект может занимать или не занимать место на экране. К сожалению, в разных версиях браузеров результат может быть разным. В Internet Explorer 6 при изменении видимости с помощью свойства visibility место под объект остается занятым, т.е. остается пустое поле. Если же вы хотите добиться эффекта «раздвигания текста», то используйте свойство display. Это менее удобное свойство, так как для указания невидимости достаточно указать display:none, а для указания видимости (см. HTML-Reference), требуется указать тип объекта, а значит, его надо знать.

<div id=dd1 style="font-size:40; visibility:visible"

onclick="this.style.visibility='hidden'" title="Щелкните – исчезну!">

Из сумерек видением ко сну вдруг выйдет девочка, на вид - четыре года.

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div id=dd2 style="font-size:40; display:block"

onclick="this.style.display='none'" title="Щелкните – исчезну совсем!">

И как пловец испытывает воду, девчушка валенками пробует весну...

</div>

... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......

<div onclick="dd1.style.visibility='visible'">Появится первый</div>

<div onclick="dd2.style.display='block'">Появится второй блоком</div>

<div onclick="dd2.style.display='inline'">Появится второй по-другому – потоком </div>

Смещение расположения объекта на экране

Рассмотрим следующую задачу. С помощью частичного наложения друг на друга двух элементов списка с одинаковым текстом, но разного цвета добиться псевдо объемного вида.

<style>
body { background : #006000}
p.main { font-family : Arial;font-size : 12pt;color : white}
p.info { font-family : Arial;font-style : italic;color : #80C000}
p span { font-style : italic;font-size : 14pt}
a { color : #C0C8FF;font-weight : bold}
.text { color: red;margin-left: 10px;
font-size: 28px;font-family: Arial Black }
.highlight { margin-top: -38px;margin-left: 8px;
color: darkred;font-size: 28px;font-family: Arial Black }
</style>

...
<P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}">The HTML Reference Library</DIV>
<DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}">The HTML Reference Library</DIV>
<P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. It is available in the following formats :
<UL>
<LI><DIV CLASS="text">Windows 3.x</DIV>
<DIV CLASS="highlight">Windows 3.x</DIV>
<LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV>
<DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV>
</UL>
<P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:htmlib@htmlib.demon.co.uk">htmlib@htmlib.demon.co.uk</A>

В примере показано наложение двух тегов div и двух тегов p с целью достижения объемного эффекта при помощи отрицательного значения свойства стиля margin-left и margin-top.