WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テキストの背景を丸枠にする方法

0:[投稿] ひろ [MAIL] [URL] [2002/04/17 14:23 ][環境:WIN+IE 不明]

テキストの背景を丸枠にする方法はテーブルを使えば次のようにできるようですが、テーブルを使わずCSSのみではできないでしょうか?
floatなどを使ったらできそうな気がしたのですが、うまくいきませんでした。

*** テーブルを使ったサンプル ***

※lt.pngなど円を1/4にスライスした透過画像です。

.bg { background: lime }

   ......

<table border="0" cellpadding="0" cellspacing="0">

<tr><td><img src="lt.png" width="8" height="8" alt="web design"></td>
<td class="bg"></td>
<td><img src="rt.png" width="8" height="8" alt="web design"></td>
</tr>

<tr><td class="bg"></td>
<td class="bg">ここにテキストを書きます。<br>
ここにテキストを書きます。</td>
<td class="bg"></td></tr>

<tr>
<td><img src="lb.png" width="8" height="8" alt="web design"></td>
<td class="bg"></td>
<td><img src="rb.png" width="8" height="8" alt="web design"></td>
</tr>

</table>


1:[回答] 通りすがったひと。 [2002/04/17 15:03 ]

CSS3 の草案では、border-radius というプロパティがあります。

 CSS3 module: the box model
  http://www.w3.org/TR/2001/WD-css3-box-20010726/#border-radius-topright

現状の CSS2 では、横幅を固定にしないと無理っぽいです。
左上、左下(右上、右下)だったら、固定幅にしなくてもできます。


2:[回答] kougamiteru [2002/04/18 10:15 ]

通りすがりました。
table class="bg"
でいいのでは?
失礼しました。


3:[回答] ひろ [MAIL] [URL] [2002/04/18 12:13 ]

ありがとうございます。

>table class="bg"
>でいいのでは?

これでは画像の背景色もlimeになってしまうのでこの件では違います。

>左上、左下(右上、右下)だったら、固定幅にしなくてもできます。

左側と右側の2つの画像を使うと言うことでしょうか?。確かにうまくいくようですがテキストの量が限られてしまいます。

CSS2では横幅を固定すればなんとかできました。(下記)ただしMozillaのみしか実現できませんでした。

いずれにしてもIE5.5ではだめなのでしょうか?
フロートとフロートの間になぜか意味不明の隙間が空いてしまいます。heightの小さな値も解釈してくれません。ボックスの幅に元々バグがあるし…。やっぱりCSS2では無理なのでしょうか。

<style type="text/css">
<!--
body {
    background:white;
}
div.waku {
    width:316px;
}
img.corner {
    float:left;
}
div.text {
    clear:both;
    background: lime;
    width:300px;
    padding:0 8px;
}
div.dummy {
    background:lime;
    width:300px;
    height:8px;float:left;
}
-->
</style>
</head>
<body>
<div class="waku">
<img src="lt.png" width="8" height="8" alt="web design" class="corner"><div class="dummy"></div>
<img src="rt.png" width="8" height="8" alt="web design" class="corner"></div>

<div class="tex">ここにテキストを書きます。<br>
ここにテキストを書きます。</div>

<div class="waku">
<img src="lb.png" width="8" height="8" alt="web design" class="corner"><div class="dummy"></div><img src="rb.png" width="8" height="8" alt="web design" class="corner"></div>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World