Created
January 18, 2014 11:18
-
-
Save adatoo/8489108 to your computer and use it in GitHub Desktop.
HTML Dead Centre From: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><title>Dead Centre</title> | |
| <style type="text/css" media="screen"> | |
| <!-- | |
| body { | |
| color: white; | |
| background-color: #003; | |
| margin: 0px | |
| } | |
| #horizon { | |
| color: white; | |
| background-color: #0ff; | |
| text-align: center; | |
| position: absolute; | |
| top: 50%; | |
| left: 0px; | |
| width: 100%; | |
| height: 1px; | |
| overflow: visible; | |
| visibility: visible; | |
| display: block | |
| } | |
| #content { | |
| font-family: Verdana, Geneva, Arial, sans-serif; | |
| background-color: #f00; | |
| margin-left: -125px; | |
| position: absolute; | |
| top: -35px; | |
| left: 50%; | |
| width: 250px; | |
| height: 70px; | |
| visibility: visible | |
| } | |
| .bodytext { | |
| font-size: 14px | |
| } | |
| .headline { | |
| font-weight: bold; | |
| font-size: 24px | |
| } | |
| #footer { | |
| font-size: 11px; | |
| font-family: Verdana, Geneva, Arial, sans-serif; | |
| text-align: center; | |
| position: absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 20px; | |
| visibility: visible; | |
| display: block | |
| } | |
| a:link, a:visited { | |
| color: #06f; | |
| text-decoration: none | |
| } | |
| a:hover { | |
| color: red; | |
| text-decoration: none | |
| } | |
| .captions { | |
| color: white; | |
| font-size: 10px; | |
| line-height: 14px; | |
| font-family: Verdana, Geneva, Arial, sans-serif; | |
| text-align: left | |
| } | |
| #caption1 { | |
| padding-left: 6px; | |
| border-left: 1px dashed #66c; | |
| position: absolute; | |
| top: -80px; | |
| left: -200px; | |
| width: 250px; | |
| height: 80px; | |
| visibility: visible; | |
| display: block | |
| } | |
| #caption2 { | |
| padding-left: 6px; | |
| border-left: 1px dashed #66c; | |
| position: absolute; | |
| top: 92px; | |
| left: 125px; | |
| width: 250px; | |
| height: auto; | |
| visibility: visible; | |
| display: block | |
| } | |
| --> | |
| </style> | |
| </head> | |
| <body> | |
| <div id="horizon"> | |
| <div id="content"> | |
| <div class="bodytext"><div id="caption1" class="captions">The cyan box 'horizon' is positioned absolutely 50% from the top of the page, is 100% wide and has a nominal height of 1px. Its overflow is set to 'visible'.</div> | |
| This text is | |
| <br> | |
| <span class="headline">DEAD CENTRE</span> | |
| <br> | |
| and stays there! | |
| <div id="caption2" class="captions">The red 'content' box is nested inside the 'horizon' box and is 250px wide, 70px high and is positioned absolutely 50% from the left - but has a negative margin that is exactly half of its width, -125px. To get it to centre vertically, it has a negative top position that is exactly half of its height, -35px.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="footer"> | |
| <a href="http://www.wpdfd.com/editorial/thebox/deadcentre3.html">back</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment