top

  • Revision slug: CSS/top
  • Revision title: top
  • Revision id: 20268
  • Created:
  • Creator: Nicephotog
  • Is current revision? No
  • Comment

Revision Content

Summary

The top property of a box element is the calculated position its top edge will sit relating to either its bounding element(relative) top edge or its window top edge(absolute). With mozila.org browsers, when positioning a box element, there are distinct settings and requirements for usage of the measurement calibrational units. When a box is positioned it can be given its measurement for top in pixels (px) value {{mediawiki.external('Re <b>bottom</b> : <length> ')}}. However when a percentage (%) is used, it requires to calibrate the sizing from a parent boxs' setting. Until the body in the CSS style or sheet is set (for width and height of can be percentage e.g. 100%) then the deeper box elements will not respond to a declared % setting in any of width,height,top or bottom.
Peculiarly, margin and its sub attributes(e.g. margin-top) will respond to % being set when no such calibrational quantity has been given to the body.

Examples


/* The body could be set using px unit also for the div to operate */
body{
width: 100%;
height: 100%;
}
/* The div can now operate the settings with % unit (body w and h are set) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<title>Mozzila.org height top left width percentage CSS</title>

<style type="text/css">
/* The body could be set using px unit also for the div to operate */
body{
width: 100%;
height: 100%;
}
/* The div can now operate the settings with % unit (body w and h are set) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
</style>

</head>
<body>

<center>

<div>
...Some content...
</div>

</center>

</body>
</html>

Notes

top is the more relevent property than bottom because the browser window default is to valign to the top.
With some position property settings the top property is irrelevent.
Top and bottom settings can be used by DHTML for more than simply the div element.

For syntax and examplification the property has the similar usage and is the compliment to http://developer.mozilla.org/en/docs/CSS:bottom bottom.

Revision Source

<h3 name="Summary"><span class="mw-headline"> Summary </span></h3>
<p>The <b>top</b> property of a box element is the calculated <i>position</i> its top edge will
sit relating to either its bounding element(relative) top edge or its window top edge(absolute).
With mozila.org browsers, when positioning a box element, there are distinct
settings and requirements for usage of the <b>measurement calibrational units</b>.
When a box is positioned it can be given its measurement for <b>top</b> in pixels
(<b>px</b>) value {{mediawiki.external('Re &lt;b&gt;bottom&lt;/b&gt; : &lt;length&gt; ')}}.
However when a percentage (<b>%</b>) is used, it requires to calibrate the sizing from
a parent boxs' setting. Until the <b>body</b> in the CSS style or sheet is set (for
<b>width</b> and <b>height</b> of can be percentage e.g. 100%) then the deeper box elements
will not respond to a declared <b>%</b> setting in any of <i>width,height,top or bottom</i>.<br>
Peculiarly, <i>margin</i> and its sub attributes(<i>e.g. margin-top</i>) will respond to <b>%</b> being set when no such calibrational quantity has been given to the <i>body</i>.
</p>
<h3 name="Examples"><span class="mw-headline"> Examples </span></h3>
<p><br>
</p>
<pre>/* The body could be set using px unit also for the div to operate */
body{
width: 100%;
height: 100%;
}
/* The div can now operate the settings with % unit (body w and h are set) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
</pre>
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="application/xhtml+xml" /&gt;
&lt;title&gt;Mozzila.org height top left width percentage CSS&lt;/title&gt;

&lt;style type="text/css"&gt;
/* The body could be set using px unit also for the div to operate */
body{
width: 100%;
height: 100%;
}
/* The div can now operate the settings with % unit (body w and h are set) */
div{
position:absolute;
left:15%;
top:30%;
bottom:30%;
width:70%;
height:40%;
text-align:left;
border: 3px rgb(0,0,0) solid;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;center&gt;

&lt;div&gt;
...Some content...
&lt;/div&gt;

&lt;/center&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Notes"><span class="mw-headline"> Notes </span></h3>
<p>top is the more relevent property than bottom because the browser window default is to valign to the top.<br>
With some position property settings the top property is irrelevent.<br>
Top and bottom settings can be used by DHTML for more than simply the div element.<br>
</p><p>For syntax and examplification the property has the similar usage and is the compliment to http://developer.mozilla.org/en/docs/CSS:bottom bottom.
</p>
Revert to this revision