- 2009年6月23日 13:52
- HTML＋CSS
もう2年くらい前？にとあるサイトのコーディングをしなきゃならなくて、それが右のサイドナビゲーションにfixedをつかった2カラムレイアウトだった。
当時、fixedがIEにはそのままじゃ効かない！って事を知ってる程度だった私は勿論、position: fixed;なんて使った事がなかった。
「私になんて無理だよー！！」って思いつつも「挑戦してみたい」ってキモチが高くて、躍起になって頑張った記憶があります。。。なつかしい。
ということで、続きから覚え書きとサンプルコード。
このframeをつかってやればいいじゃない！と言わんばかりのこのレイアウト。
でも何の意地か、frameだけは使いたくなかった。なんとなくだけど。
というか、webの学校に入るまでは自分は紙の仕事をしたいと思っていたし、正直webには然程興味がなかった。多分間違って学校入学しちゃったんだと思う。
当時の私と言えば、ウッカリ「ソースコードを表示」を押してしまって、画面いっぱいのソースコードが出たときは「ウイルスだぁぁああ！！！」と叫んだりした事もあった。
そんな状態からwu先生にHTMLの基礎を教わった私は、勿論"frame"も"tableレイアウト"も知らなかった。なにそれおいしいの？状態ってやつです。
前置きが長くなったけど、どのみちframeを使えなかったし、意地でもやりたくなかった。
苦肉の策でIE用のCSSとか使ってるけど。
詳しくはサンプルページのHTML内にCSSがぶっ込んであるのでそちらご参照くだせえ。
#main{
width:420px;
margin-left: 30px;
}
#side{
position: fixed;
top: 0px;
left: 460px;
width:330px;
height: 100%;
}
.bottom{
position: absolute;
bottom: 0;
}
body{
background: url(null) fixed;
height: 100%;
}
#sideの中にある.bottomをposition: absolute;で下合わせにして、#sideの領域を常に下まで延ばしています。
それで、IE7でうまく動く様にコイツをいれました。
<!--[if lt IE 7]>
<style type="text/css">
#side{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
left: 460px;
}
body {
background: url(null) fixed;
}
</style>
<![endif]-->
そんなかんじで、こんな感じです。
- Newer: CSSを使ったonMouseの画像きりかえとか
- Older: うだうだしてたので
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://www.volute.org/mt/mt-tb.cgi/2
- Listed below are links to weblogs that reference
- fixedをつかった2カラムレイアウトとの戦い from volute.org