TUTORIAL http://phpforms.net/tutorial Just another WordPress weblog Wed, 14 Jul 2010 08:03:25 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 z-index http://phpforms.net/tutorial/css-reference/z-index.html http://phpforms.net/tutorial/css-reference/z-index.html#comments Wed, 14 Apr 2010 11:00:56 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3503
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all docked elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#border-color-properties

Description
Any positioned elements on a web page can be superposed each other in a certain order. Thus they are simulating the third measurement that is perpendicular to the screen. Each element can be both below and above placing other objects on a z-axis. The attribute z-index operates here.

Syntax

z-index: number | auto

Arguments
It is possible to use positive or negative integer and also a zero as arguments. The more value the above is an element in comparison with those elements in which a value is less. There is the element in HTML code at equal value z-index which is described below. Though the specification also allows to use negative values z-index but such elements are not displayed in the following browsers: Netscape, Mozilla and Firefox.
There is «Auto» that is applied apart from numerical values. The elements order is under construction automatically proceeding from their position in code HTML and a membership to the parent. It is because of affiliated elements have the same number that their parental element.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>z-index</title>
  <style type="text/css">
   #layer1, #layer2, #layer3, #layer4 {
    position: relative; /* Relative positioning */
   } 
   #layer1, #layer3 {
    font-size: 50px; /* Font size in pixels */
    color: #000080; /* Blue text color */
   }
   #layer2, #layer4 {
    top: -55px; /* Top text shift */
    left: 5px; /* Shift text to the right */
    color: #ffa500; /* Orange text color */
    font-size:70px;  /* Font size in pixels */
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
   #layer3 { z-index: 3; }
   #layer4 { z-index: 4; }
  </style>
 </head>
 <body>
  <p>Layer 1 above</p>
  <div id="layer1">Layer 1</div>
  <div id="layer2">Layer 2</div> 
  <p>Layer 4 above</p>
  <div id="layer3">Layer 3</div>
  <div id="layer4">Layer 4</div> 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.zIndex

Remark
The list created by the tag <SELECT> in the browser Internet Explorer 6 is always imaged above other elements independent from the value "z-index".
Only beginning from the version 5.5 Internet Explorer allows to use the attribute "z-index" to the frames (tag <FRAME>) and float frames (<IFRAME>).
Firefox 3 understands the negative value of "z-index" reasonably.
]]> http://phpforms.net/tutorial/css-reference/z-index.html/feed 0 word-spacing http://phpforms.net/tutorial/css-reference/word-spacing.html http://phpforms.net/tutorial/css-reference/word-spacing.html#comments Wed, 14 Apr 2010 10:43:37 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3499
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value normal
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing

Description
It determines an interval between words. If the alignment parameter justify is determined, the attribute word-spacing does not operate because the interval between words will be installed compulsorily. It is done for the text line to be aligned on right and left borders.

Syntax

word-spacing: value | normal

Arguments
Any units of length accepted in CSS are accepted as values, for example pixels (px), inches (in), points (pt), etc. The parameter value can be negative but it is necessary to check working capacity in different browsers. Percentage record is not applicable. The argument normal determines an interval between words as usually.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>word-spacing</title>
  <style type="text/css">
   P {
    word-spacing: 20px;
   } 
  </style>
 </head>
 <body>
 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1

]]> http://phpforms.net/tutorial/css-reference/word-spacing.html/feed 0 width http://phpforms.net/tutorial/css-reference/width.html http://phpforms.net/tutorial/css-reference/width.html#comments Wed, 14 Apr 2010 10:35:54 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3497
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value auto
Inherited No
Applied To all elements except built-in unreplacable elements, columns and table groups
HTML analog <im width> <table width>
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-width

Description
Sets the width of block or replacable elements (the tag <IMG> refers to them). Width doesn't include the width of borders around the elements, values of indents and fields.
Browsers work with width in different ways. The result of image depends on DOCTYPE used.

Syntax

width: value | percents | auto

Arguments
Any CSS units of length are accepted as values - for example, pixels (px), inches (in), points (pt) etc. When you use the percent record the element's width is calculated depend on parent element's width. If the parent is not specified directly the browser window becomes a parent. The argument "auto" sets the width depend on type and content of the element.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>width</title>
  <style type="text/css">
   .layer1 {
    width: 300px; /* Block width */
    background: #fc0; /* Background color */
    padding: 7px; /* Fields around the text */
    border: 1px solid #ccc; /* Frame parameters */
   }
   .layer2 {
    width: 400px; /* Text block width */
   }
  </style>
 </head>
 <body>
 
  <div class="layer1">
   <p class="layer2">Lorem ipsum dolor sit amet,consectetuer 
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.width
]]> http://phpforms.net/tutorial/css-reference/width.html/feed 0 white-space http://phpforms.net/tutorial/css-reference/white-space.html http://phpforms.net/tutorial/css-reference/white-space.html#comments Wed, 14 Apr 2010 10:30:22 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3488
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value normal
Inherited Yes
Applied To block elements
HTML analog <PRE> <NOBR>
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-white-space

Description
The parameter white-space determines how to display spaces between words. Usually any quantity of blanks in code HTML is shown on web page as one. An exception is the tag <PRE>, the text placed in this container is deduced with all spaces as it has been formatted by the user. Thus, white-space simulates work of the tag <PRE>, but unlike it does not change a font on mono-widthed font.

Syntax

white-space: normal | nowrap | pre

Arguments
normal
The text in a browser window is deduced as usually. Lines carries are determined automatically.
nowrap
Lines carries in the code HTML are ignored. All text is displayed in one line, at the same time addition of the tag
transfers the text on a new line.
pre
The text is shown taking into account all spaces and carries as they have been added by the developer in code HTML. If the line turns out too long and it is not located in a browser window, in this case the horizontal strip of scrolling will be added.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>white-space</title>
  <style type="text/css">
   P.example {
    border: 1px dashed #634f36; /* Frame parameters */
    background: #fffff5; /* Background color */
    font-family: "Courier New", Courier, monospace; /* Font family */
    padding: 7px; /* Fields around the text */
    margin: 0px 0px 1em; /* Indents */
    white-space: pre; /* All spacings and hyphens are taken into account */ 
   } 
   P.exampleTitle {
    border: 1px solid black; /* Frame parameters */
    border-bottom: none; /* Remove bottom line */
    padding: 3px; /* Fields around the text */
    display: inline; /* Image as built-in element */
    background: #efecdf; /* Background color */
    font-weight: bold; /* Bold font */
    font-size: 90%; /* Font size */
    margin: 0px; /* Remove indents */
    white-space: nowrap; /* No hyphens in the text */
   }
  </style>
 </head>
 <body> 
 
  <p class="exampleTitle">Example</p>
  <p class="example">
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Great Fermat's theorem&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   where n - integer number &gt; 2
   lt;/body&gt;
   &lt;/html&gt;
  </p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.whiteSpace

Remark
Browser Internet Explorer 6 and earlier doesn't support the argument "pre". Internet Explorer 7 understands the value "pre" only in «strict» mode ().
Browsers Opera 9 and Firefox 3 тalso work with the value "pre-wrap" saving all spacings and hyphens. But if the text cannot be placed to the specified area the text will be carried automatically to the next line.
]]> http://phpforms.net/tutorial/css-reference/white-space.html/feed 0 visited http://phpforms.net/tutorial/css-reference/visited.html http://phpforms.net/tutorial/css-reference/visited.html#comments Wed, 14 Apr 2010 10:11:42 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3481
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Applied To links (tag <A> )
HTML analog <body VLINK="#RRGGBB">
Reference to specification http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Description
The pseudo-class visited is applied to the links which have been already visited by the user. Also it specifies the style appearance for them.

Syntax

A:visited { ... }
Arguments
No.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>visited</title>
  <style type="text/css">
   a:link {
    color: #0000d0; /* Link color */
   }
   a:visited {
    color: #900060; /* Color of visited links */
   }
  </style>
 </head>
 <body>
 
  <p><a href="link1.html">Visited link</a></p> 
  <p><a href="link2.html">Non-visited link</a></p>
  <p><a href="link3.html">Non-visited link</a></p>
 
 </body>
</html>

The result of this example is shown on the figure 1

]]> http://phpforms.net/tutorial/css-reference/visited.html/feed 0 visibility http://phpforms.net/tutorial/css-reference/visibility.html http://phpforms.net/tutorial/css-reference/visibility.html#comments Wed, 14 Apr 2010 10:00:38 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3475
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value visible
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

Description
It is intended for display or element concealment including a framework round it and a background. At element concealment the occupying place by an element remains behind it, though it is also not becomes visible. If the conclusion of different elements in the same place of the screen is supposed, it is necessary to use absolute positioning or to take advantage of property display for detour of this feature.

Syntax

visibility: visible | hidden | collapse

