API tools faq
paste
Advertisement
Guest User

PayneLess Designs - Aligning - Dead Center

a guest
Jun 24th, 2011
1,091
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html><head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <title>Aligning - Dead Center</title>
  5. <meta name="description" content="">
  6. <meta name="keywords" content="">
  7. <meta name="author" content="Ron">
  8. <meta name="date" content="2/23/2009">
  9. <meta name="copyright" content="PayneLess Designs">
  10.  
  11. <style type="text/css" media="screen"><!--
  12. body
  13.     {
  14.     color: white;
  15.     background-color: #003;
  16.     margin: 0px
  17.     }
  18.  
  19. #horizon
  20.     {
  21.     color: white;
  22.     background-color: #0ff;
  23.     text-align: center;
  24.     position: absolute;
  25.     top: 50%;
  26.     left: 0px;
  27.     width: 100%;
  28.     height: 1px;
  29.     overflow: visible;
  30.     visibility: visible;
  31.     display: block
  32.     }
  33.  
  34. #content
  35.     {
  36.     font-family: Verdana, Geneva, Arial, sans-serif;
  37.     background-color: #f00;
  38.     margin-left: -125px;
  39.     position: absolute;
  40.     top: -35px;
  41.     left: 50%;
  42.     width: 250px;
  43.     height: 70px;
  44.     visibility: visible
  45.     }
  46.  
  47. .bodytext
  48.     {
  49.     font-size: 14px
  50.     }
  51.  
  52. .headline
  53.     {
  54.     font-weight: bold;
  55.     font-size: 24px
  56.     }
  57.  
  58. #footer
  59.     {
  60.     font-size: 11px;
  61.     font-family: Verdana, Geneva, Arial, sans-serif;
  62.     text-align: center;
  63.     position: absolute;
  64.     bottom: 0px;
  65.     left: 0px;
  66.     width: 100%;
  67.     height: 20px;
  68.     visibility: visible;
  69.     display: block
  70.     }
  71.  
  72. a:link, a:visited
  73.     {
  74.     color: #06f;
  75.     text-decoration: none
  76.     }
  77.  
  78. a:hover
  79.     {
  80.     color: red;
  81.     text-decoration: none
  82.     }
  83.  
  84. .captions
  85.     {
  86.     color: white;
  87.     font-size: 10px;
  88.     line-height: 14px;
  89.     font-family: Verdana, Geneva, Arial, sans-serif;
  90.     text-align: left
  91.     }
  92.  
  93. #caption1
  94.     {
  95.     padding-left: 6px;
  96.     border-left: 1px dashed #66c;
  97.     position: absolute;
  98.     top: -80px;
  99.     left: -200px;
  100.     width: 250px;
  101.     height: 80px;
  102.     visibility: visible;
  103.     display: block
  104.     }
  105.  
  106. #caption2
  107.     {
  108.     padding-left: 6px;
  109.     border-left: 1px dashed #66c;
  110.     position: absolute;
  111.     top: 92px;
  112.     left: 125px;
  113.     width: 250px;
  114.     height: auto;
  115.     visibility: visible;
  116.     display: block
  117.     }
  118.  
  119. --></style>
  120. </head>
  121. <body>
  122. <div id="horizon">
  123. <div id="content">
  124. <div class="bodytext">
  125.  
  126. <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 setto 'visible'.</div>
  127.  
  128. This text is<br><span class="headline">DEAD CENTRE</span><br>and stays there!
  129.  
  130. <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>
  131.  
  132. </div>
  133. </div>
  134. </div>
  135.  
  136. <div id="footer"><a href="http://www.wpdfd.com/editorial/thebox/deadcentre3.html">Link</a></div>
  137. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!