ナビゲーションメニューをずっと続けたい時に

まずはこちらをご覧になって欲しい。


float の問題を overflow で解決


Lucky bag::blogさんが何でこんなことを考えているのかというと、CSSで内包するdivなどにfloatを使った時には、それらを囲むdivの背景が消えてしまうからだ。
で、ここからが私の卑怯な方法。


その昔、ナビゲーションメニューの背景色が、フッタまで続いていくデザイン(見た目)が流行った。図を参照。今でももしかしたら主流なのかも知れなく、営業側からは「途中で切れないでさー」と要求されることが多い。その度にテーブルレイアウトに戻ることになり、「嫌だなー」と泣く泣く作業していた。



上記のLucky bag::blogさんは、コンテント部分(コンテナ部分)の背景色がナビゲーションの背景色に侵食されないように工夫されているわけだが、これをこのまま採用すると、コンテント部分がナビゲーション部分よりも短い場合、コンテント部分の下部にコンテナー部分の背景色が回り込んでしまうという事がおきてしまう。元々作成の目的が違うのだから当たり前だ。
で、卑怯な方法をとってみる。これで思いついた。ナビゲーションの背景色がずーっと、フッタまで続いていくデザインができる。
つまり、コンテナの背景を画像にしてしまった。


#container{
width: 750px;
overflow: auto;
background: url('/images/aaa.gif') top left repeat-y;
}

#content{
width: 585px;
background: #FFF;
float: left;
}

#navigation{
width: 165px;
float: left;
background: #999;
}


こんな感じ。HTML作成に慣れている方は自然に分かると思うが、
containerの中に、contentとnavigationがある。
名前の付け方は自由だけど。
これで内包するdivの背景色にも侵食されず、かつずっと続いていく。