From 2014.igem.org
(Difference between revisions)
|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <title>CSS centering Done Right.</title>
| |
| - | <head>
| |
| - | <style>
| |
| - | * {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - | html, body {
| |
| - | height: 100%;
| |
| - | width: 100%;
| |
| - | }
| |
| - | .Box1 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 10px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Box2 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 30px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Box3 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 50px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Box4 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 70px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Title1 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 1000px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Title2 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 1500px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Title3 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 2000px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| - | .Title4 {
| |
| - | display: inline-block;
| |
| - | font-size: 19px;
| |
| - | position:absolute;
| |
| - | top: 2500px;
| |
| - | left: 50%;
| |
| - | max-width: 320px;
| |
| - | min-width: 50px;
| |
| - | height: 20px;
| |
| - | min-width: 30px;
| |
| - | padding: 10px;
| |
| - | outline:none;
| |
| - | }
| |
| | | | |
| - | </style>
| |
| - | <body>
| |
| - | <div class="Box1">
| |
| - | <div >
| |
| - | <button type="button" onClick="pageScroll()" value="Scroll Page"> 1
| |
| - | </button>
| |
| - | </div>
| |
| - |
| |
| - | <div class="Box2">
| |
| - | <div >
| |
| - | 2
| |
| - | </div>
| |
| - |
| |
| - | <div class="Box3">
| |
| - | <div >
| |
| - | 3
| |
| - | </div>
| |
| - |
| |
| - | <div class="Box4">
| |
| - | <div >
| |
| - | 4
| |
| - | </div>
| |
| - |
| |
| - | <div class="Title1">
| |
| - | <div >
| |
| - | Title 1
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="Title2">
| |
| - | <div >Title 2</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="Title3">
| |
| - | <div >Title 3</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="Title4">
| |
| - | <div >Title 4</div>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - | <script type="text/javascrpit">
| |
| - | function pageScroll() {
| |
| - | window.scrollBy(0,50);
| |
| - | scrolldelay = setTimeout('pageScroll()',100);
| |
| - | }
| |
| - | </scrpit>
| |
| - |
| |
| - | </body>
| |
| - | </html>
| |
Latest revision as of 22:43, 31 July 2014
"
