mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-10 01:40:17 +01:00
80 lines
2.5 KiB
HTML
80 lines
2.5 KiB
HTML
|
<HTML>
|
||
|
|
<HEAD>
|
||
|
|
<TITLE>A frame document with CSS2</TITLE>
|
||
|
|
<meta name="crc" content=1064543067>
|
||
|
|
<STYLE type="text/css">
|
||
|
|
#header {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 15%;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: auto;
|
||
|
|
left: 0;
|
||
|
|
background-color: #cccccc;
|
||
|
|
}
|
||
|
|
#sidebar {
|
||
|
|
position: fixed;
|
||
|
|
width: 10em;
|
||
|
|
height: auto;
|
||
|
|
top: 15%;
|
||
|
|
right: auto;
|
||
|
|
bottom: 100px;
|
||
|
|
left: 0;
|
||
|
|
font-style: italic;
|
||
|
|
background-color: #ffffe0;
|
||
|
|
}
|
||
|
|
#main {
|
||
|
|
position: fixed;
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
top: 15%;
|
||
|
|
right: 0;
|
||
|
|
bottom: 100px;
|
||
|
|
left: 10em;
|
||
|
|
overflow: auto;
|
||
|
|
padding: 2px .5em;
|
||
|
|
border: solid 1px black;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
#footer {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
top: auto;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: auto;
|
||
|
|
background-color: #cccccc;
|
||
|
|
}
|
||
|
|
</STYLE>
|
||
|
|
</HEAD>
|
||
|
|
<BODY>
|
||
|
|
<DIV id="header">
|
||
|
|
<table width=100% height=100%><tr><td style="font-style: italic" align=center valign=middle>Header</td></tr></table>
|
||
|
|
</DIV>
|
||
|
|
<DIV id="sidebar">
|
||
|
|
<P style="padding-left: 2em; padding-top: 2em">S<br>i<br>d<br>e<br>b<br>a<br>r</p>
|
||
|
|
</DIV>
|
||
|
|
<DIV id="main">
|
||
|
|
<h2>Introduction</h2>This is an example of fixed positioning.
|
||
|
|
<h2>Layout</h2>This example is straight from the CSS2 spec (section 9.6.1) and shows how to create
|
||
|
|
frame-like presentations. This is the main text of the document that's inside of a fixed position
|
||
|
|
scrollable DIV tag.
|
||
|
|
<p>The header, footer, and sidebar are all done with fixed position DIV tags, too. The header and
|
||
|
|
footer have nested tables that are used to center the text horizontally and vertically.
|
||
|
|
<h2>Fixed positioning</h2>Fixed positioning is a subcategory of absolute positioning. The only
|
||
|
|
difference is that for a fixed positioned box, the containing block is established by the viewport.
|
||
|
|
<p>For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they
|
||
|
|
are similar to fixed background images. For paged media, boxes with fixed positions are repeated on
|
||
|
|
every page.
|
||
|
|
</DIV>
|
||
|
|
<DIV id="footer">
|
||
|
|
<table width=100% height=100%><tr><td style="font-style: italic" align=center valign=middle>Footer</td></tr></table>
|
||
|
|
</DIV>
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|
||
|
|
|