梅ヶ枝: 2004年1月

入力欄が隠れてしまいます

昨日書いた「横スクロールバーが出ないレイアウトを目指して」にいただいたtsupoさんのコメントを読んで、IE6だとコメント本文入力欄に問題が出ることに気づきました。

ココログのデフォルトテンプレートだと枠の右端が切れて見えなくなっています。それでも文字だけはぎりぎり読めます。

昨日テストした伸び縮みするスタイルシートは#centerからはみ出たものは表示しないように設定していました。入力欄には何も設定しなかったので一部見えなくてもしかたがないことでした。でもデフォルトのスタイルシートのようにwidthを80%にしてもIE6ではやっぱり右側がはみ出ることがあるのですね。

窓が大きい時はいいのですが、小さくすると入力欄が完全にはみ出します。↑↓←→キーで移動すれば見えないことはありませんがすごく読みにくい。Opera6では指定通り幅が80%に縮むんですが多数派IEで読めないのではねえ。何かいい設定方法はないでしょうか？

昨日のサンプルのうち2つだけtextareaの設定を追加しました。

大枠のレイアウト4～floatで幅の合計96％、padding 0px～: スタイルシートでtextareaのwidthを80%にしています。窓サイズ800*600では右側の文字が読めなくなっています。
大枠のレイアウト8～positionで上にずらす、padding 0px～: スタイルシートでtextareaのwidthを80%、hmlの方でtextareaのcolsを40に変えています。窓サイズ800*600では全部見えますが「お気に入り」を表示していると右側の文字が読めなくなります。; ※colsを変更するのは本来ココログのシステム側で変えてもらわないと出来ないことですがこれはテストなので。

※追記

2009/12/11: サンプルページをniftyの@homepageからココログへ移しました。

JUMA on 2004/01/27 ウェブログ・ココログ関連 | 固定リンク | コメント (0) | トラックバック (0)
Tweet

横スクロールバーが出ないレイアウトを目指して

ココログ用のスタイルシートを作るとしたら横幅800ピクセルに固定ではなくて、窓の大きさに合わせて伸び縮みするレイアウトにしたいと思っています。「両サイドバー付き」でそれが実用になるかどうか試してみました。

プロフィールのページは作っていません。固定リンクのページだけです。

レイアウトだけ見るために文字サイズや書体などの指定は省いています。bodyに全体共通の文字色・背景色、リンクの色、ブロック要素divに共通のmargin、padding、borderを指定しました。またdivのうちid container、id banner、id left、id right、class sidebar、id center、class contentに背景色を指定して配置を見やすくしました。

大枠のレイアウト1～padding 8px～: 普通に縦に並んだ状態。
大枠のレイアウト2～floatで幅の合計100％、padding 8px～: #left、#right、#centerをfloatで横に並べる。横幅の指定は%。合計100%にすると#rightが収まり切らず一番下へ行く。
大枠のレイアウト3～floatで幅の合計100％、padding 0px～: paddingを0にして節約しても#rightが収まり切らず一番下へ行く。
大枠のレイアウト4～floatで幅の合計96％、padding 0px～: さらに横幅の合計を96%にすると横に3つ並んだ。
大枠のレイアウト5～positionで幅の合計100％、padding 8px～: #left、#right、#centerをpositionで横に並べる。横幅の合計が100%でも横に3つ並んだ。しかし#containerの枠からはみ出してしまった。
大枠のレイアウト6～positionで幅の合計100％、padding 0px～: paddingを0にした。#containerにもpositionを指定した。Opera6で見ると横幅は一応#container内に収まった。IE6は右側がはみ出した。縦方向はどちらで見てもはみ出したまま。そしてIE6で縦スクロールバーが動かない！　
大枠のレイアウト7～positionでサイドバー右寄せ、padding 0px～: #containerのheightを指定した。縦スクロールバーが戻って来た。相変わらず#containerから縦にはみ出している。
大枠のレイアウト8～positionで上にずらす、padding 0px～: デフォルトテンプレートの「春」を参考に#centerのposition指定をやめた。全体が#container内に収まるようになった。#rightにtopを指定しないと#centerの下端の右下に行ってしまう。でも#bannerの高さは決まっていないので#rightのtopは0pxにでもしない限り中途半端な位置になる。とりあえず#bannerのmarginとwidthを指定して左脇に寄せた。