POSITIONING & FORMAT

NCD Style Sheet Guide v6.0

Sponsor's ADs:
!!! Netscape 4 can't display "Cascading Positioning" correctly.
So some images will appear in unexpected places. !!!

+ Box Positioning

Box Positioning {position: # }
    #=static
    #=relative
    #=absolute
    #=fixed

#=fixed is supported only by Macintosh Internet Explorer 5 or later, and Mozilla.

Specify Left Position {left: # }
Specify Top Position {top: # }

Specify Right Position {right: # }
Specify Bottom Position {bottom: # }
    #=length (px, pt, in, cm, em), %, auto


Relative Positioning

<img src="heno01.gif">
<div style="position:relative; left:20px; top:50px">
   Today is fine.
</div>
Show Result

Absolute & Fixed Positioning

<div style="position:#; left:0; top:0">
   <img src="heno01.gif">
   Today is fine.
</div>
<div style="position:#; right:0; bottom:0">
   Tomorrow will be fine.
   <img src="heno02.gif">
</div>
<div>
   TEXT TEXT TEXT...
</div>
#=absolute ... Show Result
#=fixed ... Show Result



+ Cascading Positioning 

<div style="position:relative; left:0; top:0;
            height:100; width:100; border-style:solid">
   Today is fine.<BR>
   <img src="heno03.gif" style="position: #; left:#; top:#">
   Tomorrow will be fine.<BR>
</div>
position:ablolute;
left:0; top:0
Today is fine.
Tomorrow will be fine.
position:relative;
left:0; top:0
Today is fine.
Tomorrow will be fine.
position:ablolute;
left:20; top:20
Today is fine.
Tomorrow will be fine.
position:relative;
left:20; top:20
Today is fine.
Tomorrow will be fine.



+ Z-Index Ordering

{z-index: # }     #=integer, auto

Default z-index is "0".
<div style="position:relative; left:0; top:0;
            height:100; width:100; border-style:solid">
   Today is fine.<BR>
   Tomorrow will be fine.<BR>
   <img src="heno03.gif" 
        style="position:absolute; left:0; top:0; z-index:#">
</div>

z-index:auto
Today is fine.
Tomorrow will be fine.

z-index:-1
Today is fine.
Tomorrow will be fine.


+ Clipping

{clip: rect(#top #right #bottom #left) }
    #=length (px, pt, in, cm, em), auto 

<div style="position:relative; left:0; top:0; width:100">
   <p style="position:absolute; clip:#;
             background:yellow">
      Today is fine.<br>
      Tomorrow will be fine.
   </p>
</div>
clip:auto clip:rect(0 30 30 0)

Today is fine.
Tomorrow will be fine.

Today is fine.
Tomorrow will be fine.



More simple clipping sample(with no cascading position)
Netscape 4 support this one.





+ Visibility

{visibility: # }     #=visible, hidden

Default value is "visible".
HELLO
<div style="position:relative; left:0; top:0; visibility:#;
            height:100; width:100; border-style:solid">
   Today is fine.<BR>
   Tomorrow will be fine.<BR>
</div>
BYE

visibility:visible

 HELLO
Today is fine.
Tomorrow will be fine.
BYE

visibility:hidden

 HELLO
Today is fine.
Tomorrow will be fine.
BYE


+ Display

{display: # }     #=block, inline, list-item, none

Each tag has a default display value.

display:block

<SPAN style="display:block">
Hello.
</SPAN>
Today is fine.
Hello. Today is fine.

display:inline

<div style="display:inline">
Hello.
</div>
Today is fine.
Hello.
Today is fine.

display:list-item

<ul>
   <div style="display:list-item">
   Hello.
   </div>
<ul>
Today is fine.
    Hello.
Today is fine.

display:none

HELLO
<div style="width:100; border-style:solid; display:#">
Today is fine.<BR>
Tomorrow will be fine.<BR>
</div>
BYE
display:block
 HELLO
Today is fine.
Tomorrow will be fine.
BYE
display:none
 HELLO
Today is fine.
Tomorrow will be fine.
BYE



Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design