トップページを３段コラムにして、ナビゲーション用のメニューを作りたいと、いろいろ格闘してきたスタイルシート作成であったが、とりあえず、今の段階での完成とすることにした。
いろんなブラウザで試してみた結果、Mac OS XのIE5、Safari 1.0、Windows XPのIE6、Opera7では、問題なく表示されることが確認された。
ただ、NetscapeやMozillaなどは、スタイルシートが全く無視されてしまい、タグのないインデックスページがそのまま表示された感じだった。
どうやっても解決できず、さじを投げた格好になってしまった。
今後の課題である。
３段コラムに関しては、Kaminogoyaさんの「Movable Type 3_column_css」を参考にさせていただきました。
とても詳しい説明で、大変参考になりました。
ありがとうございました。
さて、先述のページをよく読んでみたところ、僕が意図しているページはどうやら「3_column_c_2.css」を使えばうまくいきそうである。しかもこれが最新版のようで、一番バグもない様子。
ただ、僕の場合今のスタイルが気に入っているので、これをそのまま生かして３段コラムにしようと考えた。これが苦労の始まりだった。
ソースを読み比べ、Kaminogoyaさんの用意してくれていた「指定イメージ」を見て、ようやく「id 」で指定した中に「class」で指定したものを、入れ子状態にしていくということが理解できた。
そして、僕のページを３段にするには以下のところに、次のプロパティを書き加えればいいことがわかった。
#content {
float:left;（書き加える）
#links {
float:left;（書き加える）
#linksleft {
float:left;
width: 160px;
}（すべてを書き加える）
幅とかは自分なりに変えて試してみたところ、確かに３段になったのだが、ウインドウ幅が変わると要素が前の要素の下へと回り込んで視界から消えてしまう。「float:left;」を使って回り込み設定しているのが原因のようである。
いろいろ調べてみると、「position」を使って位置を指定すればいけることがわかった。
Kaminogoyaさんは「3_column_A_2.css」などで
#content {
position:relative;
z-index: 3;
#links {
position:absolute;
z-index: 1;
top:50px;
#linksleft {
position:absolute;
z-index: 1;
top:50px;
のように指定していたが（一部略）、これだと「top」で位置を指定しなくてはいけない。
これが、僕の場合は「50px」ではだめでもっと大きい値にしなくてはだめなのだが、いちいち目分量で調節するのもめんどくさい。もっと、かんたんにいかないものか…。
いろいろ試行錯誤して、以下のようにしたらうまくいった。（一部略）
#content {
position:absolute;
left:190px;
width:460px;
margin-right:15px;
margin-left:15px;
}
#links {
position:absolute;
left:675px;
width:160px;
margin-right:15px;
}
#linksleft {
float:left;
width:160px;
margin-left:15px;
}
#contentsでmargin-left:15px;と指定しているのは、そうしないとWinのIE6でうまくマージンが空かないからである。その分、他のブラウザでは広く表示されてしまう。
NetscapeやMozillaで全くうまく表示されないのは、先述の通り。
詳しい方のコメントを切に望んでいる。
Recent comments