くーにーです♪
ようやく！！！！タイトル画像の下にメニューバーをつけることが
できました～（パチパチっと）。
タイトル画像の下にメニューを追加して、
スマール、タイドプール、プロフィールへ飛べるようにしてみました。
マウスオーバーすると、画像の色が変わります。
JavaScriptを使わずにCSSで画像を変える方法は
http://ameblo.jp/tidepool/theme-10008289876.html
↑過去のエントリーを参考にしてくださいね。
そして、今回のメニューバーでちょーーーー手間取ったのが、
IE6とFF（FireFox）で、メニューバーの位置がずれる・・・・・。
どうしょうもなくって、だいぶなやんじゃいました。
その前に、メニューバーを相対的センター位置にもってくるのが
なかなかうまくいかず、悩んじゃいました。
これを解決したのは、上位セレクタに position:relateve; を書くというもの。
#wrap{position:relative;}
↑アメブロの場合ね。
その後、問題のIE6とFFでのtopで指定した位置がズレズレな問題に直面。
ずれる理由はAmebaトップへという行？を、IE6は無視するけれど、
FFの場合はそれを加味してtop:0px; としてもAmebaトップへの下に位置が
きてしまうということ。
これは、どうやっても解消できなかったので、仕方なくCSSハックしました。
IE6だけにCSSを適用させる方法
* html セレクタ{
}
セレクタの前に * html を書くだけで、IE6だけにCSSがかかります。
あ、でも厳密に言うと * html は、IE6とMac IE5.x に適用されます。
本当にIE6だけに適用させたい場合は、
/* \ */
* html セレクタ {
}
と書くそうです。
IE6 IE7 FF Opera Safari GoogeCrome 全部テストしたけど、
ちゃんと表示されたので、今日はここまでとします。
追記：ＩＥ７での表示がおかしかったので、ＩＥ７用にもハックを追加しました。
/* \ */
*:first-child+html セレクタ {
}
と書くそうです。
参考にしたのは、このページです。