CSS表セルレイアウトの角を丸くしましたか？

Question

私のデザインには助けが必要です。

+------+ +------+ +------+ 
|  | |  | |  | 
|  | |  | |  | 
|  | |  | |  | 
+------+ +------+ +------+ 

私もan example online (with all the CSS)を持っている：私はこのASCIの芸術のように、お互いに次の3つの同じ高さの ボックスを表示します。

ボックスの内容は高さが異なります。難しいことは、 これらのボックスも角を丸くする必要があるということです。そのために私は 「スライドドア」技術を使用しています。私は 背景画像と丸みを帯びた角との境界線を作ることができるように

<div class="box"> 
    <div class="box-header"> 
    <h4>header</h4> 
    </div> 
    <div class="box-body"> 
    <p>Contents</p> 
    </div> 
</div> 

四のブロック要素：基本的には、ボックスのマークアップは次のようなもの です。右上隅がh4になります。左上の の角がボックスヘッダーになります。右下隅は box divになり、左下隅はボックス本体に移動します。

私はCSSディスプレイを使用しています：table-cellは、すべての3つのボックスを同じ高さにしますが、ここで問題が始まります。すべてのボックス要素は今度は の等しい高さですが、 の内容が同じ高さではないため、ボックス本体要素の高さが同じではありません。結果：右下隅の が正しい位置にありません。私が掲示したリンクも見てください。

どうすれば修正できますか？すべてのボックスdivの高さは同じです。 コンテンツが短い場合でも、利用可能なすべての高さを使用するように拡張するボックス本体のように私は でしょう。私は高さを試しました：100％しかし、それは動作しません。どのように私は その仕事をすることができますか？

または、私が望むものを達成するための代替方法がありますか？私は のボックスの幅を定義しているので、 のようなものをfaux-columnsのように使用することはできません。つまり、box divに単一の背景イメージを与えることはできません。つまり、 は両方の下部コーナーを提供します。

ここではGoogleは絶対に役に立たない。 "コーナー" と "テーブル"を含むクエリは、 丸いコーナーの3x3テーブルを使用する1990年のチュートリアルへの巨大なリンクを提供します。

ブラウザの互換性については、IE7/8でも対処できればいいですが、それは必須ではありません（この場合は、不等号の浮動小数点数に置き換えることができます）。私が開発しているウェブサイトでは、IEの市場シェアは20％以下と推定されます。私はIE6はまったく気にしません。

どのようなヒントも大歓迎です！

Answer 1

上記の私のコメントによると、私は問題を解決するためにCSS3 border-radiusを使用することに決めました。以下のステートメントを使用すると、Internet Explorerを除くすべてのブラウザで丸い枠線が表示されます。私はIEについてはあまり気にしないので、IEユーザーはまっすぐなコーナーを見ることができます。

.box { 
    display: table-cell; 
    width: 16em; 
    padding: 1em 2em; 
    background: #f6c75d url(gradient.png) repeat-x scroll top left; 
    border: 3px solid #de9542; 
    border-radius: 25px; /* Standard */ 
    -o-border-radius: 25px; /* Opera 10.x */ 
    -moz-border-radius: 25px; /* Mozilla/Firefox */ 
    -icab-border-radius: 25px; /* iCab */ 
    -khtml-border-radius: 25px; /* KHTML/Konqueror */ 
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */ 
} 

上記のgradient.pngは、ボックスの上部にグラデーションを提供する小さなタイル可能な画像です。

これは完全に機能します。また、マークアップとCSSが簡素化され、必要な背景イメージの量とサイズが削減されます。

Answer 2

余分なマークアップを追加しても問題がなければ、この効果を達成できます。もちろん、私は実際にコードの肥大を主張していませんが、もしそれを完了させなければならない場合は、ボックスを二重ラップし、下隅をそれぞれのラッパーの一つに置くことができます。内側のラッパーの高さをdisplay: table-cellと設定すると、金色になります。

Answer 3

ボックスボディエレメントにmin-heightプロパティを使用できますか？

Answer 4

ボックス本体をディスプレイに設定してみます：テーブルセル？それは3つの箱体を同じ高さにし、丸められたボーダーを底に強制的に押し付けさせるかもしれません。

Answer 5

Safari、FirefoxおよびChromeで動作する解決策があります。 IEでは動作しません。Opera（私がテストした限り - 10.0bでは動作しません）。 CSS3のプロパティborder-imageを使用します。それはまだ草案ではなく、勧告を作業に含まれる特徴されると、ブラウザはその特定の接頭辞とそれを実装します。

それを使用して

#boxes { 
    display: table; 
    border-spacing: 1em; 
} 
.box-row { display: table-row; } 
.box { 
    width: 16em; 
    display: table-cell; 
    padding-right: 2em; 
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine 
    -o-border-image: url(box.png) 6 8 6 8 stretch; 
    -khtml-border-image: url(box.png) 6 8 6 8 stretch; 
    -icab-border-image: url(box.png) 6 8 6 8 stretch; 
    -webkit-border-image: url(box.png) 6 8 6 8 stretch; 
} 

は実際に背景画像を再作成する必要がありますが、それは詳細です。

Answer 6

私はこれがあなたに届くことを望みます（私はこれらの掲示板を公開しています） グラフィックデザイナーとして、HTMLの "squarness"は恐ろしいものです。 これは単純なグラフィックソリューションであるため、これは実際にはHTMLやCSSの修正ではないことは知っています。 しかし、それはうまく動作し、それは単純なgif画像であるため、ブラウザ間では失敗しません。 試行錯誤のために時間がかかることがあります。セル内のコンテンツの量を変更すると、丸い四角形の背景として使用するイメージを変更する必要が生じる場合があります。

ので、その警告で...

はピクセル単位で、テキストを追加し、細胞を測定する、または画像のみあれば画像サイズを見て、あなたが必要とする表のセルのサイズをワークアウト。

グラフィックスプログラムでは、任意の色の矩形を作成します（たとえば、Webサイトに白いテキストがある場合は黒色など） この矩形は最下層です。

丸い矩形を作成します。たとえば、1ピクセルの線の太さと塗りつぶしのない色（線の色は、厚さ..のように選択した色です）を作成します。 これから持っていくのは、角の丸い細い輪郭の単色の四角です。

丸めた未塗りの矩形を10ピクセル小さく（x-y）作成し、正方形の上に等距離に配置することができます。

このイメージをエクスポート、たとえばGIFまたはJPEGとしてエクスポートします。

あなたのウェブサイトでは、ページ上で丸みのある矩形を入れるテーブルセルをクリックし、そのセルの背景画像として設定します。 セルがイメージと同じサイズであること、またはセルがフィットしない、またはタイルに収まらないことを確認してください。 次に、セルの背景要素であるため、セルに挿入したコンテンツ、テキストまたはイメージがあなたがROUNDEDテーブルセルを持っているように見えるようにします。

ネイティブイメージを透明性を持つgifとしてエクスポートすることで、背景イメージを透明にしたい場合は、もっと多くの色を持つAlhpa透明度のPNGを使用できますが、PNGの完全なブラウザサポートはあまりわかりません 基本的なベタの背景色を選択して、「黒」と言い、それを透明な色として追加するだけです。

ページ全体でCSSを使用して背景画像を使用している場合は透過性が必要な場合がありますが、使用中の画像によってはテキストの読み込みが困難になることがあります。

私はこれが助けになることを望みます。