mozilla

Compare Revisions

top

Change Revisions

Revision 20259:

Revision 20259 by Nicephotog on

Revision 20260:

Revision 20260 by Nicephotog on

Title:
top
top
Slug:
CSS/top
CSS/top
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 20259
Revision 20260
n7    <h3 name="Summary">n
8      Summary
9    </h3>
n11      With mozila.org browsers, when positioning a box element, tn8      <a href="en/Summary">Summary</a> The <b>top</b> property of
>here are distinct settings and requirements for usage of the <b>m> a box element is the calculated position its top edge will sit r
>easurement calibrational units</b>. When a box is positioned it c>elating to either its bounding element(relative) top edge or its 
>an be given its measurement for <b>top</b> in pixels (<b>px</b>) >window top edge. With mozila.org browsers, when positioning a box
>value {{mediawiki.external('Re &lt;b&gt;bottom&lt;/b&gt;&nbsp;: &> element, there are distinct settings and requirements for usage 
>lt;length&gt; ')}}. However when a percentage (<b>%</b>) is used,>of the <b>measurement calibrational units</b>. When a box is posi
> it requires to calibrate the sizing from a parent boxs' setting.>tioned it can be given its measurement for <b>top</b> in pixels (
> Until the <b>body</b> in the CSS style or sheet is set (for <b>w><b>px</b>) value {{mediawiki.external('Re &lt;b&gt;bottom&lt;/b&g
>idth</b> and <b>height</b> of can be percentage e.g. 100%) then t>t;&nbsp;: &lt;length&gt; ')}}. However when a percentage (<b>%</b
>he deeper box elements will not respond to a declared <b>%</b> se>>) is used, it requires to calibrate the sizing from a parent box
>tting in any of <i>width,height,top or bottom</i>.<br>>s' setting. Until the <b>body</b> in the CSS style or sheet is se
 >t (for <b>width</b> and <b>height</b> of can be percentage e.g. 1
 >00%) 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>
n15      <b>e.g. CSS</b><br>n12      <a href="en/EXAMPLE">EXAMPLE</a><br>
16      <b>/* The body could be set using px unit also for the div 
>to operate */</b><br> 
17      <b>body{</b><br>
18      width: 100%;<br>
19      height: 100%;<br>
20      <b>}</b><br>
21      <b>/* The div can now operate the settings with&nbsp;% unit
> (body w and h are set) */</b><br> 
22      <b>div{</b><br>
23      <b>position:absolute;</b><br>
24      left:15%;<br>
25      <i><b>top:30%;</b></i><br>
26      bottom:30%;<br>
27      width:70%;<br>
28      height:40%;<br>
29      text-align:left;<br>
30      border: 3px rgb(0,0,0) solid;<br>
31      <b>}</b><br>
32      &lt;p /&gt;
tt14    <pre>
15'''/* The body could be set using px unit also for the div to ope
 >rate */'''&lt;br /&gt;
16'''body{'''&lt;br /&gt;
17width: 100%;&lt;br /&gt;
18height: 100%;&lt;br /&gt;
19'''}'''&lt;br /&gt;
20'''/* The div can now operate the settings with % unit (body w an
 >d h are set) */'''&lt;br /&gt;
21'''div{'''&lt;br /&gt;
22'''position:absolute;'''&lt;br /&gt;
23left:15%;&lt;br /&gt;
24'''''top:30%;'''''&lt;br /&gt;
25bottom:30%;&lt;br /&gt;
26width:70%;&lt;br /&gt;
27height:40%;&lt;br /&gt;
28text-align:left;&lt;br /&gt;
29border: 3px rgb(0,0,0) solid;&lt;br /&gt;
30'''}'''&lt;br /&gt;
31</pre>

Back to History