2009.03.16

プルダウンメニュー覚え書き

さわやかまみれのメニューにGood sleepさんのドロップダウンメニューを使わせていただきました。
JavaScriptの知識が皆無なもので、ダウンロードデータがとてもありがたかったです。
cssの知識も薄いのでなんでそうなるか判らんのですが、liのa内の画像の高さを15pxにしたら上に隙間が空いてしまいました。サンプルと同じ20px にするとピタリとならぶのですが。
うーむと考え、aに対してheightを実数指定。
おお、サブメニュー(プルダウンで出てくる方)の隙間は無くなった。おほほ。
しかし、上のdivにピタリと付けたいのに、メインメニューの上の隙間は消えぬ。
そういえば、li要素ってline-heightを持ってるんじゃなかろうかと line-height:0 にしたら隙間消えました。
「リストタグでメニューを並べると隙間が出来る」ってやつでした。
もしかしたら、imgにvertical-align:bottomもいるかもしれない。あとで入れよう。
サンプルはカテゴリが3つ横並びにフロートされてます。
でも、さわやかまみれはコンテンツがそんなに無いので、ulのfloatを削除したんだった。
関係ないか…
やったこと。
*a に対して高さを入れる。
*liのline-heightを0にする。
*imgにvertical-align:bottom
てか、思い出したんだけど、IEで</a>とか</li>とかの直後に改行とかインデントとか入れると隙間ができるのではなかっただろうか…IE6以前の皆さんすみません。
そして、ブログ内にタグをそのまま書く方法がわからない(´Д`;
いちいちSGMLとかの実体なんとやらとかいうので表記しなければならないとか…?

コメントをどうぞ



PageTop