掲示板/HTML質問板/過去ログ/一覧/ 画像にテキストボックスを重ねて表示

0 名前： ショコラ ： 2006/08/08（火） 00:06 ID:fJEXEceV: 画像の上にテキストボックスを重ねたいのですが、どうしたらよいでしょか？？
その画像を背景にしてしまうと画面全体に敷きつめられてしまうので困ります。

タイトル、説明などの部分は白背景で、その下に画像を表示して、
画像上の一画に小さなテキストボックスを置きたいのです。

わかる方、どうぞよろしくお願いします。

1 名前：匿名： 2006/08/08（火） 00:06 ID:Bva3gnUd: テーブルやボックスの中にテキストボックスを置いて
テーブルやボックスの背景をその画像にして
テーブルやボックスのサイズを絵と同じにすればいけそうです

2 名前：匿名： 2006/08/08（火） 00:06 ID:0yJG31Zh

<html>
<head>
<style type="text/css">

.box   　　　{
　　　　　　　background:url("背景に画像.gif") no-repeat;
　　　　　　　}

.mini_box   　{
　　　　　　　border:solid 1px #000000;
　　　　　　　background-color:#ffffff;　
　　　　　　　}
</style>
</head>

<body>
<p>
説明文
</p>
<div class="box">
<div class="mini_box">
ボックス（背景白）
</div>
背景に画像
</div>
</body>
</html>

基本的には、上記で出来そうです。

場合によっては、<TABLE>を利用するほうが
よいかもしれませんが・・・

3 名前： ショコラ ： 2006/08/08（火） 00:06 ID:fJEXEceV: すみません・・・
２番目のやり方でできませんでした･･･
ちなみにヤフージオシティーズでＨＰの編集はしています。

１番目のやり方はよくわかりません＞＜

4 名前：匿名： 2006/08/08（火） 00:06 ID:0yJG31Zh

私のテストでは、出来たのですが？
no-repeatは、背景画像のサイズや
ショコラさんの表示したいイメージ
によっては必要ないかもしれません。

１番目のやり方は、下記の事だと思います。

<html>
<head>
<style type="text/css">

td     　　　{
　　　　　　　background:url("images/bg031.gif");
　　　　　　　}

.mini_box   　{
　　　　　　　border:solid 1px #000000;
　　　　　　　background-color:#ffffff;　
　　　　　　　}
</style>
</head>

<body>
<table summary="画像ボックス">
<tr>
<th>
説明文
</th>
</tr>
<tr>
<td>
<div class="mini_box">
ボックス（背景白）
</div>
背景に画像
</td>
</tr>
</table>
</body>
</html>