<%CollapsedContents()%>

備忘録とかもろもろ

文字選択ができない問題への対応

まみおさんからコメントをいただきまして、とても楽に修正ができたんですが、一応メモ。

2003/12/4書き換えて図を削除。

標準でのレイアウトを図にするとこんな感じ。
標準のレイアウト
全てのレイヤーをposition: absoluteで位置指定しています。
これだとIE6のバグにかかり、文字選択がまともにできなくなります。

なので、こう変更しました。
コンテンツ部分(肌色)を左からマージン指定して、そこに左ペインを重ねて置いているイメージになります。

・・・図にしてみましたがわかりにくい?図が下手ですからねぇ。

具体的にはまみおさんのコメント通りに、
default.cssの
.contents{
position: absolute;
left: 200px;
width: 550px;
}

.contents{
margin-left: 200px;
width: 550px;
}
にしたと。

ただし、これだと画面領域が小さくなったときにコンテンツ部分が小さくなってしまう。
できればメニューとコンテンツは画面領域によって相対的に大きさを変更したいので結局以下のように変更。

.menu {
float: left;
width: 20%;
}
.contents {
float: right;
width: 60%;
}

2003年11月18日 23時59分41秒 藤咲記す - カテゴリ: Nucleus備忘録 - <%Views()%>

TrackBack

トラックバック URI←この記事にトラックバックする際使用してください。
(右クリックからショートカットのコピーを選択)
このエントリにトラックバックはありません

コメント

まみお 記す:

すごく時間が経ってからのレスですが(^_^;
この図だと、margin-left: 200px; じゃなくて、padding-left: 200px; という指定の意味になります。
margin指定だと左ペインは重ならない(というよりコンテンツの空白部分に重なる??)かと。試しにcontentsに背景色を付けてみると違いがわかります。
まーーどっちでもいいんですが。
padding-leftにしたら、contents内のブロックのスタイル指定にmargin-left:-20p;とか、コンテンツブロックをはみ出すマイナス指定ができます。
2003年12月02日 18時00分20秒

藤咲 記す:

うう、そうなんですよね。このあとCSS本を読んでて気がつきました。
おまけに結局は
.menu {
float: left;
width: 20%;
}
.contents {
float: right;
width: 60%;
}
にしているという。ここ書き直すべきなんですけどね…。どうかいたらいいかと悩んだまま放置してまして(^^;
2003年12月02日 21時03分04秒

コメントを書く

この記事を携帯で読む

この記事のQRコード