Difference between revisions of "CSS GUIDE LEFT"
(→See Also) |
|||
| (21 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
== Summary == | == Summary == | ||
The left property is used to horizontally offset from the left edge of an element. | The left property is used to horizontally offset from the left edge of an element. | ||
| + | <table border="0"> | ||
| + | <tr> | ||
| + | <td><b>Applicability:</b></td><td>The left property can be used for positioned elements.<td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b> | ||
| + | </td><td>Visual</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><b>Inherited:</b></td><td>No</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><b>Default Value:</b></td><td>auto</td> | ||
| + | </tr> | ||
| + | </table> | ||
== Syntax == | == Syntax == | ||
| − | + | <pre> | |
| + | TARGET_ELEMENT{left: inhert !important} | ||
| + | TARGET_ELEMENT{left: auto} | ||
| + | TARGET_ELEMENT{left: 20%} | ||
| + | TARGET_ELEMENT{left: 20px} | ||
| + | </pre> | ||
| + | |||
== Legal Values == | == Legal Values == | ||
| + | <table border="1" cellspacing="2" cellpadding="5"> | ||
| + | <tr> | ||
| + | <th align="left">Value</th><th align="left">Description</th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>inherit</td><td>Explicitly sets the value to that of the parent</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>auto</td><td>Allows the browser to calculate the left position of the element</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>percentage</td><td>Sets the left position in a percentage from the left edge. Can be 0%-100%</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>length</td><td>Sets the left position in pixels (px), centimeters (cm), etc, from the left edge.</td> | ||
| + | </tr> | ||
| + | </table> | ||
== Mozilla Recommended Values == | == Mozilla Recommended Values == | ||
== Usage Examples == | == Usage Examples == | ||
| + | <pre> | ||
| + | p{ | ||
| + | position: absolute; | ||
| + | left: 20px | ||
| + | } | ||
| + | |||
| + | img{ | ||
| + | position: absolute; | ||
| + | left: 15% | ||
| + | } | ||
| + | |||
| + | div{ | ||
| + | position: absolute; | ||
| + | left: auto | ||
| + | } | ||
| + | </pre> | ||
== Notes == | == Notes == | ||
| + | When left property is used with the position property, if the position property has a value of "static", the left property has no effect on the element. | ||
== Specification Conformance == | == Specification Conformance == | ||
| + | *CSS 1 | ||
| + | *[http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-left CSS 2.1] | ||
| + | *CSS 3 | ||
== Browser Compatibility == | == Browser Compatibility == | ||
| + | * Netscape 4, 6, 7 | ||
| + | * Mozilla 1 | ||
| + | * Firefox 1, 2 | ||
| + | * Internet Explorer 4, 5, 6 | ||
== See Also == | == See Also == | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_RIGHT right property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_BOTTOM bottom property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_TOP top property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_OVERFLOW overflow property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_POSITION position property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_VERTICAL_ALIGN vertical-align property] | ||
| + | * [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_Z_INDEX z-index property] | ||
Latest revision as of 00:56, 12 December 2006
This document is a work in progress and is subject to change.
Contents
Summary
The left property is used to horizontally offset from the left edge of an element.
| Applicability: | The left property can be used for positioned elements. | |
| Media Group: | Visual | |
| Inherited: | No | |
| Default Value: | auto |
Syntax
TARGET_ELEMENT{left: inhert !important}
TARGET_ELEMENT{left: auto}
TARGET_ELEMENT{left: 20%}
TARGET_ELEMENT{left: 20px}
Legal Values
| Value | Description |
|---|---|
| inherit | Explicitly sets the value to that of the parent |
| auto | Allows the browser to calculate the left position of the element |
| percentage | Sets the left position in a percentage from the left edge. Can be 0%-100% |
| length | Sets the left position in pixels (px), centimeters (cm), etc, from the left edge. |
Mozilla Recommended Values
Usage Examples
p{
position: absolute;
left: 20px
}
img{
position: absolute;
left: 15%
}
div{
position: absolute;
left: auto
}
Notes
When left property is used with the position property, if the position property has a value of "static", the left property has no effect on the element.
Specification Conformance
- CSS 1
- CSS 2.1
- CSS 3
Browser Compatibility
- Netscape 4, 6, 7
- Mozilla 1
- Firefox 1, 2
- Internet Explorer 4, 5, 6