Arguments
visible
It indicates an element as visible.
hidden
The element becomes invisible, that means it completely transparent because it continues to participate in page formatting.
collapse
If this value is applied not by the lines or table columns, in this case the result of its use will be the same as hidden. If you apply collapse for the cells content, they will react as the style property display: none is added. So, specified lines and columns are cleaned and the table is reconstructed again. This argument is not supported by browser Internet Explorer.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>visibility</title>
  <script type="text/javascript"> 
   function hiddenLayer() {
    document.getElementById("descr").style.visibility = "hidden";
   }
   function showLayer() {
    document.getElementById("descr").style.visibility = "visible";
   }
  </script>
 </head>
 <body>
 
  <p><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img 
  src="button.gif" width="98" height="33" alt="Кнопка"></a></p>
 
  <div id="descr" style="visibility: hidden">
   This exclusion is a subset of astracional 
   supermative monotenious fedonies of cadonar extrafasorium. </div>
 
 </body>
</html>

Object model

[window.]document.getElementById("elementID").style.visibility

Remark
The argument "collapse" is supported by the browser Mozilla only beginning from the version 1.8а. Internet Explorer ignores this value at all.
]]> http://phpforms.net/tutorial/css-reference/visibility.html/feed 0 HTML URL Encoding Reference http://phpforms.net/tutorial/html-basics/html-url-encoding-reference.html http://phpforms.net/tutorial/html-basics/html-url-encoding-reference.html#comments Wed, 14 Apr 2010 09:53:57 +0000 admin http://phpforms.net/tutorial/?p=3464
URL encoding converts characters into a format that can be safely transmitted over the Internet.

URL - Uniform Resource Locator

Web browsers request pages from web servers by using a URL.
The URL is the address of a web page like: http://www.conkurent.com

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set
Since URLs often contains characters outside the ASCII set, the URL has to be converted. URL encoding converts the URL into a valid ASCII format.
URL encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.
URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

Try It Yourself

If you click the "Submit" button below, the browser will URL encode the input before it is sent to the server. A page at the server will display the received input.
Try some other input and click Submit again.

URL Encoding Functions

In JavaScript, PHP, and ASP there are functions that can be used to URL encode a string.
In JavaScript you can use the encodeURI() function. PHP has the rawurlencode() function and ASP has the Server.URLEncode() function.
Click the "URL Encode" button to see how the JavaScript function encodes the text.
Note: The JavaScript function encodes space as %20.

URL Encoding Reference

