背景画像を連結して 『角が丸い四角』 を作る
Ｔシャツショップ アルシュのＨＰの構成をこのブログと同じにする事にしました。
まずは、このブログのカレンダーの所のような『角が丸い四角』を再現するために、
『上の画像・中央の画像・下の画像』の３種類の画像を作って、連結してみると、
中央の画像と下の画像は綺麗にくっついたけど、上と中央がくっつかない。
どうしても上の画像と中央の画像の間に数pxの隙間ができてしまう。
詳しいことは分からないけど、どうやら上の画像のheightが小さ過ぎるのが問題みたい。
つまり言い換えると <div class="上の画像のurl">★</div> ★の部分のheightが
"上の画像" のheightより大きくなってしまっているのが原因なんです。解決策として
上の画像のheightのcssの部分に "font-size: 0px;" を加えると綺麗に連結しました。
ちなみに、この隙間はIE6だけで発生し、IE7やFierFoxでは "font-size: 0px;" を
加えなくてもちゃんと連結されました。
以下、覚書。
【３分割した背景画像を連結する】
<!------- html ---------------------------------------------->
<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>
<div class="menu_image_top"></div>
<div class="menu_image_mid"><h3>テスト</h3></div>
<div class="menu_image_bot"></div>
</body>
</html>
<!----------------------------------------------------------->
/******** menu.css ****************************/
.menu_image_top{
background : url(test/top.gif) no-repeat;
height : 15px; ←画像のheightよりも
margin-top : 20px;
padding : 0;
font-size : 0px; ←小さい値にしておけばＯＫ！
}
.menu_image_mid{
background : url(test/mid.gif) repeat-y;
margin : 0;
padding : 0;
}
.menu_image_bot{
background : url(test/bot.gif) no-repeat;
height : 20px;
margin : 0 0 10px 0;
padding : 0;
}
/************************************************/
