CSSテクニックコミュのサイドメニューについて

はじめまして。
ここは初心者用の質問板などは無いのでしょうか？
見当たらなかったので新規で立てさせていただきます。

http://chucuitozakka.com/
ここのサイトのようなサイドメニューをCSSで実現したいのですが、いまいち思うように行きません。

今自分が作っているやり方ではリンクがかかるのはテキストの部分だけなのですが、
ボックス全体にリンクがかかるようにしたいのです。

下に現状のCSSを書いておきます。
<div class="leftmenu"></div>
の中にulやliを入れている形です。

どうやらdivのwidthを抜けば出来るようなんですが、
それだとテーブルに入れてしまわないと左に納まらなくなります。
上に挙げたリンク先ではテーブルを使っているようですが、
出来ればテーブルや画像を使わずにテキストとCSSで実現できればと思っているのですが、
よい方法があれば教えて頂けるとうれしいです。
よろしくお願いします。

.leftmenu {
width:160px;
margin: 1px 0px 0px;
font-weight: bold;
}
ul.leftlist {
margin: 0px;
padding: 0px;
}
li.cate2 {
list-style-type: none;
font-size: 80%;
color: #333333;
background-image:none;
margin: 0px;
padding: 0px;
}
.cate2 a:link {
color: #666666;
text-decoration: none;
background-color: #F3EAC3;
}
.cate2 a:visited {
color: #666666;
text-decoration: none;
background-color: #F3EAC3;
}
.cate2 a:hover {
color: #FFFFFF;
background-color: #7C5644;
background-image: url(img/allow2.gif);
background-position: 12px 8px;
}
.cate2 a {
display:block;
padding:4px 0px 4px 25px;
background-image: url(img/allow.gif);
background-repeat: no-repeat;
background-position: 12px 8px;
margin: 0px;
}

コメント(11)

最初
全て
最新の40件

[1] mixiユーザー 07月31日 01:11

上のメニュー、float:left;を入れ忘れてました…。

そしてすみません、追記で質問です。
今気づいたのですが、この方法だとコンテンツの内容がサイドメニューよりも長くなったら
サイドの背景色が途中で途切れて醜くなってしまうと思うのですが、
コンテンツが長くなってもフッターまでサイドメニューの背景色を続けさせる方法はありますか？
よろしくお願いします。

[3] mixiユーザー 07月31日 02:35

ざーっと読んだだけなので
間違ってたらすみません。

.cate2 a
に必要な分のwidthとheightを指定すればいきませんか？

背景は左と真ん中と右のdivをかこってる外側のdiv（あれば）に
はっつけた画像みたいな背景指定してrepeat-yしてあげればいいかと。

[5] mixiユーザー 07月31日 03:16

> マッハパンチ 2.0さん

回答ありがとうございます。
仰るとおり、aにwidthを入れれば実現出来ました。
こんなに簡単な事だったんですね。

しかし、それをするとIEで見た場合に何故かliごとの間に1pxのスキマが空いてしまうようになりました。
しかもマウスを乗せたり外したりするたびに砂時計が表示されてしまって、使用には少しストレスがかかるようになりました。
Firefoxでは何の問題も無いんですがね…。

背景に関しては今回は固定レイアウトなのでそれで大丈夫だと思います。
ありがとうございます。

そのやり方はちょっと目からウロコ的な考え方だったんですが、
この場合はその方法が一番スマートなんでしょうか？

確かに固定レイアウト以外は使えないかも知れないし…
みちさんの仰っているサイトも探してみて勉強しようと思います。

上記の砂時計の事など、他に何か助言があれば頂けると幸いです。

[8] mixiユーザー 07月31日 03:56

砂時計はよくわかりません。
こちらはIE5.5～7まで砂時計でないので（汗

1pxの隙間はliに
vertical-align: bottom;　かtop
を指定してあげればなくなると思います。
これが正解かどうかはわかりませんが。。

背景はこういう固定レイアウトでだったらこれが1番簡単かなーと
個人的に思ってたんですけどどうなんでしょうね？

Javascript使ってもいいよー
ってんなら
http://blog.webcreativepark.net/2007/07/26-010338.html
こんなのがあるみたいです。
まだ使ったことないですけど。

困ったらその状況をGoogleで検索するとけっこう出ますんで
試してみてください。
「li IE 隙間」

と検索するとこんな感じですね。
http://www.google.co.jp/search?q=li+IE+%E9%9A%99%E9%96%93&

[9] mixiユーザー 07月31日 04:08

> taiheyさん

重ね重ねありがとうございます。

砂時計は出ませんか…。
私の環境(IE6.0)では結構砂時計が出てどうしようもないんですが、
こっちの別の場所の記述が何か悪さをしてるかもしれませんので、
何とか自力で頑張ってみます。

背景はやはりこの方法がポピュラーなんですね。
今回はCSSベースで作るつもりでしたので、
javascriptよりも教えていただいた方法を使おうと思います。

リストの隙間は割と有名なバグだったんですね。
まさか検索で引っかかるとは思わなくて…。
line-heightでもなんとかなるようで、勉強になりました。

ありがとうございました。

[11] mixiユーザー 07月31日 21:58

なるほど、やはり少々無理やりな手なのですね。

砂時計についてですが、今日別の環境で同じブラウザで見たところ何の問題も無かったので、
私のPCの問題だと思われます。
ご心配をおかけいたしました。

ログインすると、みんなのコメントがもっと見れるよ