昨日の続き。
以下の点を改良してみた。(概要は、昨日のエントリの最後に書いたとおり)
・二重に角丸ブロックを使わないようにした。中身を2か所に同じものを設定しなくてよくなった。
・外の<div>タグだけwidthを設定すれば、他のタグにwidthを固定長を設定しなくてもよい。
#2008/2/11追記:ここにモノを置いてみた。
#ちなみに昨日使った角丸ブロックはNifty Cornersというらしい。
スタイルシートファイル"angleCircle2.css"
div#contener2
{
position: relative;
}
div#text-sample2
{
position:relative;
top: 0;
left: 0;
width: 306px;
z-index: 1;
background: gold;
}
#text-sample2 div.rtop, #text-sample2 div.rbottom
{
position:relative;
}
#text-sample2 div.rtop-inner
{
position: absolute;
width:100%;
display: block;
background: black;
z-index: 1;
margin-top:3px;
}
#text-sample2 div.rbottom-inner
{
position: absolute;
width:100%;
display: block;
background: black;
z-index: 1;
}
#text-sample2 div.rtop-inner span, #text-sample2 div.rbottom-inner span
{
display: block;
height: 1px;
overflow: hidden;
background: white;
z-index: 2;
}
#text-sample2 div.rtop-outer
{
position: absolute;
width:100%;
display: block;
background: gold;
}
#text-sample2 div.rbottom-outer
{
position: absolute;
width:100%;
display: block;
background: gold;
margin-top:3px;
}
#text-sample2 div.rtop-outer span, #text-sample2 div.rbottom-outer span
{
display: block;
height: 1px;
overflow: hidden;
background: black;
}
#text-sample2 span.r1
{
margin: 0px 6px;
}
#text-sample2 span.r2
{
margin: 0px 4px;
}
#text-sample2 span.r3
{
margin: 0px 3px;
}
#text-sample2 span.r4
{
margin: 0px 1px;
height: 2px;
}
#text-sample2 div.rcontent
{
position: static;
padding: 5px;
margin: 5px 0px 0px 0px;
color: black;
background-color: white;
border-style:solid;
border-color:black;
border-width:0px 3px 0px 3px;
}
#text-sample2 p
{
margin: 0px;
}
htmlファイル"angleCircle2.html"
<html>
<head>
<link rel="stylesheet" href="angleCircle2.css" type="text/css" title="Default">
</head>
<body style="background-color: Gold">
<p>test</p>
<div id="contener2">
<div id="text-sample2">
<!-- フタ -->
<div class="rtop">
<div class="rtop-outer">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<div class="rtop-inner">
<span class="r1"></span><span class="r2"></span><span class="r3"></span>
</div>
</div>
<!-- 中身 -->
<div class="rcontent"><p>テストテストテストテストテストテストテストテストテストテスト</p>
</div>
<!-- 底 -->
<div class="rbottom">
<div class="rbottom-inner">
<span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
<div class="rbottom-outer">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>
</div>
</div>
</body>
</html>
まだ、なんか歪だし、CSSがおかしいのか思った通りにならないところがある。もうチョイ改良方法を考えてみるつもり。
#2008/2/6追記:IE7、opera9.25、FireFox2ではちゃんと表示されたが、IE6ではずれが生じた。何でかわからん。だれか助けて。
最近のコメント