docs/specimens/html-align-to-css.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <title>HTML align attribute to CSS - HTML Purifier Specimen</title>
   6 <style type="text/css">
   7 div.container {position:relative;height:110px;}
   8 div.container.legend .test {text-align:center;line-height:100px;}
   9 div.test {width:100px;height:100px;border:1px solid black;
  10 position:absolute;top:10px;}
  11 div.test.html {left:10px;}
  12 div.test.css  {left:140px;}
  13 table {background:#F00;}
  14 img {border:1px solid #000;}
  15 hr {width:50px;}
  16 div.segment {width:250px; float:left; margin-top:1em;}
  17 </style>
  18 </head>
  19 <body>
  20
  21 <h1>HTML align attribute to CSS</h1>
  22
  23 <p>Inspect source for methodology.</p>
  24
  25 <div class="container legend">
  26 <div class="test html">
  27     HTML
  28 </div>
  29 <div class="test css">
  30     CSS
  31 </div>
  32 </div>
  33
  34 <div class="segment">
  35
  36 <h2>table.align</h2>
  37
  38 <h3>left</h3>
  39 <div class="container">
  40 <div class="test html">
  41     a<table align="left"><tr><td>O</td></tr></table>a
  42 </div>
  43 <div class="test css">
  44     a<table style="float:left;"><tr><td>O</td></tr></table>a
  45 </div>
  46 </div>
  47
  48 <h3>center</h3>
  49 <div class="container">
  50 <div class="test html">
  51     a<table align="center"><tr><td>O</td></tr></table>a
  52 </div>
  53 <div class="test css">
  54     a<table style="margin-left:auto; margin-right:auto;"><tr><td>O</td></tr></table>a
  55 </div>
  56 </div>
  57
  58 <h3>right</h3>
  59 <div class="container">
  60 <div class="test html">
  61     a<table align="right"><tr><td>O</td></tr></table>a
  62 </div>
  63 <div class="test css">
  64     a<table style="float:right;"><tr><td>O</td></tr></table>a
  65 </div>
  66 </div>
  67
  68 </div>
  69
  70 <!-- ################################################################## -->
  71
  72 <div class="segment">
  73 <h2>img.align</h2>
  74 <h3>left</h3>
  75 <div class="container">
  76 <div class="test html">
  77     a<img src="img.png" align="left">a
  78 </div>
  79 <div class="test css">
  80     a<img src="img.png" style="float:left;">a
  81 </div>
  82 </div>
  83
  84 <h3>right</h3>
  85 <div class="container">
  86 <div class="test html">
  87     a<img src="img.png" align="right">a
  88 </div>
  89 <div class="test css">
  90     a<img src="img.png" style="float:right;">a
  91 </div>
  92 </div>
  93
  94 <h3>bottom</h3>
  95 <div class="container">
  96 <div class="test html">
  97     a<img src="img.png" align="bottom">a
  98 </div>
  99 <div class="test css">
 100     a<img src="img.png" style="vertical-align:baseline;">a
 101 </div>
 102 </div>
 103
 104 <h3>middle</h3>
 105 <div class="container">
 106 <div class="test html">
 107     a<img src="img.png" align="middle">a
 108 </div>
 109 <div class="test css">
 110     a<img src="img.png" style="vertical-align:middle;">a
 111 </div>
 112 </div>
 113
 114 <h3>top</h3>
 115 <div class="container">
 116 <div class="test html">
 117     a<img src="img.png" align="top">a
 118 </div>
 119 <div class="test css">
 120     a<img src="img.png" style="vertical-align:top;">a
 121 </div>
 122 </div>
 123
 124 </div>
 125
 126 <!-- ################################################################## -->
 127
 128 <div class="segment">
 129
 130 <h2>hr.align</h2>
 131
 132 <h3>left</h3>
 133 <div class="container">
 134 <div class="test html">
 135     <hr align="left" />
 136 </div>
 137 <div class="test css">
 138     <hr style="margin-right:auto; margin-left:0; text-align:left;" />
 139 </div>
 140 </div>
 141
 142 <h3>center</h3>
 143 <div class="container">
 144 <div class="test html">
 145     <hr align="center" />
 146 </div>
 147 <div class="test css">
 148     <hr style="margin-right:auto; margin-left:auto; text-align:center;" />
 149 </div>
 150 </div>
 151
 152 <h3>right</h3>
 153 <div class="container">
 154 <div class="test html">
 155     <hr align="right" />
 156 </div>
 157 <div class="test css">
 158     <hr style="margin-right:0; margin-left:auto; text-align:right;" />
 159 </div>
 160 </div>
 161
 162 </div>
 163
 164 </body>
 165 </html>