2007/11/15 木曜日

マウスを乗せると上からニョキっと生えてくるメニュー

Filed under: css, JavaScript — admin @ 11:39:12

結構使ってる人多いですよね。
こちらの人はかっこよく使ってます。
半透明が売りみたいですがデフォルトはちょっと微妙なので、
IE向けにpng対応したり、デザイン変えたり、mouseout時にイベントを起こすようにしたりと
カスタマイズして使いましょう。

マウスを乗せると上からニョキっと生えてくるメニュー

でも実はこのメニューで使われてるトゥーインのJavaScriptライブラリの方が気になったり。加速度的に通り過ぎて戻ってくるあたりの動きがとても参考になります。

No Tags

GIMPで指定した領域以外を伸縮する

Filed under: GIMP — admin @ 11:38:24

[修正]GIMP Liquid rescaleプラグイン(液体のような縮小)*ホームページを作る人のネタ帳

No Tags

スクロールバーの有無によるセンタリングのずれを解消するには

Filed under: css — admin @ 11:24:18

IEでは右端のスクロールバーが常に表示されているのに対して、FireFoxではコンテンツが少ないと
スクロールバーがなくなってしまう。そうするとコンテンツをセンタリングさせた時などにずれる。

で、最終的にIEでもOperaでもFireFoxでもずれをなくす方法はコレ。
※ 但し、最下部にフッター固定のテクニックを使っている人は使用に際して注意されたし。

html   {
   height:100%;
   margin-bottom:1px;
}

基本的な考え方
とりあえずFireFoxで常にスクロールバーを出すには

html{overflow-y:scroll;}

と指定してあげればいい。
bodyに適用するとIE6と7で二重にスクロールバーができてしまうので
htmlに適用しているのがポイントです。

ところが、これだとOperaには対応していない。
overflow-yは元々はIE独自でcss3になった経緯があり、FireFoxは対応しているがOperaでは対応していない。そこでOperaにも対応するには別のソリューションが必要になる。

それがこちら、コンテンツが100%のところにさらに1px追加して常にコンテンツを溢れさせることにより
スクロールバーを出させるというわけね。

html   {
   height:100%;
   margin-bottom:1px;
}

■ 参考リンク
FireFoxのスクロールバー分のズレをとるCSS
スクロールバーの有無によるセンタリングのずれを解消するには - Emotional Web

No Tags