Nature Abhors a Vacuum (final fixtest page).
Centered and not so Framish
This page is just a simplified version of the March stylesheet (cir.css) that shows fixed positioning can be used with centered content and doesn't have to look like a frame. There are other examples throughout the site with fixed headers, footers, etc. October is particularly heinous, definitely the ugliest and possibly the
most annoying pageI've ever made. This time, ie6 is in standards mode so it will render the code below as it's formatted in the html.Here's the css for this page:
<style type="text/css" media="all"> /* giving everbody some reference */ html, body, div { height: 100%; width: 100%; } body { font: 90% verdana, helvetica, sans-serif; background-color: #dddddd; } * { margin: 0; padding: 0; } /* hack to make ie win do fixed positioning, hidden from others with * html \*/ * html, * html body, * html body div {overflow: auto; } * html dl {position: absolute; right: 11%; } /* hidden from ie mac by the escaped end comment */ /* the definition list holds the links and is outside the div in the html */ dl { position: fixed; right: 9%; top: 5em; text-align: right; } /* centers the main content */ ol { margin: 0 8%; } /* margin creates space for the fixed menu */ li { margin-right: 13%; } /* general appearance styles */ a:link { color: #3333cc; } a:visited { color: #11bb11; } a:hover { color: #cc3333; } h1 { font: bold 1.6em/1.3 verdana, helvetica, sans-serif; margin-left: 8%; color: #cc3333; } ol { list-style: none; border: 3px solid #cc3333; background: #fafafa; padding: .5em 0; } li { border-right: 3px solid #3333cc; } li img { float: left; border-width: 3px; margin: .5em 1em; } li h2 { padding: 1em; font-size: 1.1em; color: #11bb11; } li p { padding: .5em 1em; } li code { white-space: pre; background: #dddddd; display: block; padding: .5em 1em; border-left: 3px solid #3333cc; } address { margin-left: 8%; } </style>
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum auctor aliquam sapien. Vivamus wisi. Integer eget tellus ac felis cursus ultricies. Suspendisse hendrerit leo non est. Nullam tortor. Aliquam erat volutpat. Donec quam. Pellentesque nec leo in odio volutpat rhoncus. In hac habitasse platea dictumst. Nullam pulvinar aliquet magna. Etiam odio. Sed eros. Etiam ultricies, nunc a mollis dictum, purus nisl gravida turpis, et bibendum diam felis non tellus. Morbi justo wisi, ullamcorper pellentesque, feugiat nec, mattis ut, justo.
Quisque laoreet est ut mi. Vivamus pharetra. Etiam enim est, ornare placerat, ultrices a, vestibulum quis, magna. Nam nec sem ut nunc convallis scelerisque. Aenean interdum augue quis mauris. Integer ipsum velit, venenatis non, varius vitae, nonummy id, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed tellus eget libero ultrices auctor. Donec nec arcu ut quam consequat porta. Donec nec massa. Aliquam eu ligula at risus eleifend bibendum. Duis fringilla mi imperdiet justo. Praesent hendrerit mi et orci. Donec cursus ipsum eu magna. Sed mi tortor, venenatis eu, semper eu, lobortis at, turpis. Suspendisse potenti.
Donec eget nunc. Etiam aliquam, nulla in placerat suscipit, arcu nibh varius quam, vitae lobortis massa justo sed leo. Suspendisse pretium. Phasellus lorem purus, dapibus at, blandit a, luctus id, dui. Vestibulum sollicitudin orci sit amet velit. Etiam consequat tristique nunc. Suspendisse tempor quam vel pede. Curabitur wisi dolor, nonummy quis, condimentum id, elementum nec, ligula. Duis nonummy sodales dolor. Fusce tortor. Vivamus arcu. Suspendisse quis sem eu purus bibendum vehicula. In et libero. Vivamus vestibulum bibendum ante. Cras volutpat. Fusce convallis fringilla elit. Proin sem. Sed felis. Sed felis tortor, iaculis quis, placerat sed, gravida sed, sem.