既に、このスレッド終わっちゃいましたが、
Hachiも一つ方法を思いつきましたのでもし良かったら使ってくださぃ。
使用するクラスは、
背景以外の全体(#container)とサブタイトル欄(#banner h2)。
#containerの位置を全体的に下げ、
#banner h2の位置を#containerよりも上に持ってくる。
マイナス数値で位置付けてやる無茶なやり方です。
本文自体はサブタイトル欄での調整、
スタイルは全てCSSでのスタイル調整。
ポイントは、
#containerと#banner h2の内外余白調整。
#containerでborderを使用いているなら、#banner h2にも同じくborderを使用する。
その場合、
#containerのborder-top、#banner h2のborder-bottomをnoneか0pxで指定。
#containerとピッタリ位置付けることにヘッダーらしく、よりテンプレと一体化。
語るよりもコード見せたほうが早いですねぇ。
CSSに記述するソース
#container {
width:900px;
background-image: url(
http://puchiofhachi.cocolog-nifty.com/custom/banner.013.jpg); background-repeat: no-repeat;
background-position: left top;
border: solid 1px #ff80c0;
border-bottom: 0px;
margin-top: 70px;
}
#banner h2 {
width:900px;
background-color:#ffffff;
font-size: x-small;
border: solid 1px #ff80c0;
border-bottom: 0px;
margin-top: -100px;
margin-left: -16px;
}
widthは指定しなくても何とかなるけど、念のため。
3カラム(デフォルト)であれば800pxなので修正。2カラムはナンボだろ??w汗 使ったことないからなぁ。。。たぶん、600か700だと思う。
尚、現在、ココログ大変堕ちそうな状況にあり、アップロードする度にエラー出ますので、
marginやpadding修正諦めました。なので、数値は暫定??仮ですので、ご自分のスタイルに変更してあげてください。
こんな感じでやってみてください。
質問ありましたら、HachiのBlogでどうぞ。
また、Hachiが前日書いた記事”フッターの作成(2)”も合わせて読んで頂けると理解できると思います。
使用するクラスが、div#footerから#banner h2になっただけなので。
フッターの作成(2)
http://puchiofhachi.cocolog-nifty.com/blog/2007/01/2_2600.html---
Hachi
http://puchiofhachi.cocolog-nifty.com