add comic2html_0.1.html

[pettanr/clientJs.git] / 0.4.x / test / comic-html-structure.html

diff --git a/0.4.x/test/comic-html-structure.html b/0.4.x/test/comic-html-structure.html
index c25ca57..a5335b2 100644 (file)
--- a/0.4.x/test/comic-html-structure.html
+++ b/0.4.x/test/comic-html-structure.html
@@ -9,7 +9,7 @@
        <meta http-equiv="imagetoolbar" content="no">\r
        <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
        <!-- InstanceBeginEditable name="doctitle" -->\r
-       <title>Comic 用 html構造テスト | pettanR</title>\r
+       <title>マンガ状コンテンツを表示するための html + css の調査 | pettanR</title>\r
        <!-- InstanceEndEditable -->\r
        <!-- InstanceBeginEditable name="head" -->\r
        <style type="text/css">\r
@@ -54,6 +54,7 @@
                                margin:                         0 !important;\r
                                vertical-align:         middle;\r
                                text-align:                     center;\r
+                               font-size:                      14px; /* opera6で仕様 13px は不可 */\r
                        }\r
                        \r
                        \r
@@ -82,7 +83,7 @@
                        }\r
                        .test2-pettanr-comic-balloon div {\r
                                position:                               relative;\r
-                               display:                                table;\r
+                               display:                                table-row;\r
                                padding:                                0 16.6%;\r
                                width:                                  66.6%;\r
                                height:                                 100%;\r
@@ -101,6 +102,7 @@
                                                zoom:                                   1;\r
                                                *position:                              relative;\r
                                                *top:                                   -50%;\r
+                                               font-size:                              14px;\r
                                        }               \r
 /*  PettanR Comic\r
 --------------------------------------------------------------------------------------*/\r
@@ -136,7 +138,8 @@
                                width:                                  66.6%;\r
                                height:                                 100%;\r
                                *height:                                auto;\r
-                               *top:                                   50% !important;                         \r
+                               *top:                                   50% !important;\r
+                               border:                                 1px solid red;                          \r
                        }       \r
                                .test3-pettanr-comic-balloon p span {\r
                                        display:                                table-cell;\r
@@ -145,7 +148,9 @@
                                        *display:                               block;\r
                                        zoom:                                   1;\r
                                        *position:                              relative;\r
-                                       *top:                                   -50%;                                   \r
+                                       *top:                                   -50%;\r
+                                       font-size:                              14px; /* opera6で仕様 13px は不可 */\r
+                                       border:                                 1px solid blue;         \r
                                }       \r
        </style>\r
        <!-- InstanceEndEditable -->\r
@@ -168,7 +173,7 @@
             <div id="inner-wrapper" class="base-content-width">\r
                                <!-- InstanceBeginEditable name="main_content" -->\r
                                <div id="main">\r
-                                       <div id="breadcrumb"><a href="index.html">ã\83\86ã\82¹ã\83\88 ã\82¤ã\83³ã\83\87ã\83\83ã\82¯ã\82¹</a> &gt; ã\82³ã\83\9fã\83\83ã\82¯ç\94¨ html æ§\8bé\80 ã\81®ã\83\86ã\82¹ã\83\88</div>\r
+                                       <div id="breadcrumb"><a href="index.html">ã\83\86ã\82¹ã\83\88 ã\82¤ã\83³ã\83\87ã\83\83ã\82¯ã\82¹</a> &gt; ã\83\9eã\83³ã\82¬ç\8a¶ã\82³ã\83³ã\83\86ã\83³ã\83\84ã\82\92表示ã\81\99ã\82\8bã\81\9fã\82\81ã\81® html + css ã\81®èª¿æ\9f»</div>\r
                                        <h2>マンガ状コンテンツを表示するための html + css の調査</h2>\r
                                        <p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
                                        <p>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか？このページを表示させつつ判断します．</p>\r
@@ -190,7 +195,11 @@
                                                </div>\r
                                        </div>\r
                                        <h3>対応ブラウザ</h3>\r
-                                       <p>NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8</p>\r
+                                       <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7</p>\r
+                                       <h3>準対応ブラウザ</h3>\r
+                                       <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す ), Konqueror4.8(windows, さて？がずれる)</p>\r
+                                       <h3>非対応ブラウザ</h3>\r
+                                       <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
                                        <h3>source</h3>\r
                                        <h4>html 部分</h4>\r
                                        <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
@@ -252,6 +261,7 @@
 \r
                                        <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン</h2>\r
                                        <p>html タグ構造は 先の &lt;table&gt; レイアウトに比べて自然．しかし <code>display:table-cell</code> などを使うため、より広範なブラウザに対応する、という点で不安が残る．</p>\r
+                                       <p>参考にしたページ <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a></p>\r
                                        <div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
                                                <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
                                                        <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
@@ -266,7 +276,11 @@
                                                </div>\r
                                        </div>                                  \r
                                        <h3>対応ブラウザ</h3>\r
-                                       <p>NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8</p>\r
+                                       <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
+                                       <h3>準対応ブラウザ</h3>\r
+                                       <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す )</p>\r
+                                       <h3>非対応ブラウザ</h3>\r
+                                       <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
                                        <h3>source</h3>\r
                                        <h4>html 部分</h4>\r
                                        <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r