作成日誌
スマホ版トップのbodyの大まかなレイアウト完了？。
bodyは大きく分けて、
■本編、
■下部ナビゲーションボタン、
■ナノ広告
..の、3つから成り立ってまして、目障りなナノ広告を最下部に追いやる為にCSS3のposition:;の組み合わせをいろいろ試してみました。
▼大雑把な指定で今後変更するかもですが、記述しておきます。
#nano{position:relative;
bottom:0;
z-index:1 !important;
padding-top:20px;
padding-bottom:100px;
opacity:0.4;
filter:alpha(opacity=40);
}
#bottom_nav{
position:fixed;
font-weight:bold;
bottom:0;
z-index:3;
opacity:0.6;
filter:alpha(opacity=60);
background:#ffffff;
width:100%;}
#body{
position:fixed;
top:0;
z-index:2;
background:#ffffff;
overflow:auto;
width:100%;
height:100%;
}
ナノ広告だけposition:relative;bottom:0;で、本編とナビゲーションをposition:fixed;にする事でイメージ通りに出来ました。
なお、下にあるテキストほど一番表面に表示されるみたいですが一応、z-indexを指定しています。
なお、アンドロイドでテストした結果、Safari以外ではツールバーが隠れる動作が無効になりました。
仕方ありませんネ(^-^;汗..
つづく...