ASCII Character URL-encoding
space %20
! %21
" %22
# %23
$ %24
% %25
& %26
' %27
( %28
) %29
* %2A
+ %2B
, %2C
- %2D
. %2E
/ %2F
0 %30
1 %31
2 %32
3 %33
4 %34
5 %35
6 %36
7 %37
8 %38
9 %39
: %3A
; %3B
<  %3C
= %3D
>  %3E
? %3F
@ %40
A %41
B %42
C %43
D %44
E %45
F %46
G %47
H %48
I %49
J %4A
K %4B
L %4C
M %4D
N %4E
O %4F
P %50
Q %51
R %52
S %53
T %54
U %55
V %56
W %57
X %58
Y %59
Z %5A
[ %5B
\ %5C
] %5D
^ %5E
_ %5F
` %60
a %61
b %62
c %63
d %64
e %65
f %66
g %67
h %68
i %69
j %6A
k %6B
l %6C
m %6D
n %6E
o %6F
p %70
q %71
r %72
s %73
t %74
u %75
v %76
w %77
x %78
y %79
z %7A
{ %7B
| %7C
} %7D
~ %7E
  %7F
€ %80
  %81
‚ %82
ƒ %83
„ %84
… %85
† %86
‡ %87
ˆ %88
‰ %89
Š %8A
‹ %8B
Π%8C
  %8D
Ž %8E
  %8F
  %90
‘ %91
’ %92
“ %93
” %94
• %95
– %96
— %97
˜ %98
™ %99
š %9A
› %9B
œ %9C
  %9D
ž %9E
Ÿ %9F
  %A0
¡ %A1
¢ %A2
£ %A3
  %A4
¥ %A5
| %A6
§ %A7
¨ %A8
© %A9
ª %AA
« %AB
¬ %AC
¯ %AD
® %AE
¯ %AF
° %B0
± %B1
² %B2
³ %B3
´ %B4
µ %B5
%B6
· %B7
¸ %B8
¹ %B9
º %BA
» %BB
¼ %BC
½ %BD
¾ %BE
¿ %BF
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5
Æ %C6
Ç %C7
È %C8
É %C9
Ê %CA
Ë %CB
Ì %CC
Í %CD
Î %CE
Ï %CF
Ð %D0
Ñ %D1
Ò %D2
Ó %D3
Ô %D4
Õ %D5
Ö %D6
  %D7
Ø %D8
Ù %D9
Ú %DA
Û %DB
Ü %DC
Ý %DD
Þ %DE
ß %DF
à %E0
á %E1
â %E2
ã %E3
ä %E4
å %E5
æ %E6
ç %E7
è %E8
é %E9
ê %EA
ë %EB
ì %EC
í %ED
î %EE
ï %EF
ð %F0
ñ %F1
ò %F2
ó %F3
ô %F4
õ %F5
ö %F6
÷ %F7
ø %F8
ù %F9
ú %FA
û %FB
ü %FC
ý %FD
þ %FE
ÿ %FF

URL Encoding Reference

The ASCII device control characters %00-%1f were originally designed to control hardware devices. Control characters have nothing to do inside a URL.

ASCII Character Description URL-encoding
NUL null character %00
SOH start of header %01
STX start of text %02
ETX end of text %03
EOT end of transmission %04
ENQ enquiry %05
ACK acknowledge %06
BEL bell (ring) %07
BS backspace %08
HT horizontal tab %09
LF line feed %0A
VT vertical tab %0B
FF form feed %0C
CR carriage return %0D
SO shift out %0E
SI shift in %0F
DLE data link escape %10
DC1 device control 1 %11
DC2 device control 2 %12
DC3 device control 3 %13
DC4 device control 4 %14
NAK negative acknowledge %15
SYN synchronize %16
ETB end transmission block %17
CAN cancel %18
EM end of medium %19
SUB substitute %1A
ESC escape %1B
FS file separator %1C
GS group separator %1D
RS record separator %1E
US unit separator %1F
]]> http://phpforms.net/tutorial/html-basics/html-url-encoding-reference.html/feed 0 vertical-align http://phpforms.net/tutorial/css-reference/vertical-align.html http://phpforms.net/tutorial/css-reference/vertical-align.html#comments Wed, 14 Apr 2010 09:50:51 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3469
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value baseline
Inherited No
Applied To built-in elements and table cells
HTML analog <caption | col | colgroup | tbody | tfoot | thead | th | td | tr valign>
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

Description
It aligns an element on a vertical concerning the parent or the surrounding text.

Syntax

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | value | percent
Arguments
baseline
It aligns a base line of a current element on a parent base line. If the parental element has no base line, the bottom border of an element is accepted instead of it.
bottom
It aligns the basis of a current element by the bottom part of a line element located below of all.
middle
It aligns an average element point on a base line of the parent plus a half of height of a parental element.
sub
The element is indicated as interlinear one in the form of the bottom index. The font size thus does not vary.
super
The element is indicated as superior in the form of the top index. The font size remains former.
text-bottom
The bottom border of an element is aligned on the lowermost border of the current line.
text-top
The top border of an element is aligned on the highest text element of the current line.
top
It aligns an upper border of an element on the highest element top of a line.
It is possible to use as value percent, percent or other accessible units. The positive argument displaces an element upwards concerning a base line while negative value lowers it downwards. Not all browsers support such way of record, in particular Internet Explorer supports it only from the sixth version.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>vertical-align</title>
 </head>
 <body>
 
  <div style="font-family: Times, serif; font-size: 200%">
  T<span style="vertical-align: sub">E</span>X and L<span 
  style="vertical-align: 5px; font-size: 80%">A</span>T<span 
  style="vertical-align: sub">E</span>X
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.verticalAlign
]]> http://phpforms.net/tutorial/css-reference/vertical-align.html/feed 0 unicode-bidi http://phpforms.net/tutorial/css-reference/unicode-bidi.html http://phpforms.net/tutorial/css-reference/unicode-bidi.html#comments Wed, 14 Apr 2010 09:40:26 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3458
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes Yes Yes

Short information
CSS CSS2
Default value normal
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi

Description
Text reading occurs from left to right in the European languages. Also there are languages where the text is read from right to left. At mixture of different symbols in one document (Russian with a Hebrew, for example) in system Unicode, their direction is defined by a browser from characteristics and the contained text. Attributes unicode-bidi and direction specify the text of used language layout.

Syntax

unicode-bidi: normal | embed | bidi-override

Values
normal
The browser defines independently how it should display the text on the basis of Unicode symbols.
embed
It redefines text parameters locating it according to the attribute direction.
bidi-override
It is similar to embed but thus the order of symbols in the text also varies submitting to the value direction.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>unicode-bidi</title>
  <style type="text/css">
  DIV.rtl P {
   unicode-bidi: bidi-override; /* Characteristics of the text are changed */
   direction: rtl; /* Text is written right to left */ 
  }
  </style>
  </head>
  <body>
  <div class="rtl">
   <p>Example</p>
   <p>Text</p>
   <p>unicode-bidi</p>
 
  </div>
  </body>
  </html>

The result of this example is shown on the figure 1. The value "bidi-override" is set for the attribute "unicode-bidi"; that's why the symbol order in the text is substituted to the opposite one (specified by the attribute "direction". Pay attention that the text is placed in the right window part and is read right to left like in Arabic language.

]]> http://phpforms.net/tutorial/css-reference/unicode-bidi.html/feed 0 HTTP Status Messages http://phpforms.net/tutorial/html-basics/http-status-messages.html http://phpforms.net/tutorial/html-basics/http-status-messages.html#comments Wed, 14 Apr 2010 09:34:48 +0000 admin http://phpforms.net/tutorial/?p=3460

When a browser requests a service from a web server, an error might occur.
This is a list of HTTP status messages that might be returned:
1xx: Information

Message: Description:
100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request
101 Switching Protocols The server switches protocol

2xx: Successful

Message: Description:
200 OK The request is OK
201 Created The request is complete, and a new resource is created 
202 Accepted The request is accepted for processing, but the processing is not complete
203 Non-authoritative Information  
204 No Content  
205 Reset Content  
206 Partial Content  

3xx: Redirection

Message: Description:
300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five addresses  
301 Moved Permanently The requested page has moved to a new url 
302 Found The requested page has moved temporarily to a new url 
303 See Other The requested page can be found under a different url 
304 Not Modified  
305 Use Proxy  
306 Unused This code was used in a previous version. It is no longer used, but the code is reserved
307 Temporary Redirect The requested page has moved temporarily to a new url

4xx: Client Error

Message: Description:
400 Bad Request The server did not understand the request
401 Unauthorized The requested page needs a username and a password
402 Payment Required You can not use this code yet
403 Forbidden Access is forbidden to the requested page
404 Not Found The server can not find the requested page
405 Method Not Allowed The method specified in the request is not allowed
406 Not Acceptable The server can only generate a response that is not accepted by the client
407 Proxy Authentication Required You must authenticate with a proxy server before this request can be served
408 Request Timeout The request took longer than the server was prepared to wait
409 Conflict The request could not be completed because of a conflict
410 Gone The requested page is no longer available 
411 Length Required The "Content-Length" is not defined. The server will not accept the request without it 
412 Precondition Failed The precondition given in the request evaluated to false by the server
413 Request Entity Too Large The server will not accept the request, because the request entity is too large
414 Request-url Too Long The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information 
415 Unsupported Media Type The server will not accept the request, because the media type is not supported 
416   
417 Expectation Failed  

5xx: Server Error

Message: Description:
500 Internal Server Error The request was not completed. The server met an unexpected condition
501 Not Implemented The request was not completed. The server did not support the functionality required
502 Bad Gateway The request was not completed. The server received an invalid response from the upstream server
503 Service Unavailable The request was not completed. The server is temporarily overloading or down
504 Gateway Timeout The gateway has timed out
505 HTTP Version Not Supported The server does not support the "http protocol" version
]]> http://phpforms.net/tutorial/html-basics/http-status-messages.html/feed 0 top http://phpforms.net/tutorial/css-reference/top.html http://phpforms.net/tutorial/css-reference/top.html#comments Wed, 14 Apr 2010 09:26:04 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3450
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

Description
This parameter defines distance from a top border of a parental element to a top border of an affiliated element not including a space, a field and width of a framework (fig. 1). Readout of coordinates depends on parameter position value. If its argument is equal absolute, in this case the parent is the browser window and an element position is defined from top border. In case of value relative, the argument top is counted from a top border of an element starting position.


Syntax

top: value | percent | auto

Arguments
Any units of length accepted in CSS are applied as values, for example pixels (px), inches (in), points (pt), etc. Value of parameter top can be negative. In this case superpositions of different elements against each other are possible. If you specify the value in percent, the element position will be calculated depending on parental element height. The argument auto does not change the element position.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>top</title>
  <style type="text/css">
   #menu { 
    position: absolute; /* Absolute positioning */
    left: 300px; /* Distance from the left edge */
    top: 50px; /* Distance from the top edge */
    width: 120px; /* Block width */
    background: #e0e0e0; /* Background color */
    border: 1px solid #000; /* Frame parameters */
    padding: 5px; /* Fields around the text */
   }
   #content { 
    position: absolute; /* Absolute positioning */
    left: 0; /* Distance from the left edge */
    top: 0; /* Distance from the top edge */
    width: 280px; /* Block width */
    background: #800000; /* Background color */
    color: white; /* Text color */
    padding: 5px; /* Fields around the text  */
    padding-right: 60px; /* Right indent */
    text-align: justify; /* Width alignment */ 
   }
  </style>
 </head>
 <body>
  <div id="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </div>
  <div id="menu">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en 
   commodo consequat. 
  </div>
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.top
]]> http://phpforms.net/tutorial/css-reference/top.html/feed 0 ISO Language Codes http://phpforms.net/tutorial/html-basics/iso-language-codes.html http://phpforms.net/tutorial/html-basics/iso-language-codes.html#comments Wed, 14 Apr 2010 09:17:17 +0000 admin http://phpforms.net/tutorial/?p=3451
The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers.
According to the W3C recommendation you should declare the primary language for each Web page with the lang attribute inside the <html> tag, like this:
1
2
3

<html lang="en">
...
</html>
In XHTML, the language is declared inside the <html> tag as follows:
1
2
3

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>

ISO 639-1 Language Codes

ISO 639-1 defines abbreviations for languages. In HTML and XHTML they can be used in the lang and xml:lang attributes.

Language ISO Code
Abkhazian ab
Afar aa
Afrikaans af
Albanian sq
Amharic am
Arabic ar
Armenian hy
Assamese as
Aymara ay
Azerbaijani az
Bashkir ba
Basque eu
Bengali (Bangla) bn
Bhutani dz
Bihari bh
Bislama bi
Breton br
Bulgarian bg
Burmese my
Byelorussian (Belarusian) be
Cambodian km
Catalan ca
Cherokee  
Chewa  
Chinese (Simplified) zh
Chinese (Traditional) zh
Corsican co
Croatian hr
Czech cs
Danish da
Divehi  
Dutch nl
Edo  
English en
Esperanto eo
Estonian et
Faeroese fo
Farsi fa
Fiji fj
Finnish fi
Flemish  
French fr
Frisian fy
Fulfulde  
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Hausa ha
Hawaiian  
Hebrew he, iw
Hindi hi
Hungarian hu
Ibibio  
Icelandic is
Igbo  
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kannada kn
Kanuri  
Kashmiri ks
Kazakh kk
Kinyarwanda (Ruanda) rw
Kirghiz ky
Kirundi (Rundi) rn
Konkani  
Korean ko
Kurdish ku
Laothian lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Moldavian mo
Mongolian mn
Nauru na
Nepali ne
Norwegian no
Occitan oc
Oriya or
Oromo (Afan, Galla) om
Papiamentu  
Pashto (Pushto) ps
Polish pl
Portuguese pt
Punjabi pa
Quechua qu
Rhaeto-Romance rm
Romanian ro
Russian ru
Sami (Lappish)  
Samoan sm
Sangro sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swedish sv
Syriac  
Tagalog tl
Tajik tg
Tamazight  
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uighur ug
Ukrainian uk
Urdu ur
Uzbek uz
Venda  
Vietnamese vi
Volapük vo
Welsh cy
Wolof wo
Xhosa xh
Yi  
Yiddish yi, ji
Yoruba yo
Zulu zu
]]> http://phpforms.net/tutorial/html-basics/iso-language-codes.html/feed 0 text-transform http://phpforms.net/tutorial/css-reference/text-transform.html http://phpforms.net/tutorial/css-reference/text-transform.html#comments Wed, 14 Apr 2010 09:10:32 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3443
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value none
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Description
It operates by transformation of the element text into head or capital symbols. When value is distinct from none, the register of the initial text will be changed.

Syntax

text-transform: capitalize | lowercase | uppercase | none

Arguments
capitalize
Every word in the sentence will begin from a head symbol.
lowercase
All text symbols become capital (lower case)
uppercase
All text symbols become capitalized (upper case)

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>text-transform</title>
  <style type="text/css">
   H1 { 
    text-transform: uppercase; /* Capital letters */
   }
   P { 
    text-transform: capitalize; /* Every word begins from the capital letter */
   }
  </style>
 </head>
 <body> 
 
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.textTransform
]]> http://phpforms.net/tutorial/css-reference/text-transform.html/feed 0 text-indent http://phpforms.net/tutorial/css-reference/chapter-92-text-indent.html http://phpforms.net/tutorial/css-reference/chapter-92-text-indent.html#comments Wed, 14 Apr 2010 08:54:58 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3439
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited Yes
Applied To block elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Description
It determines the first line space size of the text block (for example, for the paragraph

). Influences for all other lines do not appear. Negative value for ledge creation of the first line is supposed, but it is necessary to check up that the text do not fall outside the limits of a browser window.

Syntax

text-indent: value | percent

Arguments
Any units of length accepted in CSS are applied as values, for example pixels (px), inches (in), points (pt), etc. When you specify the value in percentage, the space of the first line is calculated depending on the block width. It is admissible to apply negative values, but thus occurrence of errors may be in different browsers.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>text-indent</title>
  <style type="text/css">
   P { 
    text-indent: 1.5em; /* Indent of first line */
    text-align: justify;  /* Width alignment */
   }
  </style> 
 </head> 
 <body>
 
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.textIndent
]]> http://phpforms.net/tutorial/css-reference/chapter-92-text-indent.html/feed 0 text-decoration http://phpforms.net/tutorial/css-reference/text-decoration.html http://phpforms.net/tutorial/css-reference/text-decoration.html#comments Wed, 14 Apr 2010 08:45:35 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3434
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Partially ? Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value none
Inherited No
Applied To all elements
HTML analog <iU> <S> <STRIKE>
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Description
It adds appearance of the text in the form of its underlining, deletion, a line over the text and blinkings. It is possible to apply more than one style simultaneously listing values through a blank.

Syntax

text-decoration: blink | line-through | overline | underline | none

Arguments
blink
It determines the blinking text. Such text disappears periodically about once a second then it appears on a former place again.
line-through
It creates a line-through text.
overline
The line is over the text.
underline
It determines an underlined text.
none
It cancels all effects including lines underlinings which are specified by default.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>text-decoration</title>
  <style type="text/css">
   A { 
    text-decoration: none; /* Remove links' underlining */
   }
   A:hover { 
    text-decoration: underline; /* Add underlining 
                                   in the time of mouseover on the link */
   }
  </style> 
 </head> 
 <body>
 
  <p><a href="link1.html">Lorem ipsum dolor sit amet</a></p>
 
 </body>
</html>

Object model

[window.]document.getElementById("elementID").style.textDecoration
[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline

Remark
Browser Internet Explorer allows to use the value "blink" but the text is shown as usual without blinking.
According to CSS specification if the formatting type is set for the element but doesn't for its herit the parent's properties will be passed on to built-in elements. If the underlined paragraph is used and not underlined object is placed in it dedicating the word with another color - all the paragraph words will be underlined including the words dedicated by another color. But for the browser Netscape 6 setting "text-decoration: none" removes all effects independent from parent element's decoration. In additional Netscape 6 doesn't spread parent element's decoration to child ones but pass on only underlining.
]]> http://phpforms.net/tutorial/css-reference/text-decoration.html/feed 0 text-align http://phpforms.net/tutorial/css-reference/text-align.html http://phpforms.net/tutorial/css-reference/text-align.html#comments Wed, 14 Apr 2010 08:27:15 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3430
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Errors Errors Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value left
Inherited Yes
Applied To all elements
HTML analog <center > <p | h1 | div | table | thead | tbody | tfoot | tr | th | td align>
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-text-align

Description
It defines horizontal alignment of the text within an element. This attribute is inherited therefore it can be determined for the whole block for influence on all elements enclosed in it.

Syntax

text-align: center | justify | left | right

Arguments
center
This argument aligns a text on the centre. The text is located on the centre of a window horizontal of a browser or the container where the text block is located. It seems that lines of the text are strung on an invisible axis which passes on the web page centre. The similar way of alignment is actively used in headings and various signatures like caption. It gives an official and solid kind to the text appearance. In all other cases alignment on the centre is applied seldom because it is inconveniently to read great volume of such text.
justify
Width alignment means simultaneous alignment on the left and the right border. A browser adds blanks between words to act.
left
This argument aligns a text on the left border. The text lines are adjusted by a left border and the right border settles down "short flight of stairs". Such way of alignment is the most popular on sites because it allows the user to find a sight easily a new line and comfortably to read the big text.
right
This argument aligns a text on the right border. This way of alignment plays the role of the antagonist to the previous type. So, lines of the text equal by a right border and left remains "fragmentary". Because of the left border is not adjusted and reading of new lines begins with it, such text reading is more difficulty, than if it has been adjusted by a left border. Therefore alignment by a right border is applied usually for short headings in volume no more than three lines. We do not consider specific sites where it is necessary to read the text from right to left. There is probably similar way of alignment. Also it is useful. But where have you seen these sites in our country?

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>text-align</title>
  <style type="text/css">
   div {
    border: 1px solid black; /* Frame parameters */
    padding: 5px; /* Fields around the text */
    margin-bottom: 5px; /* Bottom margin */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Lay width */
    background: #fc0; /* Background color */
   }
  </style>
 </head>
 <body>
 
  <div id="left"><div class="content">Left alignment</div></div>
  <div id="center"><div class="content">Center alignment</div></div>
  <div id="right"><div class="content">Right alignment</div></div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.textAlign
]]> http://phpforms.net/tutorial/css-reference/text-align.html/feed 0 table-layout http://phpforms.net/tutorial/css-reference/table-layout.html http://phpforms.net/tutorial/css-reference/table-layout.html#comments Wed, 14 Apr 2010 08:04:52 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3427
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To the tag <TABLE > or to the element having the property "display" set as "table" or "inline-table"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Description
This parameter defines browser calculating of table sells height and width according to its contents.

Syntax

table-layout: auto | fixed

Arguments
auto
The browser loads all table. It analyzes a table for the sizes of cells definition and only after that it displays them.
fixed
Value raises productivity of table construction. The width of columns is defined either with the help of the tag or it is calculated on the basis of the first line. If it is impossible to receive the formatting data, the table is shared on equal width columns. When you use this parameter the content which is not located in a specified width cell will be cut off or overlap a cell. It depends on an applied browser but the width of a cell will not be changed in any case.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>table-layout</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Fixed cell width */
   }
  </style>
 </head>
 <body>
 
  <table width="100%" cellspacing="0" border="1">
   <col width="160">
   <col span="9" width="60">
   <tr> 
    <td>&nbsp;</td>
    <td>1995</td><td>1996</td><td>1997</td><td>1998</td>
    <td>1999</td><td>2000</td><td>2001</td><td>2002</td>
    <td>2003</td>
   </tr>
   <tr> 
    <td>Oil</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Gold</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Wood</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table> 
 
 </body>
</html>
]]> http://phpforms.net/tutorial/css-reference/table-layout.html/feed 0 right http://phpforms.net/tutorial/css-reference/right.html http://phpforms.net/tutorial/css-reference/right.html#comments Wed, 14 Apr 2010 07:51:38 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3419
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-right

Description
This parameter defines distance from a right border of a parental element to a right border of an affiliated element not including a space, a field and width of a framework (fig. 1). Readout of coordinates depends on parameter position value. If its argument is equal absolute, in this case the parent is the browser window. An element position is defined from right border. In case of value relative the argument right is counted from a right border of an element starting position.


Syntax

right: value | percent | auto

Arguments
Any units of length accepted in CSS are applied as values, for example pixels (px), inches (in), points (pt), etc. Value of parameter right can be negative. In this case superpositions of different elements against each other are possible. If you specify the value in percent, the element position will be calculated depending on parental element width. The argument auto does not change the element position.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>right</title>
  <style type="text/css">
   #leftcol { 
    position: absolute; /* Absolute positioning */
    top: 20px; /* Location from the top edge */
    left: 20px; /* Location from the left edge */
    width: 100px; /* Block width */
    background: #fc3; /* Background color */
    border: 1px solid #000; /* Frame parameters */
    padding: 10px; /* Fields around the text */
   } 
   #centercol { 
    position: relative; /* Relative positioning */
    background: maroon; /* Background color */
    padding: 10px; /*  Fields around the text */
    color: white; /* Text color */
    margin: 13px 250px 0 130px; /* Indents around the block */
   }
   #rightcol { 
    position: absolute; /* Absolute positioning */
    top: 20px; /* Location from the top edge */
    right: 20px; /* Location from the right edge */
    width: 200px; /* Block width */
    background: #ccc; /* Background color */
    border: 1px solid black; /* Frame parameters */
    padding: 10px; /* Fields around the text */
   }
  </style>
 </head>
 <body> 
 
  <div id="leftcol">leftcol</div>
  <div id="centercol">centercol</div>
  <div id="rightcol">rightcol</div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.right
]]> http://phpforms.net/tutorial/css-reference/right.html/feed 0 quotes http://phpforms.net/tutorial/css-reference/quotes.html http://phpforms.net/tutorial/css-reference/quotes.html#comments Wed, 14 Apr 2010 07:21:39 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3404
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No ? Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Short information
CSS CSS2
Default value Depends on the browser, its settings and operating system. The often for use are "/" type quotes.
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-quotes
Description
It determines quotes types which are applied in the document text. In each language there are traditions for a designation of quotes. The parameter «quotes» allows to set a kind of their display under all text and to determine its uniform appearance. Quotes addition occurs automatically for the container content <q> and also for the text to which the style parameter «content» with the value open-quote (opening quote) or close-quote (closing quote) is applied.

Syntax

quotes: "left quote" "right quote"

Arguments
A text symbol (for example, quotes: "«" "»") or Unicode symbol are applied as a value. Some of them are given in the table 1 below.





Table. 1. Quote types
Type Special code HTML <Unicode <Description
" &#34; \0022 Double quote is applied usually in mono-width fonts for a designation of the inch symbol and also angular minute.
' &#39; \0027 The symbol of angular second. It is applied for designation of a soft sign in a Latin (popalas' lisa).
« &#171; or &laquo; \00ab Opening double angular quote.
» &#187; or &raquo; \00bb Closing double angular quote.
‘ &#8216; \2018 Opening single quote.
’ &#8217; \2019 Closing single quote.
“ &#8220; \201c Opening double quote in English texts or closing one for Russian language.
” &#8221; \201d Closing double quote in English texts
„ &#8222; \201e Opening double quotes. They are used in Russian.



Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>quotes</title>
  <style type="text/css">
   Q {
    font-family: Times, serif; /* Font with serifs */
    font-style: italic; /* Italic style of the text */
    color: navy; /* Blue text color */
    quotes: "\00ab" "\00bb"; /* Quotes as double angle brackets */
   }
  </style>
 </head>
 <body> 
  <p>Stanislav Letz asserted: <q>In the major part of cases the exit is in the place where the entrance was.</q>.</p>
 </body>
</html>

The result of this example is shown on the figure 1

]]> http://phpforms.net/tutorial/css-reference/quotes.html/feed 0 position http://phpforms.net/tutorial/css-reference/position.html http://phpforms.net/tutorial/css-reference/position.html#comments Wed, 14 Apr 2010 06:27:17 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3400
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value static
Inherited Yes
Applied To all elements except generable elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Description
This parameter determines a way of element positioning concerning either a browser window or other objects on a web page.

Syntax

position: absolute | fixed | relative | static

Arguments
absolute
It specifies that the element is absolutely positioned. In this case it does not exist in a usual stream of the document like other elements which are displayed on the web page as if there is no absolutely positioned object. Element position is specified by attributes left, top, right and bottom concerning a border of a browser window.
fixed
This value is similar to the argument absolute, but unlike it becomes attached to specified parameters left, top, right and bottom to a point on the screen. It does not change the position even at paging of the web page. At all Browsers Netscape, Mozilla and Firefox do not display a scrolling strip if element position is specified as fixed and it is not located entirely in a browser window. Though in browser Opera scrolling strips are shown, but they do not influence in any way an element position. Internet Explorer 6 and more low versions do not support the given argument.
relative
Element position is determined rather its initial place. Addition of the attributes left, top, right and bottom changes an element position and shifts it in this or that side from an initial arrangement depending on the applied parameter.
static
Elements are displayed as usually. Use of parameters left, top, right and bottom does not lead to any results.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>position</title>
 </head>
 <body>
 
  <div style="font-family: Times, serif; font-size: 200%">
  T<span style="position: relative; top: 10px">E</span>X 
  and L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span 
  style="position: relative; top: 10px">E</span>X
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.position

Remark
Browser Internet Explorer 7 supports the value "position: fixed" only in "strict" mode ().
]]> http://phpforms.net/tutorial/css-reference/position.html/feed 0 padding-top http://phpforms.net/tutorial/css-reference/padding-top.html http://phpforms.net/tutorial/css-reference/padding-top.html#comments Wed, 14 Apr 2010 06:16:39 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3395
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding-top

Description
It determines value of field from the top border of an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


Syntax

padding-top: value | auto

Arguments
It is possible to specify size of the top field in pixels (px), percent (%) or other admissible units for CSS. The argument auto specifies that the size of a field will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding-top</title>
  <style type="text/css">
   .layer {
    background: #fc3; /* Background color */
    border-top: 5px solid #000; /* Top line parameters */
    border-bottom: 5px solid #000; /* Bottom line parameters */
    padding: 5px; /* Fields around the text */
    padding-top: 10%; /* Top field */
    padding-bottom: 10%; /* Bottom field */
   }
  </style>
 </head>
 <body> 
 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.paddingTop
]]> http://phpforms.net/tutorial/css-reference/padding-top.html/feed 0 padding-right http://phpforms.net/tutorial/css-reference/padding-right.html http://phpforms.net/tutorial/css-reference/padding-right.html#comments Wed, 14 Apr 2010 06:01:44 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3390
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding-right

Description
It determines value of field from the right border of an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


Syntax

padding-right: value | auto

Arguments
It is possible to specify size of the right field in pixels (px), percent (%) or others admissible units for CSS. The argument auto specifies that the size of a field will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding-right</title>
  <style type="text/css">
   .layer {
    background: #ffe url('help.gif') no-repeat top right; /* Background parameters */
    border: 2px solid black; /* Frame parameters */
    padding: 5px; /* Fields around the text */
    padding-right: 90px; /* Поле справа */
    text-align: justify; /* Width alignment */ 
   }
  </style>
 </head>
 <body> 
 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
   diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
   aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
   nostrud exerci tution ullamcorper suscipit lobortis nisl ut 
   aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.paddingRight
]]> http://phpforms.net/tutorial/css-reference/padding-right.html/feed 0 padding-left http://phpforms.net/tutorial/css-reference/padding-left.html http://phpforms.net/tutorial/css-reference/padding-left.html#comments Wed, 14 Apr 2010 05:50:24 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3385
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding-left

Description
It determines value of field from the left border of an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


Syntax

padding-left: value | auto

Arguments
It is possible to specify size of the left field in pixels (px), percent (%) or other admissible units for CSS. The argument auto specifies that the size of a field will be automatically calculated by a browser.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding-left</title>
  <style type="text/css">
   .layer {
    background: #fc3; /* Background color */
    border: 2px solid black; /* Frame parameter */
    padding: 5px; /* Fields around the text */
   }
   .layer P {
    margin: 0; /* Remove indents around */
    padding-left: 10%; /* Left field */
   }
  </style>
 </head>
 <body> 
 
  <div class="layer">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.paddingLeft
]]> http://phpforms.net/tutorial/css-reference/padding-left.html/feed 0 padding-bottom http://phpforms.net/tutorial/css-reference/padding-bottom.html http://phpforms.net/tutorial/css-reference/padding-bottom.html#comments Wed, 14 Apr 2010 05:39:31 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3379
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom

Description
It determines value of field from the bottom border of an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


Syntax

padding-bottom: value | auto

Arguments
It is possible to specify size of the bottom field in pixels (px), percent (%) or other admissible units for CSS. The argument auto specifies that the size of a field will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding-bottom</title>
  <style type="text/css">
   .layer {
    background: #fc3; /* Background color */
    border: 2px solid #000; /* Frame parameters */
    padding-bottom: 40px; /* Field below from the text */
    padding-top: 40px; /* Field top from the text */
    text-align: center; /* Center alignment */
   }
  </style>
 </head>
 <body>
 
  <div class="layer">
   Lorem ipsum dolor sit amet
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.paddingBottom
]]> http://phpforms.net/tutorial/css-reference/padding-bottom.html/feed 0 padding http://phpforms.net/tutorial/css-reference/padding.html http://phpforms.net/tutorial/css-reference/padding.html#comments Wed, 14 Apr 2010 05:22:55 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3371
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-padding

Description
It determines value of fields round an element contents. Field is called the distance from internal border of an element framework to the imagined rectangle limiting its contents (fig. 1).


The parameter padding allows to specify size weeding for all parties of an element at once or to define it only for the specified parties.

Syntax

padding: value | auto {1, 4}

Arguments
It is allowed to use one, two, three or four values dividing them among each other by space. This effect depends on amount of arguments. It is given in the table below.





Tab.1. Color changing depending on arguments' amount
Argument amount Result
1 Frame color will be set for all element's sides
2 The first argument sets the color of top and bottom sides and the second one for left and right sides
3 The first argument defined the color of the top side, the second one - left and right sides at the same time, the third one - for the bottom side
4 The color of top, bottom, right and left sides is set in turn



It is possible to specify a field size in pixels (px), percent (%) or other admissible units for CSS. The argument auto specifies that the size of fields will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>padding</title>
  <style type="text/css">
   .layer {
    background: #fc3; /* Background color */
    border: 2px solid black;  /* Frame parameters */
    padding: 20px; /* Fields around the text */
   }
  </style>
 </head>
 <body>
 
  <div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2

Object model

[window.]document.getElementById("elementID").style.padding
]]> http://phpforms.net/tutorial/css-reference/padding.html/feed 0 overflow http://phpforms.net/tutorial/css-reference/overflow.html http://phpforms.net/tutorial/css-reference/overflow.html#comments Wed, 14 Apr 2010 05:00:16 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3367
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value visible
Inherited No
Applied To block and replaceable elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Description
This feature operates display of the block element content, if it is not located and leaves for area of the specified sizes entirely.

Syntax
overflow: auto | hidden | scroll | visible

Arguments
visible
All element content is displayed even outside of the determined height and width.
hidden
The inside area is displayed, the rest will be cut.
scroll
Scrolls are added always.
auto
Scrolls are added only if it is necessary.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>overflow</title>
  <style type="text/css">
   .layer {
    overflow: scroll; /* Add scrolling bands */
    width: 300px; /* Block width */
    height: 150px; /* Block height */
    padding: 5px; /* Areas around the text */
    border: solid 1px black; /* Frame parameters */
   } 
  </style>
 </head>
 <body> 
 
  <div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.overflow
Remark
Browser Internet Explorer also supports the parameter "overflow-x", which images the scrolling band across and "overflow-y" responsible for the vertical scrolling band. Arguments are the same as for "overflow".
]]> http://phpforms.net/tutorial/css-reference/overflow.html/feed 0 outline-width http://phpforms.net/tutorial/css-reference/outline-width.html http://phpforms.net/tutorial/css-reference/outline-width.html#comments Tue, 13 Apr 2010 11:38:21 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3363
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2, CSS2.1
Default value medium
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width

Description
It determines width of the element external outline. Unlike the attribute border-width, it is impossible to determine a border for every side individually for the attribute outline-width.
You need to determine any value apart from none in the attribute outline-style, if you want the attribute outline-width to work.

Syntax

outline-width: thin | medium | thick | value

Value
thin
There is a thin line. Pixel value can be changed depending on a browser. It usually accounts 1 pixel.
medium
A medium sized line (3 pixels).
thick
A thick sized line (6 pixels).
value
You can use any size items accepted in CSS for exact width determining.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>outline-width</title>
  <style type="text/css">
   #block {
    outline-style: dotted; /* Dotted external border */
    outline-width: 3px; /* External border width */
    padding: 10px; /* Areas around the text */
    border: 3px dotted #000; /* Frame parameters */
   }
  </style>
 </head> 
 <body> 
   <div id="block">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID")style.outlineWidth
]]> http://phpforms.net/tutorial/css-reference/outline-width.html/feed 0 outline-style http://phpforms.net/tutorial/css-reference/outline-style.html http://phpforms.net/tutorial/css-reference/outline-style.html#comments Tue, 13 Apr 2010 11:25:32 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3358
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2, CSS2.1
Default value none
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style

Description
It determines style of the element external outline. Unlike a line specifying through border, attribute outline is displayed round an element without influencing width of the block or its position.

Syntax

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset

Values
none
Outline is not displayed. If the attribute outline-width is present, this value blocks it.
dotted
The line consists of some amount of dots.
dashed
The dashed line consisting of short pieces series.
solid
Solid line.
double
Double line.
groove
It makes a groove outline effect.
ridge
It makes a pattern outline effect.
inset
There is a pseudo-three-dimensional framework. The right and bottom borders of it are clarified and the left and top lines are blacked out.
outset
The left and top borders have more light shade than the determined color and the right and bottom lines are blacked out.
Sorts of these styles are given below.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>outline-style</title>
  <style type="text/css">
   .noborder A {
    outline-style: none; /* Remove borders around the links */ 
   }
  </style>
 </head> 
<body> 
   <p><a href="http://ya.ru">Yandex</a>
   <a href="http://google.ru">Google</a></p>
 
   <p class="noborder"><a href="http://ya.ru">Yandex</a>
   <a href="http://google.ru">Google</a></p>
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID")style.outlineStyle
]]> http://phpforms.net/tutorial/css-reference/outline-style.html/feed 0 outline-color http://phpforms.net/tutorial/css-reference/outline-color.html http://phpforms.net/tutorial/css-reference/outline-color.html#comments Tue, 13 Apr 2010 11:10:52 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3354
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2, CSS2.1
Default value invert
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/ui.html#propdef-outline-color

Description
It determines color of the element external border. Unlike a line specifying through a border, the outline is displayed round an element without influencing width of the block or its position.

Syntax

outline-color: invert | color

Value
invert
It automatically specifies the line color proceeding from a background under it for the maximum contrast achievement. In CSS 2.1 a browser is allowed to ignore value invert and instead of it to use the line color set by attribute color.
color
It specifies a line color in any admissible format for CSS

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>outline-color</title>
  <style type="text/css">
   #block {
    outline-style: dashed; /* Dashed border */
    outline-color: #be8b5e; /* Border color */
    padding: 10px; /* Areas around the text */
    background: #eedac8; /* Background color */
   }
  </style>
 </head> 
 <body> 
   <div id="block">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID")style.outlineColor
]]> http://phpforms.net/tutorial/css-reference/outline-color.html/feed 0 outline http://phpforms.net/tutorial/css-reference/outline.html http://phpforms.net/tutorial/css-reference/outline.html#comments Tue, 13 Apr 2010 10:59:41 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3349
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2, CSS2.1
Default value invert
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/ui.html#propdef-outline

Description
This is the universal attribute determining color, style and thickness of external border simultaneously on all four element sides. The attribute outline does not influence the block position and its width, unlike a line set through border.

Syntax

outline: outline-color || outline-style || outline-width

Value
outline-color
It specifies an outline color in any admissible format for CSS.
outline-style
Outline style.
outline-width
Outline width.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>outline</title>
  <style type="text/css">
   .photo IMG {
    padding: 20px; /* Areas around the image */
    margin-right: 10px; /* right margin */
    outline: 1px solid #666; /* Frame parameters */
    background: #f0f0f0; /* Background color */
    float: left; /* Right edge float */
   }
  </style>
 </head> 
 <body> 
  <div class="photo">
   <img src="images/girl.jpg" alt="Girl">
   <img src="images/owl.jpg" alt="Owl"> 
   <img src="images/boy.jpg" alt="boy">
  </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID")style.outline
]]> http://phpforms.net/tutorial/css-reference/outline.html/feed 0 opacity http://phpforms.net/tutorial/css-reference/opacity.html http://phpforms.net/tutorial/css-reference/opacity.html#comments Tue, 13 Apr 2010 10:44:24 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3345
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes

Short information
CSS CSS3
Default value 1
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/css3-color/#transparency

Description
This parameter defines transparency level of the web page element. Background drawing or other elements located below of the translucent object appear through an element at a partial or full transparency.

Syntax

opacity: value

Arguments
The number from a range [0.0 acts; 1.0] is the argument. The value 0 corresponds to a full transparency of an element. The value 1corresponds to its opacity. Fractional numbers of a kind 0.6 determine semi-transparency. It is supposed to write numbers without zero ahead, such as a kind opacity: 6.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>opacity</title>
  <style type="text/css">
   IMG.semi {
    opacity: 0.5; /* Element's opacity */
   }
  </style>
 </head>
 <body>
  <p>
    <img src="images/igels.png" alt="Usual image">
    <img src="images/igels.png" alt="Translucent image" class="semi">
  </p>
 </body>
</html>

The result of this example is shown on the figure 1


Remark
Internet Explorer uses filters for opacity changing; that;s why we must write "filter: alpha(opacity=50)" where the argument "opacity" may have values from 0 to 100.
]]> http://phpforms.net/tutorial/css-reference/opacity.html/feed 0 min-width http://phpforms.net/tutorial/css-reference/min-width.html http://phpforms.net/tutorial/css-reference/min-width.html#comments Tue, 13 Apr 2010 10:15:07 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3335
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value No
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Description
This argument determines the maximum width of an element. If the browser window reaches the set minimum width of an element, in that case its width remains invariable and there is a horizontal scrolling strip.
Value of element width will be calculated depending on the determined parameters width, max-width and min-width. In tab. 1 it is shown what the browser uses at concurrent use of the specified properties.

Table 1. Element width
Parameters values Width
min-width < width < max-width width
min-width > width > max-width min-width
min-width > width < max-width min-width
min-width < width width
min-width > width min-width
min-width > max-width min-width
min-width < max-width max-width

This table data means following: if width value (width) is less than value min-width the element width is accepted equal to the value min-width.

Syntax

min-width: value

Arguments
Pixels (px) and percent (%) are accepted as values

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Columns without hyphens</title>
  <style  type="text/css">
   #container  {
    min-width: 420px; /* Min container's width */
   }
   #col1 {
    background-color: #fc0; /* Column's background color */
    padding: 5px; /* Areas around the text */
    float: left; /* Right edge float */
    width: 150px; /* Left column width */
   }
   #col2  {
    background-color: #c0c0c0; /* Column's background color*/
    padding: 5px; /* Areas around the text */
    width: 250px; /* Right column width */
    float: left; /* Right edge float */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="col1">Column 1</div>
   <div id="col2">Column 2</div>
  </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.minWidth
]]> http://phpforms.net/tutorial/css-reference/min-width.html/feed 0 min-height http://phpforms.net/tutorial/css-reference/min-height.html http://phpforms.net/tutorial/css-reference/min-height.html#comments Tue, 13 Apr 2010 07:13:56 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3328
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value none
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Description
It determines the minimum height of an element. Value of element height will be calculated depending on the determined parameters height, max-height and min-height. In tab. 1 it is shown what the browser applies in time of concurrent use of the specified properties.

Table 1. Element hight
Parameters values Height
min-height < height < max-height height
min-height > height > max-height min-height
min-height > height < max-height min-height
min-height < height height
min-height > height minheight
min-height > max-height min-height
min-height < max-height max-height

This table data means following: if height value (height) is less than value min-height the element height is accepted equal to the value min-height.

Syntax

min-height: value | none

Arguments
Pixels (px) and percent (%) are accepted as values. Value none removes all height restrictions

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Cloverfield</title>
  <style type="text/css">
   #bottom {
    background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Background parameters */ 
    min-height: 80px; /* Min height */ 
    color: #E4BC96; /* Text color */ 
    padding: 5px 5px 5px 140px; /* Areas around the text */ 
   }
   #bottom p { margin: 5px 0; }
   #bottom a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>
 
  <div id="bottom">
    <p>Site Cloverfield</p>
    <p><a href="info.html">Information about the site</a> <a href="author.html">About the author</a></p>
  </div>
 
 </body>
</html>

In this example for making the background image not cut at the top edge the min height is defined as 80 pixels. The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.minHeight
]]> http://phpforms.net/tutorial/css-reference/min-height.html/feed 0 max-width http://phpforms.net/tutorial/css-reference/max-width.html http://phpforms.net/tutorial/css-reference/max-width.html#comments Tue, 13 Apr 2010 06:13:02 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3323
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value No
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Description
This argument determines the maximum width of an element. Value of element width will be calculated depending on the determined parameters width, max-width and min-width. In tab. 1 it is shown what the browser uses at concurrent use of the specified properties.

Table 1. Element width
Parameters values Width
min-width < width < max-width width
width < max-width width
width > max-width max-width
min-width > width > max-width min-width
min-width > width < max-width min-width

This table data means following: if width value (width) is more than value max-width the element width is accepted equal to the value max-width.

Syntax

max-width: value

Arguments
Pixels (px) and percent (%) are accepted as values

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Версия сайта для КПК</title>
  <style type="text/css" media="handheld">
   body {
    max-width: 320px; /* Max page width in pixels */ 
   }
  </style>
 </head>
 <body>
  <h1>Title text</h1>
  <p>Example text</p>
 </body>
</html>

In this example the page width is limited to 320 pixels for all palm gadgets (palm pocket computers, smartphones and other gadgets able to image HTML-documents).

Object model

[window.]document.getElementById("elementID").style.maxWidth
]]> http://phpforms.net/tutorial/css-reference/max-width.html/feed 0 max-height http://phpforms.net/tutorial/css-reference/max-height.html http://phpforms.net/tutorial/css-reference/max-height.html#comments Tue, 13 Apr 2010 05:58:56 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3316
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value none
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Description
It determines the maximum height of an element. Value of element height will be calculated depending on the determined parameters height, max-height and min-height. In tab. 1 it is shown what the browser uses at concurrent use of the specified properties.

Table 1. Element hight
Parameters values Height
min-width < height < max-height height
height < max-height height
height > max-height max-height
min-height > height > max-height min-height
min-height > height < max-height min-height

This table data means following: if value of height (height) is more than value max-height the element height is accepted equal to the value max-height.

Syntax

max-height: value | none

Arguments
Pixels (px) and percent (%) are accepted as values. Value none removes all height restrictions.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>max-height</title>
  <style type="text/css">
   .block {
    overflow: auto; /* Scrolling band if it is necessary */ 
    padding: 10px; /* Areas around the text */ 
    max-height: 80px; /* Max height */ 
    background: #ffe; /* Background color */ 
    border: 1px solid #cb2027; /* Frame parameters */ 
   } 
   .block p {
    margin: 2px auto; /* Paragraph's margins */ 
   }
  </style>
 </head>
 <body>
  <div class="block">
    <p>Blocking of the element doesn't allow at all 
      to perform any actions with it including content's selection of
       text area, change or activate it.
       Blocked area is usually marked gray</p>
    <p>Some browsers allow to select and copy 
       the content of blocked text area but all other 
       actions are unavailable.</p>
  </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.maxHeight
]]> http://phpforms.net/tutorial/css-reference/max-height.html/feed 0 margin-top http://phpforms.net/tutorial/css-reference/margin-top.html http://phpforms.net/tutorial/css-reference/margin-top.html#comments Tue, 13 Apr 2010 05:34:06 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3311
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

Description
It determines an indentation size from the top margin of an element. A space is the distance from external margin of the current element top margin to internal margin of its parental element (fig. 1).


Syntax

margin-top: value | auto.

Arguments
You can specify size of the top indentation in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the indentation size will be automatically calculated by a browser.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin-top</title>
  <style type="text/css">
   DIV {
    background: #fc3; /* Background color */
    border: 2px solid black;  /* Frame parameters */
    padding: 20px;  /* Areas around the text */
    margin-top: 20%; /* Top margin */
   }
  </style>
 </head>
 <body>
 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.marginTop
]]> http://phpforms.net/tutorial/css-reference/margin-top.html/feed 0 margin-right http://phpforms.net/tutorial/css-reference/margin-right.html http://phpforms.net/tutorial/css-reference/margin-right.html#comments Tue, 13 Apr 2010 05:18:42 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3306
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin-right

Description
It determines an indentation size from the right margin of an element. A space is the distance from external margin of the current element right margin to internal margin of its parental element (fig. 1).


Syntax

margin-right: value | auto

Arguments
You can specify size of the right indentation in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the indentation size will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin-right</title>
  <style type="text/css">
   BODY { 
    margin-right: 25%;  /* Right margin */
    margin-left: 25%;  /* Left margin */
   }
   DIV.panel {
    background: #007083; /* Background color */
    color: white;  /* Text color */
    padding: 10px; /* Areas around the text */
    text-align: justify; /* Width alignment */ 
   }
  </style>
 </head>
 <body>
 
  <div class="panel">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.marginRight
]]> http://phpforms.net/tutorial/css-reference/margin-right.html/feed 0 margin-left http://phpforms.net/tutorial/css-reference/margin-left.html http://phpforms.net/tutorial/css-reference/margin-left.html#comments Tue, 13 Apr 2010 04:52:46 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3301
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin-left

Description
It determines an indentation size from the left margin of an element. A space is the distance from external margin of the current element left margin to internal margin of its parental element (fig. 1).


Syntax

margin-left: value | auto

Arguments
You can specify size of the left indentation in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the indentation size will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin-left</title>
  <style type="text/css">
   .layer1 {
    background-color: #D36037; /* Background color */
   }
   .layer2 {
    margin-left: 20%; /* Left margin */
    background-color: #ccc; /* Background color */
    padding: 10px; /* Areas around the text */
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat. 
   </div>
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.marginLeft
]]> http://phpforms.net/tutorial/css-reference/margin-left.html/feed 0 margin-bottom http://phpforms.net/tutorial/css-reference/margin-bottom.html http://phpforms.net/tutorial/css-reference/margin-bottom.html#comments Tue, 13 Apr 2010 04:41:23 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3296
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value 0
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom

Description
It determines an indentation size from the bottom margin of an element. A space is the distance from external margin of the current element bottom margin to internal margin of its parental element (fig. 1).


Syntax

margin-bottom: value | auto

Arguments
You can specify size of the bottom indentation in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the indentation size will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin-bottom</title>
  <style type="text/css">
   .layer1 {
    background: #008B66; /* Background color */
    color: white;  /* Text color */
    padding: 10px;  /* Areas around the text */
    margin-bottom: -7px; /* Bottom margin */
   }
   .layer2 {
    margin-left: 40px;  /* Left margin */
    background: #ccc;  /* Background color */
    padding: 10px; /* Areas around the text*/
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer1">
   <big>Lorem ipsum dolor sit amet</big>
  </div> 
 
  <div class="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat. 
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.marginBottom
]]> http://phpforms.net/tutorial/css-reference/margin-bottom.html/feed 0 margin http://phpforms.net/tutorial/css-reference/margin.html http://phpforms.net/tutorial/css-reference/margin.html#comments Tue, 13 Apr 2010 04:28:52 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3290
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value No
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/box.html#propdef-margin

Description
It determines a space size from each border of an element. A space is the space from border of a current element to internal border of its parental element (fig. 1).


If the element does not have parent, the distance from element border to a window border of a browser taking into account that spaces are determined by default at the window too. If you want to dispose of them, it is necessary to determine the value margin for the selector that is equal to zero.
The parameter margin allows to set space size for all parties of an element at once or to define it only for the specified parties.

Syntax

margin: value | auto {1,4}

Arguments
It is allowed to use one, two, three or four values, dividing them among themselves by a blank. The effect depends on quantity of arguments and is given in tab. 1.

Тab. 1. Dependence on amount of arguments
Amount of arguments Result
1 Indents will be determined for all element sides.
2 The first argument determines a space from top and a bottom borders, the second argument — from left and right ones.
3 The first argument sets a space from an upper border, the second does from left and a right edge simultaneously, and the third — from a bottom border.
4 The space is determined step by step from top, right, bottom and a left border.

It is possible to specify size of spaces in pixels (px), percent (%) or other admissible units for CSS. Value can be both positive and a negative number. The argument auto specifies that the size of spaces will be automatically calculated by a browser.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>margin</title>
  <style type="text/css">
   BODY { 
    margin: 0; /* Remove indents */
   }
   DIV.parent {
    margin: 20%; /* Margins around the element */
    background: #fd0; /* Background color */
    padding: 10px; /* Areas around the text */
   } 
   DIV.child {
    border: 3px solid #666; /* Frame parameters */
    padding: 10px; /* Areas around the text */
    margin: 10px; /* Margins around */
   }
  </style>
 </head> 
 <body> 
 
  <div class="parent">
   <div class="child">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat. 
   </div>
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.margin
]]> http://phpforms.net/tutorial/css-reference/margin.html/feed 0 list-style-type http://phpforms.net/tutorial/css-reference/list-style-type.html http://phpforms.net/tutorial/css-reference/list-style-type.html#comments Mon, 12 Apr 2010 11:32:49 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3282
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Errors Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value disc (for <UL>), decimal (for <OL>)
Inherited Yes
Applied To tags <DD>, <DT>, <LI>, <OL>and <UL> and also to all elements having specified the style property "display: list-item"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type

Description
It changes a marker kind for each element of the list. This attribute is used only when value of property list-style-image is determined as none. Markers differ for the marked list (tag <UL>) and numbered (tag <OL>).

Syntax

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Arguments
The arguments circle, disc, square are used for the marked list. For the numbered list: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. The argument none determines marker type. It is the same as a parental element.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style-type</title>
  <style type="text/css">
   UL {
    list-style-type: square; /* Square markers */
   }
  </style>
 </head>
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.</li>
   </ul>
 
 </body>
 </html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.listStyleType

Remark
When you use the enumerate list <OL> and the value "inside" of the parameter "list-style-position" in the browser Internet Explorer 6 the numbers beginning from 10 collide the list text.
]]> http://phpforms.net/tutorial/css-reference/list-style-type.html/feed 0 list-style-position http://phpforms.net/tutorial/css-reference/list-style-position.html http://phpforms.net/tutorial/css-reference/list-style-position.html#comments Mon, 12 Apr 2010 11:12:40 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3275
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Errors Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value outside
Inherited Yes
Applied To tags <DD>, <DT>, <LI>, <OL>and <UL> and also to all elements having specified the style property "display: list-item"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

Description
It defines how the marker will be placed relative to the text. There are 2 values: "outside" - marker is placed outside the text (fig.1); and "inside" - marker is flowed by the text (fig.2).




Syntax

list-style-position: inside | outside

Arguments
inside
Marker is a part of the text block and is imaged in the list element.
outside
Text is left aligned and markers are placed outside the text block.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style-position</title>
  <style type="text/css">
   UL {
    list-style-image: url(images/book.gif); /* Path to the image for marker setting */
    list-style-position: inside; /* Marker is flowed by the text */
   }
  </style>
 </head> 
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 
 </body>
</html>

The result of this example is shown on the figure 3


Object model

[window.]document.getElementById("elementID").style.listStylePosition

Remark
In the browser Internet Explorer 6 when you use the enumerated list <OL> and the value "inside" of the parameter "list-style-position", the numbers more than 10 begin to collide the list text.
]]> http://phpforms.net/tutorial/css-reference/list-style-position.html/feed 0 list-style-image http://phpforms.net/tutorial/css-reference/list-style-image.html http://phpforms.net/tutorial/css-reference/list-style-image.html#comments Mon, 12 Apr 2010 10:42:55 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3270
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value No
Inherited Yes
Applied To tags <DD>, <DT>, <LI>, <OL>and <UL> and also to all elements having specified the style property "display: list-item"
HTML analog <ul type > | <ol type > | <li type >
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image

Description
This parameter determines the image address which serves as a list marker. This attribute is inherited; therefore value none is used for separate elements of the list for marker restoration.

Syntax

list-style-image: none | url (a path to a file)

Arguments
Relative or absolute way to a graphic file is used as the value. The argument none cancels the image as a marker for a parental element.

Example 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style-image</title>
  <style type="text/css">
   UL {
    list-style-image: url('images/book.gif');
   }
  </style>
 </head> 
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.listStyleImage

Remark
In different browsers the distance between the image and the text may be different.
]]> http://phpforms.net/tutorial/css-reference/list-style-image.html/feed 0 list-style http://phpforms.net/tutorial/css-reference/list-style.html http://phpforms.net/tutorial/css-reference/list-style.html#comments Mon, 12 Apr 2010 10:25:25 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3264
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value disc (for <UL>), decimal (for <OL>)
Inherited Yes
Applied To tags <DD>, <DT>, <LI>, <OL>and <UL> and also to all elements having specified the style property "display: list-item"
HTML analog <ul type > | <ol type > | <li type >
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-list-style

Description
This attribute allows specifying simultaneously a marker style, location and also the image which will be used as a marker. If you want to learn documents more carefully, you should look properties of each parameter separately: list-style-type, list-style-position and list-style-image.

Syntax

list-style: list-style-type || list-style-position || list-style-image

Arguments
There are any combinations of 3 values defining markers style. They can be in any order. Values are divided among themselves by a blank. Any argument is not obligatory; therefore not used values can be lowered.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style</title>
  <style type="text/css">
   UL {
   list-style: square outside; /* Square markers */
                               /* Markers are placed autside 
                                  the text block */
   }
  </style>
 </head> 
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.listStyle
]]> http://phpforms.net/tutorial/css-reference/list-style.html/feed 0 link http://phpforms.net/tutorial/css-reference/link.html http://phpforms.net/tutorial/css-reference/link.html#comments Mon, 12 Apr 2010 10:09:39 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3259
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Applied To links (tag <A>)
HTML analog <body LINK="#RRGGBB">
Reference to specification http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

Description
Pseudo class link is used for links that have not been visited by users yet. Also it specifies the style appearance.

Syntax

A:link { ... }

Arguments
No.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>link</title>
  <style type="text/css">
   a:link {
    color: #0000d0; /* Link color */
   }
   a:visited {
    color: #900060; /* Link visited color */
   }
  </style>
 </head>
 <body>
 
   <p><a href="task2.html">Find out the weight of  out-of-order load (stone)</a></p> 
   <p>Given: chair, stick, rope, bismar with limited weight.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1

]]> http://phpforms.net/tutorial/css-reference/link.html/feed 0 line-height http://phpforms.net/tutorial/css-reference/line-height.html http://phpforms.net/tutorial/css-reference/line-height.html#comments Mon, 12 Apr 2010 09:55:41 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3255
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value normal
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Description
It determines line spacing of a text. Readout is conducted from a font basic line. Under usual circumstances the distance between lines depends on a font kind and a font size and is defined by a browser automatically. Negative value of inter lower case distance is not supposed.

Syntax

line-height: normal |	multiplier | value | percent

Arguments
Value normal forces a browser to calculate distance between lines automatically. Any number of more zero is perceived as a multiplier from a font size of the current text. For example, value 1.5 determines one-and-a-half line spacing. Any length units in CSS are accepted as values — for example, pixels (px), inches (in) are accepted, points (pt), etc. It is allowed to use percentage record. In this case the font height undertakes 100 percent.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>line-height</title>
  <style type="text/css">
   H1 {
    line-height: 60%;
   } 
   P {
    line-height: 1.5;
   }
  </style>
 </head> 
 <body> 
 
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.lineHeight
]]> http://phpforms.net/tutorial/css-reference/line-height.html/feed 0 letter-spacing http://phpforms.net/tutorial/css-reference/letter-spacing.html http://phpforms.net/tutorial/css-reference/letter-spacing.html#comments Mon, 12 Apr 2010 09:10:21 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3251
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value normal
Inherited Yes
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing

Description
This parameter defines an interval between symbols within an element. Browsers usually determine distance between symbols proceeding from font type and kind, sizes and operating system options. This attribute is applied to change this value. You can use negative value but in this case it is necessary to be convinced that text readability remains.

Syntax

letter-spacing: denotation | normal

Arguments
Any length units in CSS are accepted as values — for example, pixels (px), inches (in) are accepted, points (pt), etc. The best result gives use of relative units based on a font size (em and ex). The argument normal sets an interval between symbols as usually.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>letter-spacing</title>
  <style type="text/css">
   P {
    letter-spacing: 5px;
   }
  </style>
 </head> 
 <body> 
 
  <h1>Duis te feugifacilisi</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.letterSpacing
]]> http://phpforms.net/tutorial/css-reference/letter-spacing.html/feed 0 left http://phpforms.net/tutorial/css-reference/left.html http://phpforms.net/tutorial/css-reference/left.html#comments Mon, 12 Apr 2010 08:58:54 +0000 bekhter_aa http://phpforms.net/tutorial/?p=3245
Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-left

Description
This parameter defines distance for the positioned element from a left edge of a parental element, not including a space, a field and framework width to a left edge of an affiliated element (fig. 1). Readout of coordinates depends on parameter position value. If its argument is equal absolute, window of a browser is as the parent and element position is defined from its left border. In case of value relative, the argument left is counted from a left border of an element starting position.


Syntax

left: denotation | percent | auto

Arguments
Any length units accepted in CSS are acecepted as values— for example, pixels (px), inches (in), points (pt), etc. Parameter denotation left can be negative, imposing of different elements against each other are possible in this case. At the value task in percentage element position is calculated depending on width of a parental element. The argument auto does not change element position.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>left</title>
  <style type="text/css">
   .layer1 {
    position: absolute; /* Absolute positioning */
    left: 20px; /* Location from the left edge */
    background: #fc3; /* Background color */
    margin: 7px; /* Indents around the element */
   }
   .layer2 {
    position: relative; /* Ralative positioning */
    left: -12px; /* Location from the left edge */
    top: 13px; /* Location from the top edge */
    border: 1px solid black; /* Frame parameters */
    padding: 5px; /* Areas around the text */
    margin: 7px; /* Indents around the element */
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </div>
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.left
]]> http://phpforms.net/tutorial/css-reference/left.html/feed 0 hover http://phpforms.net/tutorial/css-reference/hover.html http://phpforms.net/tu