Archive

メニュー部分によく使うリスト的

そういえばよく使う(ローカルで試す段階で使いつつ結局没になったりする)手法だけれど、自分の中で確立してないっていうか毎回毎回何かしら頭を悩ませているからこの際明記しておくと後で見返せて便利とか思ったり。

わけわかめ width は内容幅

で、a 要素(何でも良いけど)を display: block にしてブロック全体でホヴァーを受けるようにするとします。Gecko は diplay: block だけで十分なのですが、IEだとテキスト部分しかホヴァー対象にならない。(でもホヴァーしたときに背景色だけは正常に変わる。今のこのサイトのスタイルシートだと左側のメニューがこれ)

んで width: 100% とかやればIEでもホヴァー対象がブロック全体に広がるんですけど、width は内容幅なので padding とかを指定してるともちろんハミだします(IEじゃハミださないけど)

というわけで、どうやったら親要素全体に padding(margin) を指定しつつ広げられるかはわからんという感じ。

とりあえず _width: 100% なんていう(IEだと先頭のアンダースコアが無視されるバグ利用)アレな解決方法で放置したのですが、納得いかない。

多分、というかこういう書き出しってことはもう既に自分がどうやっつけたか覚えていないからなのだろうけれども、つい先日作った alternate stylesheet がそんな感じの挙動をしているので多分そんな感じになってるんじゃないんだろうか。と。

検証。

contrast.css の該当部位のソース
#contents-list {
background:#000;
border:none;
border-top:1px solid #000;
border-bottom:1px solid #000;
margin:0;
padding:0;
position:fixed;
right:0;top:80px;
width:200px;
}
#contents-list a {
text-decoration:none;
}
#contents-list a:before {
content:"> ";
}
#contents-list a:link {
border:none;
color:#fff;
}
#contents-list a:visited {
border:none;
color:#ddd;
}
#contents-list li {
color:#fff;
font:100% Arial, sans-serif;
padding:0.3em 0.8em;
}
#contents-list li:hover,
#contents-list li:hover * {
background:#fff;
color:#000;
}

ごめんなさい全然違いました。というか負けず劣らず力技。li:hover とかってことは IE だと何も変化ないのかも知れない。切り捨てまくりだな。

親要素全体に padding(margin) を指定しつつ広げるという挙動が多分今ひとつ想像できてないのでアレですが、前回とか前々回とかタブっぽいメニュー作るときはアンカーに padding 指定するとかそういう力技も使ってたかも知れません(当然 display:block; にしてたりはするけれど)。とここまで書いて思い出して念のため確認してみたら、今インラインのアンカーにも padding 指定してたりしてました。嘘臭いなこれ。text-indent とかでごまかしたりしてるかも知れない。嘘臭いな。年中四月馬鹿男です。はじめまして。

Comments

cho45(砂糖)
  • 2004-04-02T00:10+09:00

意味不明な文章にトラバってくれてありがとうです。
そういえば text-indent と line-height で目的が達成できるような気がしてきました;

イソムラ
  • 2004-04-02T00:38+09:00

メニュー自体が複数行になるとやばめですね<text-indent
line-height でごまかしごまかしもよくやってます。間違いだらけの CSS 使い。

Trackback