0.4.x/test/comic-html-structure.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
  11         <!-- InstanceBeginEditable name="doctitle" -->\r
  12         <title>マンガ状コンテンツを表示するための html + css の調査 | pettanR</title>\r
  13         <!-- InstanceEndEditable -->\r
  14         <!-- InstanceBeginEditable name="head" -->\r
  15         <style type="text/css">\r
  16 /*  PettanR Comic\r
  17 --------------------------------------------------------------------------------------*/\r
  18 .test1-pettanr-comic-wrapper {\r
  19         margin:                                 1em auto;\r
  20 }\r
  21         .test1-pettanr-comic-panel {\r
  22                 border-style:                   solid;\r
  23                 border-color:                   #111;\r
  24                 position:                               relative;\r
  25                 margin:                                 1em 0;\r
  26                 overflow:                               hidden;\r
  27         }\r
  28                 .test1-pettanr-comic-panel img,\r
  29                 .test1-pettanr-comic-balloon {\r
  30                         position:                               absolute;\r
  31                 }\r
  32                 .test1-pettanr-comic-balloon img {\r
  33                         width:                                  100%;\r
  34                         height:                                 100%;\r
  35                 }       \r
  36                 .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
  37                         position:                               absolute;\r
  38                         table-layout:                   fixed;\r
  39                         top:                                    0;\r
  40                         left:                                   16.6%;\r
  41                         width:                                  66.6%;\r
  42                         height:                                 100%;\r
  43                         border:                                 0;\r
  44                         padding:                                0;\r
  45                         margin:                                 0 !important;\r
  46                 }\r
  47                         .test1-pettanr-comic-speach tbody,\r
  48                         .test1-pettanr-comic-speach tr,\r
  49                         .test1-pettanr-comic-speach td {\r
  50                                 width:                          100%;\r
  51                                 height:                         100%;\r
  52                                 border:                         0;\r
  53                                 padding:                        0;\r
  54                                 margin:                         0 !important;\r
  55                                 vertical-align:         middle;\r
  56                                 text-align:                     center;\r
  57                                 font-size:                      14px; /* opera6で仕様 13px は不可 */\r
  58                         }\r
  59                         \r
  60                         \r
  61 /*  PettanR Comic\r
  62 --------------------------------------------------------------------------------------*/\r
  63 .test2-pettanr-comic-wrapper {\r
  64         margin:                                 1em auto;\r
  65 }\r
  66         .test2-pettanr-comic-panel {\r
  67                 border-style:                   solid;\r
  68                 border-color:                   #111;\r
  69                 position:                               relative;\r
  70                 margin:                                 1em 0;\r
  71                 overflow:                               hidden;\r
  72         }\r
  73                 .test2-pettanr-comic-panel img {\r
  74                         position:                               absolute;\r
  75                 }\r
  76                 .test2-pettanr-comic-balloon {\r
  77                         position:                               absolute;\r
  78                 }\r
  79                         .test2-pettanr-comic-balloon img {\r
  80                                 position:                               absolute;\r
  81                                 width:                                  100%;\r
  82                                 height:                                 100%;\r
  83                         }\r
  84                         .test2-pettanr-comic-balloon div {\r
  85                                 position:                               relative;\r
  86                                 display:                                table-row;\r
  87                                 padding:                                0 16.6%;\r
  88                                 width:                                  66.6%;\r
  89                                 height:                                 100%;\r
  90                         }       \r
  91                                 .test2-pettanr-comic-balloon div p {\r
  92                                         display:                                table-cell;\r
  93                                         vertical-align:                 middle;\r
  94                                         text-align:                             center;\r
  95                                         margin:                                 0 !important;\r
  96                                         padding:                                0 !important;\r
  97                                         *position:                              absolute;\r
  98                                         *top:                                   50%;\r
  99                                 }\r
 100                                         .test2-pettanr-comic-balloon div p span {\r
 101                                                 *display:                               block;\r
 102                                                 zoom:                                   1;\r
 103                                                 *position:                              relative;\r
 104                                                 *top:                                   -50%;\r
 105                                                 font-size:                              14px;\r
 106                                         }               \r
 107 /*  PettanR Comic\r
 108 --------------------------------------------------------------------------------------*/\r
 109 .test3-pettanr-comic-wrapper {\r
 110         margin:                                 1em auto;\r
 111 }\r
 112         .test3-pettanr-comic-panel {\r
 113                 border-style:                   solid;\r
 114                 border-color:                   #111;\r
 115                 position:                               relative;\r
 116                 margin:                                 1em 0;\r
 117                 overflow:                               hidden;\r
 118         }\r
 119                 .test3-pettanr-comic-panel img {\r
 120                         position:                               absolute;\r
 121 \r
 122                 }\r
 123                 .test3-pettanr-comic-balloon {\r
 124                         position:                               absolute;\r
 125                 }\r
 126                         .test3-pettanr-comic-balloon img {\r
 127                                 position:                               absolute;\r
 128                                 width:                                  100%;\r
 129                                 height:                                 100%;                           \r
 130                         }\r
 131                         .test3-pettanr-comic-balloon p {\r
 132                                 margin:                                 0 !important;\r
 133                                 padding:                                0 !important;                           \r
 134                                 display:                                table;\r
 135                                 position:                               absolute;\r
 136                                 top:                                    0;\r
 137                                 left:                                   16.6%;\r
 138                                 width:                                  66.6%;\r
 139                                 height:                                 100%;\r
 140                                 *height:                                auto;\r
 141                                 *top:                                   50% !important;\r
 142                                 border:                                 1px solid red;                          \r
 143                         }       \r
 144                                 .test3-pettanr-comic-balloon p span {\r
 145                                         display:                                table-cell;\r
 146                                         vertical-align:                 middle;\r
 147                                         text-align:                             center;\r
 148                                         *display:                               block;\r
 149                                         zoom:                                   1;\r
 150                                         *position:                              relative;\r
 151                                         *top:                                   -50%;\r
 152                                         font-size:                              14px; /* opera6で仕様 13px は不可 */\r
 153                                         border:                                 1px solid blue;         \r
 154                                 }       \r
 155         </style>\r
 156         <!-- InstanceEndEditable -->\r
 157 </head>\r
 158 \r
 159 <body>\r
 160     <div id="general-content">\r
 161         <div id="outer-wrapper">\r
 162             \r
 163             <div id="header">\r
 164                 <div class="base-content-width" style="position:relative;">\r
 165                     <h1><a href="../index.html">pettanR</a></h1>\r
 166                 <!-- global navi -->\r
 167                     <div id="global-navi">\r
 168                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 169                     </div>\r
 170                 </div>\r
 171             </div>\r
 172             \r
 173             <div id="inner-wrapper" class="base-content-width">\r
 174                                 <!-- InstanceBeginEditable name="main_content" -->\r
 175                                 <div id="main">\r
 176                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; マンガ状コンテンツを表示するための html + css の調査</div>\r
 177                                         <h2>マンガ状コンテンツを表示するための html + css の調査</h2>\r
 178                                         <p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
 179                                         <p>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか？このページを表示させつつ判断します．</p>\r
 180                                         <p>このページでは js を使用していないため ベクター画像の置き換えは行われず、反転画像はサーバのものが読み込まれます．</p>\r
 181                                         \r
 182                                         <h2>&lt;table&gt;  を使ったテキストの上下中央配置</h2>\r
 183                                         <p>&lt;table&gt; タグを使ったレイアウトは多くのブラウザで意図した表示が期待できるが、html 文書としてはよろしくない．</p>\r
 184                                         <div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
 185                                                 <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 186                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 187                                                         <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 188                                                                 <img src="../system_pictures/_w5.gif">\r
 189                                                                 <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</td></tr></table>\r
 190                                                         </div>\r
 191                                                         <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 192                                                                 <img src="../system_pictures/_w19.gif">\r
 193                                                                 <table class="test1-pettanr-comic-speach"><tr><td>さて？</td></tr></table>\r
 194                                                         </div>\r
 195                                                 </div>\r
 196                                         </div>\r
 197                                         <h3>対応ブラウザ</h3>\r
 198                                         <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7</p>\r
 199                                         <h3>準対応ブラウザ</h3>\r
 200                                         <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す ), Konqueror4.8(windows, さて？がずれる)</p>\r
 201                                         <h3>非対応ブラウザ</h3>\r
 202                                         <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
 203                                         <h3>source</h3>\r
 204                                         <h4>html 部分</h4>\r
 205                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 206                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;table&gt; からなる．</p>\r
 207                                         <pre><code>\r
 208 &lt;div class=&quot;test1-pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 209         &lt;div class=&quot;test1-pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 210                 &lt;img src=&quot;../resource_pictures/1.png&quot; width=&quot;166&quot; height=&quot;252&quot; style=&quot;left: 178px; top: -2px; z-index: 0;&quot;&gt;\r
 211                 &lt;div class=&quot;test1-pettanr-comic-balloon&quot; style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;&gt;\r
 212                         &lt;img src=&quot;../system_pictures/_w5.gif&quot;&gt;\r
 213                         &lt;table class=&quot;test1-pettanr-comic-speach&quot;&gt;&lt;tr&gt;&lt;td&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;\r
 214                 &lt;/div&gt;\r
 215                 &lt;div class=&quot;test1-pettanr-comic-balloon&quot; style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;&gt;\r
 216                         &lt;img src=&quot;../system_pictures/_w19.gif&quot;&gt;\r
 217                         &lt;table class=&quot;test1-pettanr-comic-speach&quot;&gt;&lt;tr&gt;&lt;td&gt;さて？&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;\r
 218                 &lt;/div&gt;\r
 219         &lt;/div&gt;\r
 220 &lt;/div&gt;\r
 221                                         </code></pre>\r
 222                                         <h4>css 部分</h4>\r
 223                                         <pre><code>\r
 224 .test1-pettanr-comic-wrapper {\r
 225         margin:                                 1em auto;\r
 226 }\r
 227         .test1-pettanr-comic-panel {\r
 228                 border-style:                   solid;\r
 229                 border-color:                   #111;\r
 230                 position:                               relative;\r
 231                 margin:                                 1em 0;\r
 232                 overflow:                               hidden;\r
 233         }\r
 234                 .test1-pettanr-comic-panel img,\r
 235                 .test1-pettanr-comic-balloon {\r
 236                         position:                               absolute;\r
 237                 }               \r
 238                 .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
 239                         position:                               absolute;\r
 240                         table-layout:                   fixed;\r
 241                         top:                                    16.6%;\r
 242                         left:                                   16.6%;\r
 243                         width:                                  66.6%;\r
 244                         height:                                 66.6%;\r
 245                         border:                                 0;\r
 246                         padding:                                0;\r
 247                         margin:                                 0 !important;\r
 248                 }\r
 249                         .test1-pettanr-comic-speach tbody,\r
 250                         .test1-pettanr-comic-speach tr,\r
 251                         .test1-pettanr-comic-speach td {\r
 252                                 width:                          100%;\r
 253                                 height:                         100%;\r
 254                                 border:                         0;\r
 255                                 padding:                        0;\r
 256                                 margin:                         0 !important;\r
 257                                 vertical-align:         middle;\r
 258                         }\r
 259                                         </code></pre>\r
 260 \r
 261 \r
 262                                         <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン</h2>\r
 263                                         <p>html タグ構造は 先の &lt;table&gt; レイアウトに比べて自然．しかし <code>display:table-cell</code> などを使うため、より広範なブラウザに対応する、という点で不安が残る．</p>\r
 264                                         <p>参考にしたページ <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a></p>\r
 265                                         <div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
 266                                                 <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 267                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 268                                                         <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 269                                                                 <img src="../system_pictures/_w5.gif">\r
 270                                                                 <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
 271                                                         </div>\r
 272                                                         <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 273                                                                 <img src="../system_pictures/_w19.gif">\r
 274                                                                 <p><span>さて？</span></p>\r
 275                                                         </div>\r
 276                                                 </div>\r
 277                                         </div>                                  \r
 278                                         <h3>対応ブラウザ</h3>\r
 279                                         <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
 280                                         <h3>準対応ブラウザ</h3>\r
 281                                         <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す )</p>\r
 282                                         <h3>非対応ブラウザ</h3>\r
 283                                         <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
 284                                         <h3>source</h3>\r
 285                                         <h4>html 部分</h4>\r
 286                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 287                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;p&gt; と &lt;span&gt; からなる．</p>\r
 288                                         <pre><code>\r
 289 &lt;div class=&quot;test3-pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 290         &lt;div class=&quot;test3-pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 291                 &lt;img src=&quot;../resource_pictures/1.png&quot; width=&quot;166&quot; height=&quot;252&quot; style=&quot;left: 178px; top: -2px; z-index: 0;&quot;&gt;\r
 292                 &lt;div class=&quot;test3-pettanr-comic-balloon&quot; style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;&gt;\r
 293                         &lt;img src=&quot;../system_pictures/_w5.gif&quot;&gt;\r
 294                         &lt;p&gt;&lt;span&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/span&gt;&lt;/p&gt;\r
 295                 &lt;/div&gt;\r
 296                 &lt;div class=&quot;test3-pettanr-comic-balloon&quot; style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;&gt;\r
 297                         &lt;img src=&quot;../system_pictures/_w19.gif&quot;&gt;\r
 298                         &lt;p&gt;&lt;span&gt;さて？&lt;/span&gt;&lt;/p&gt;\r
 299                 &lt;/div&gt;\r
 300         &lt;/div&gt;\r
 301 &lt;/div&gt;\r
 302                                         </code></pre>\r
 303                                         <h4>css 部分</h4>\r
 304                                         <pre><code>\r
 305 .test3-pettanr-comic-wrapper {\r
 306         margin:                                 1em auto;\r
 307 }\r
 308         .test3-pettanr-comic-panel {\r
 309                 border-style:                   solid;\r
 310                 border-color:                   #111;\r
 311                 position:                               relative;\r
 312                 margin:                                 1em 0;\r
 313                 overflow:                               hidden;\r
 314         }\r
 315                 .test3-pettanr-comic-panel img {\r
 316                         position:                               absolute;\r
 317 \r
 318                 }\r
 319                 .test3-pettanr-comic-balloon {\r
 320                         position:                               absolute;\r
 321                 }\r
 322                         .test3-pettanr-comic-balloon img {\r
 323                                 position:                               absolute;\r
 324                                 width:                                  100%;\r
 325                                 height:                                 100%;                           \r
 326                         }\r
 327                         .test3-pettanr-comic-balloon p {\r
 328                                 margin:                                 0 !important;\r
 329                                 padding:                                0 !important;                           \r
 330                                 display:                                table;\r
 331                                 position:                               absolute;\r
 332                                 top:                                    0;\r
 333                                 left:                                   16.6%;\r
 334                                 width:                                  66.6%;\r
 335                                 height:                                 100%;\r
 336                                 *height:                                auto;\r
 337                                 *top:                                   50% !important;                         \r
 338                         }       \r
 339                                 .test3-pettanr-comic-balloon p span {\r
 340                                         display:                                table-cell;\r
 341                                         vertical-align:                 middle;\r
 342                                         text-align:                             center;\r
 343                                         *display:                               block;\r
 344                                         zoom:                                   1;\r
 345                                         *position:                              relative;\r
 346                                         *top:                                   -50%;                                   \r
 347                                 }       \r
 348                                         </code></pre>\r
 349                                         \r
 350                                         \r
 351                                         <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応</h2>\r
 352                                         <p>table-cell 及び クロスブラウザ対応</p>\r
 353                                         <div class="test2-pettanr-comic-wrapper" style="width: 400px;">\r
 354                                                 <div class="test2-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 355                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 356                                                         <div class="test2-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 357                                                                 <img src="../system_pictures/_w5.gif">\r
 358                                                                 <div><p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p></div>\r
 359                                                         </div>\r
 360                                                         <div class="test2-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 361                                                                 <img src="../system_pictures/_w19.gif">\r
 362                                                                 <div><p><span>さて？</span></p></div>\r
 363                                                         </div>\r
 364                                                 </div>\r
 365                                         </div>\r
 366                                         <h3>対応ブラウザ</h3>\r
 367                                         <p>NN9, firefox 3.6, ie6</p>\r
 368                                         \r
 369                                 </div>\r
 370                                 <!-- InstanceEndEditable -->\r
 371             </div>\r
 372         </div>\r
 373     </div>\r
 374     \r
 375     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 376 \r
 377         <div id="footer">\r
 378             <div id="footer-item-container" class="base-content-width clearfix">\r
 379                 <div class="footer-item-wrapper">\r
 380                     <div class="footer-item">\r
 381                         <h2>ぺったんR にようこそ</h2>\r
 382                         <ul>\r
 383                             <li>サンプル</li>\r
 384                             <li>ぺったんRの特徴</li>\r
 385                             <li>沿革</li>\r
 386                         </ul>\r
 387                         <h2>Test</h2>\r
 388                         <ul>\r
 389                             <li><a href="index.html">Test Index</a></li>\r
 390                         </ul>\r
 391                     </div>\r
 392                 </div>\r
 393                 <div class="footer-item-wrapper">\r
 394                     <div class="footer-item">\r
 395                         <h2>ドキュメント</h2>\r
 396                         <ul>\r
 397                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 398                             <li>絵師向けドキュメント</li>                                                     \r
 399                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 400                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 401                         </ul>\r
 402                     </div>\r
 403                 </div>\r
 404                 <div class="footer-item-wrapper">\r
 405                     <div class="footer-item">\r
 406                         <h2>プロトタイプ</h2>\r
 407                         <ul>\r
 408                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 409                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 410                         </ul>\r
 411                         <h2>Ajax contents</h2>\r
 412                         <ul>\r
 413                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 414                         </ul>\r
 415                     </div>\r
 416                 </div>\r
 417                 <div class="footer-item-wrapper" style="width:170px;">\r
 418                     <div class="footer-item" style="padding-right:0;">\r
 419                         <h2>ぺったんRチーム</h2>\r
 420                         <ul>\r
 421                             <li>わたしたちについて</li>\r
 422                             <li>ミッション</li>\r
 423                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 424                             <li>個人情報保護方針</li>\r
 425                             <li>作品の取り扱い</li>\r
 426                             <li>お問い合わせ</li>\r
 427                         </ul>\r
 428                     </div>\r
 429                 </div>\r
 430             </div>\r
 431             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 432         </div><!-- #EndLibraryItem -->\r
 433         </div>\r
 434         <script type="text/javascript">\r
 435                 var has_server_support = false;\r
 436         </script>\r
 437         <script type="text/javascript" src="../javascripts/common.js"></script>\r
 438 <!-- InstanceBeginEditable name="script" -->\r
 439 <!-- InstanceEndEditable -->\r
 440 </body>\r
 441 <!-- InstanceEnd --></html>\r