2008年12月13日土曜日

やっとこさ

長いこと悩んでいた「背景画像が伸びない」という現象が解消された~
あーよかったよかった。

これで本文をガツガツ制作できるっ
つか課題提出は明日なんですが…。。(間に合うか!?)

でもこれがホントやり方としてはベストなのか分からないなあ。
のちのちもっとイイ方法が出てくるかもしれないので
今の方法を書いておきましょう。

●背景画像が周りにあわせて伸び縮みしない

*/親要素*/
#contents {
width:800px;
overflow:hidden;*/overflowはIEではスクロールバーが表示されてしまう*/
}

*/親要素に対して以下の指令を記述*/
#contents:after {
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}

*/子要素*/
#main {
width:500px;
float:left;
background:url(画像) repeat-y center;
padding-bottom:32768px;
margin-bottom:-32768px;
}
と、することによって親要素に入っている子要素のdivのbackgroundが伸びた。
padding-bottomとmargin-bottomに32768pxの値を入れるってのがちょっと不安。。。
どっかのブラウザでバグってそーだなあ。
IE6は対象ブラウザにしてないけど、ちょっと見てみよう。

ひとまず今回のサイトではこれで問題解決した★

0 件のコメント: