top

  • Revision slug: CSS/top
  • Revision title: top
  • Revision id: 20261
  • 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.

EXAMPLE

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

For syntax and examplification the attribute has the same usage and inputs as CSS:bottom.

Revision Source

<p><span class="mw-headline">Summary</span>
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><p><span class="mw-headline">EXAMPLE</span><br>
</p>
<pre>'''/* The body could be set using px unit also for the div to operate */'''&lt;br /&gt;
'''body{'''&lt;br /&gt;
width: 100%;&lt;br /&gt;
height: 100%;&lt;br /&gt;
'''}'''&lt;br /&gt;
'''/* The div can now operate the settings with % unit (body w and h are set) */'''&lt;br /&gt;
'''div{'''&lt;br /&gt;
'''position:absolute;'''&lt;br /&gt;
left:15%;&lt;br /&gt;
'''''top:30%;'''''&lt;br /&gt;
bottom:30%;&lt;br /&gt;
width:70%;&lt;br /&gt;
height:40%;&lt;br /&gt;
text-align:left;&lt;br /&gt;
border: 3px rgb(0,0,0) solid;&lt;br /&gt;
'''}'''&lt;br /&gt;
</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>
<p>For syntax and examplification the attribute has the same usage and inputs as <b>CSS:bottom</b>.
</p>
Revert to this revision