CSSテクニックコミュの角丸ボックス

角丸ボックスをつくっているのですが
うまくいきません。
上端　と下端はいいのですがサイドがずれてしまいます。
どうすればうまくつくれるのでしょうか？
urlがhttp://g-space.jp/~lovekuu/kadomaru/　です。
　html css　は下記のように記述しています。
.contentsbox{
background-image: url("top.gif");
padding-top:13px;
width:150px;
background-repeat:no-repeat;
background-position:left-top;
}
.contentbox{
background-image:url(bottom.gif);
padding-bottom:13px;
width:150px;
background-repeat:no-repeat;
background-position:left bottom;
}
.contentbox p{
padding-left:13px;
padding-right:13px;
width:124px;
margin-top:0px;
margin-bottom:0px;
border-right:1px solid #000;
border-left:1px solid #000;
background-repeat: repeat-y;
}
-->

</style>
</head>

<body>
<div class="contentsbox">

<div class="contentbox">
<p>aaa</p>

</div>

</div>

</body>

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 12月13日 20:58

b-style- tkさん、初めまして。
.contentbox pのwidthを2px削ったらうまくいきましたよ。
以下コードです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">


</style>
</head>

<body>
<div class="contentsbox">

<div class="contentbox">
<p>aaa</p>

</div>

</div>

</body>
</html>

[2] mixiユーザー 12月13日 21:05

私も健太さんと同じ方法で解決しました。
あと、bottom.gifの高さが12pxなのでcontentboxのpadding-bottomは12pxにする方が良さそうです。

[3] mixiユーザー 12月13日 21:06

失礼しました。
「健太さん」->「ケンタさん」です。。。

[4] mixiユーザー 12月13日 21:13

画像の高さまでチェックするの忘れてた・・・。
nebaさん補足ありがとうございますm(__)m

「健太」・・・ギクッ(笑)。

[5] mixiユーザー 12月13日 21:26

皆さんご回答有難うございます。
.contentbox pの値を２px 削ったらうまくいきました。
さらにpadding-bottomの値を１２pxにしたらすんなり
きれいにはまりました。
有難うございました。

ログインすると、みんなのコメントがもっと見れるよ