CSS めも。html に width 指定すると。
リキッドデザインでは、気に入らないので、簡単に、横幅固定のソリッドデザインにしようと。ほんで、例えば、以下の様なスタイルシートを現在使っていると。
body {
background-color : white ;
background-image : url(background.png) ;
background-repeat : no-repeat ;
background-position : bottom left ;
background-attachment : fixed ;
color : black ;
}
div.Side-Navigation {
position : absolute ;
top : 120px ;
left : 5% ;
width : 10% ;
}
というスタイルシートに、以下を追加しちゃうだけで、どーにかならないかなーと。
html {
width : 768px ;
margin-left : auto ;
margin-right : auto ;
border-right : 1px solid gray ;
border-left : 1px solid gray ;
background-color : black ;
}
html 要素への指定が無ければ、左下画像付の白背景に黒文字で、左側に div.Side-Navigation が位置するわけ。
body に width 指定すればイイんだけど、まあ、html 要素に指定しちゃう。すると、黒背景に左下画像付の白背景で黒文字になるのかな、問題は div.Side-Navigation の位置かなーと。
- WinIE6
- html 要素に何か指定しても、無視なので、見た目の変化はなし。ソリッドデザインとするのに html の width 指定は使えないってコトだね。
- Firefox
- 横幅 768 px で固定。ウインドウ中心 768px が白背景、外側は黒背景。
- body の background-image の位置は、html の幅に関係なく、ウインドウサイズから計算。通常の位置と変わらずウインドウの左下固定。尤も、768px の画像にして、bottom center とすれば OK かな。
- でも、body からはみ出した部分は、html の背景色（黒）となり、背景画像は見えない。つまり、body の background-image は、ウインドウ中心の 768px の範囲内にある部分だけが見えているということ。
- すごいのは、div.Side-Navigation の位置。ウインドウの端からの計算ぢゃなくて、body 768px の端から計算して配置している。つまり、レイアウトはそのまま、768px のソリッドデザインになると。
- 残念ながら問題もあり。ウインドウサイズを 768px 以下にした場合、横スクロールが出てくれない。つまり、小さい画面だと、右端が切れたまま閲覧不可ということに。
- Safari
- 表示については、Firefox と同じ。レイアウトはそのまま、768px 固定になる。
- ウインドウサイズが 768px より小さい場合も、横スクロールが出るので、閲覧可能。
- Opera
- 予想していた表示。div.Side-Navigation が、ウインドウサイズから計算された位置に配置される。ウインドウの上端から 120px、左端から 5% の位置。
- その他は、Safari と同じ。
body 要素 に width 指定すると、div.Side-Navigation の位置が、上記 Opera と同様になるので、いっそのこと、html 要素に width 指定したらどうなるのかと思ってやってみた。資料は、後で作るかもしれないし、作らないかもしれない。
追記
body 要素に Width 指定するなら、div.Side-Navigation の配置位置指定を left ぢゃなくて、margin-left にすれば、ウインドウ左端からぢゃなくて、body 左端から計算してくれそう。
html {
background-color : black ;
}
body {
width : 768px ;
margin-left : auto ;
margin-right : auto ;
border-right : 1px solid gray ;
border-left : 1px solid gray ;
background-color : white ;
background-image : url(background-768px.png) ;
background-repeat : no-repeat ;
background-position : bottom center ;
background-attachment : fixed ;
color : black ;
}
div.Side-Navigation {
position : absolute ;
top : 120px ;
margin-left : 38px ;
width : 78px ;
}
