![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
テーブルによるレイアウトを排除した場合、Opera 6/7では正常に表示できない場合があるので注意しましょう。
具体的には、
<div>
<div style="float:right"><!-- (B) -->
ほげほげ
........
........
........
へげへげ
</div>
<div><!-- (A) -->
ほげらほげら
............
............
<div style="clear:both"></div><!-- (1) -->
へてらへてら
............
............
</div>
</div>
<div style="clear:both"></div><!-- (2) -->
とあった場合、(1)にclearがあっても親ブロック(A)の外側にあるBブロックのfloatが解除されてはいけないのですが、Opera 6/7は解除してしまいます。
|ほげらほげら|ほげほげ| |............|........| |............|........| |へてらへてら|........| |............|へげへげ| |............|
となるべきものが、Opera 6/7では
|ほげらほげら|ほげほげ| |............|........| |............|........| | |........| | |へげへげ| |へてらへてら| |............| |............|
になってしまいます。
Internet Explorer 5/6、Netscape 6/7、Mozillaでは親ブロック(A)の外側にあるBブロックのfloatが解除されることはないので、正常に表示されます。
これで問題になるのは、本文とメニューバーをfloatで左右に並べているとき(テーブルレイアウトを排除した場合は、通常はこうなっているはず)、本文中でclearが現われた場合です。
clearが親ブロックの外側のfloatまで解除してしまうOperaのバグです。
対策は左右を逆にする。floatを指定していない側のブロックにclearがなければ、Operaでも正常に表示できますので、左右のブロックを逆にすればよい。
PukiWikiの場合、一般にメニューバーのブロックには原則としてclearがないので、本文のブロックを先に記述してfloatするとよい。つまり、メニューバーを左に置いた場合には上記の問題は発生しない。この場合、メニューバーよりも先に本文を記述することになるから、テキストブラウザや音声ブラウザのアクセシビリティも向上する。
<div>
<div style="float:right"><!-- (A) -->
ほげらほげら
............
............
<div style="clear:both"></div><!-- (1) -->
へてらへてら
............
............
</div>
<div><!-- (B) -->
ほげほげ
........
........
........
へげへげ
</div>
</div>
<div style="clear:both"></div><!-- (2) -->
PukiWiki のコマンドが並ぶ navigation 部をカスタマイズしたいと考えています。 コマンドを左寄せと右寄せの１行で表現したくて、HTML だと以下のようになります。
<table width="100%">
<tr>
<td align="left">左寄せ</td><td align="right">右寄せ</td>
</tr>
</table>
これを CSS で表現するにはどう書けばいいのでしょうか？ PukiWiki というよりも、CSS の質問で恐縮ですが返信頂けると助かります。
<table>タグのwidth属性、<td>タグのalign属性はXHTML 1.1でも使用可能なので、とくにCSSで指定しなくてもいいです。あえてCSSで指定するなら下記のようになります。
<table class="table_width">
<tr>
<td class="left">左寄せ</td><td class="right">右寄せ</td>
</tr>
</table>
.table_width{
width:100%;
}
.left{
text-align:left:
}
.right{
text-align:right;
}返信ありがとうございます。では TABLE 使わずに表現するにはどうすればいいでしょうか？ 具体的には以下を CSS でコントロールしたいです。
<div id="navigator">
<div id="navi_left">
左寄り
</div>
<div id="navi_right">
右寄り
</div>
</div>下記のようにすれば可能です。
<div id="navigator">
<div id="navi_right">
右寄り
</div>
<div id="navi_left">
左寄り
</div>
</div>
<div class="dummy"></div> ←この行はたぶん無くても大丈夫
.navigator{
width:100%;
}
.navi_left{
text-align:left;
}
.navi_right{
float:right;
text-align:right; /* 右揃えにしたい場合 */
}
.dummy{
clear:both;
}
なお、floatを使う場合の注意は、しろくろのへや:PukiWiki/覚え書き参照。
やりたいことがバッチリできました。ありがとうございました。
<div style="width:20%; float:left;"> サイドバー hogehoge hogehoge hogehoge hogehoge hogehoge </div> <div style="width:79%; float:right;"> 本文 hogehoge hogehoge hogehoge hogehoge hogehoge </div> <div style="clear: both;" />
のような % 指定では Mozilla でみた場合は問題ないが、IE の場合、 ウィンドウのサイズを狭めていくと回りこみが発生する。 詳しくは、１単語が画面20%におさまらなくなったら発生する。 IE の CSS では "word-wrap:break-word;" と１単語が収まらなくなったら単語の途中でも改行させるプロパティがあるが、 サイドバーでは検索フォームを使用する場合も多く、 検索フォームはさすがに途中で改行させられないため簡単に画面20%を超えうる。 右本文にはまだまだ余裕があるのに、左側が20%しか使用できていないのだ。 やり玉にあげるようで申し訳ないが、例えば official:自作スキン/irid official:自作スキン/OrangeBox は現状この状況。Let's try irid - Wiki.Youjing.ws。
変わりに
<div style="width:100px; float:left;"> サイドバー hogehoge hogehoge hogehoge hogehoge hogehoge </div> <div style="margin-left:100px"> 本文 hogehoge hogehoge hogehoge hogehoge hogehoge </div> <div style="clear: both;" />
とするのが王道だろう。昔の pukiwiki.org は reimy 氏の手によりこのようにデザインされていた。 この場合、右本文の１単語が画面中に収まらなくなったら回りこみが発生するが、 右本文は「ウィンドウの幅 - 100px」を一杯に使用でき、たった 20% ではないためさしたる問題にはならない。
サイズを % 指定したい場合はテーブルを使用せざるを得ないだろう。
| Site admin: PukiWiki Development Team PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 8.2.12. HTML convert time: 1.184 sec. |
|