WordPressのheader画像下の空白で苦しむ

wordpressでブログを作り始めたのですが、最初はもう全然何がなんだかさっぱりだった為、wordpressレッスンブックで一からテーマを作る事に。

もともとhtml、css、phpはかじってたので結構楽しんで作る事ができました。

しかし、最後の方でナビゲーションバーを設置する際にどうがんばってもヘッダーイメージの下に空白ができてしまうというアクシデントに悩まされました。

レッスンブックと違うcssの書き方をしたか? と思い、headerのdivのスタイルを見つめたり、下のnavのスタイルを見たり、あらゆる場所のmarginやpaddingを変えたりと、、

これだけで小一時間悩んだのですが、結局ぐぐりまくってると画像のスタイルのせいだった事に気づきました。
どうもhtmlの宣言や、ブラウザによっても挙動が異なるそうですが、基本的に画像ファイルはテキストのラインと高低差が生じるようです。ぐぐって調べてみると結構常識らしいっすね!(笑

なので、画像のスタイルに以下をマークアップしました。

vertical-align:bottom; で、テキストの底面に位置をフィックスします。

ちなみに、これを解決しようとああだこうだやっている間、ずっと家の前で小学生がキャーキャー騒いで野球やってたのでぐったりです。
おわり。

2012-07-22 | Posted in Word PressNo Comments » 


関連記事

Comment





Comment



*