cssとdivを使って段組表示を行っています。

※たて3、よこ3の合計9ボックスです

また、各ボックスでは背景に画像を利用しており、
「background-image」で指定し、
隙間無く表示しています。

この状態のときに、
真ん中の列の中央部の高さが変わった場合に
同時に真ん中の列の左右のボックスの背景画像を
同じ高さで表示したいのですがうまくいきません。
※一応、「background-repeat」で「repeat」を
 指定してみたり、
 「height」で「100%」を指定してみたりしましたが
 だめでした。

どうにしかしてうまく2つのボックスを同時に
中央のボックスと同じように
背景画像の高さを伸ばす方法はないでしょうか。

※中央のボックスにはメッセージが表示されるので
 文字数に応じて高さが変更されます。

よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/06/01 00:01:08
  • 終了:2007/06/04 17:56:37

ベストアンサー

id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912007/06/01 11:48:55

ポイント50pt

別に親要素は何でも良いので、親要素に DIV を使用してはどうでしょうか。

<html>
<head>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

.leftBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.centerBox {
    width: 34%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.rightBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: right;
    border: 2px solid #000000;
}

.box {
    width: 90%;
    height: 1;
    border: 1px solid #FFFFFF;
}

--->
</style>
</head>
<body>
        <div class="box">
            <div class="leftBox">左上</div>
            <div class="centerBox">中上</div>
            <div class="rightBox">右上</div>
        </div>
        <div class="box">
            <div class="leftBox">左中</div>
            <div class="centerBox">真ん中1<br>真ん中2<br>真ん中3</div>
            <div class="rightBox">右中</div>
        </div>
        <div class="box">
            <div class="leftBox">左下</div>
            <div class="centerBox">中下</div>
            <div class="rightBox">右下</div>
        </div>
</body>
</html>

ただ、box クラスの border を指定しないとうまく配列されなかったので、今回は背景色と同じ色を指定することで逃げました。

ここは、もっと良い方法がありそうな気もします。

http://park16.wakwak.com/~html-css/css/css_18.html

id:preshu

Mookさん

詳細な説明ありがとうございます。

ご説明いただいた内容を試行錯誤して

何とか理解し、自分なりに組み替えて活用できそうです。

いろいろな手段があると思うので、

自分なりにいろいろとご助言いただいた内容を参考にして、

がんばってみたいと思います。

ありがとうございました。

2007/06/04 17:51:10

その他の回答(2件)

id:hallo21 No.1

hallo21回答回数246ベストアンサー獲得回数22007/06/01 00:44:18

ポイント25pt

画像

http://end

id:preshu

画像ですか・・・

おそらく、9分割するのでなく、

上・中・下の3段階として、

中段の背景を画像化して行う方法だと思いますが、

今回は9分割されているものとして考えています。

ご助言ありがとうございます。

2007/06/04 17:54:58
id:Mook No.2

Mook回答回数1312ベストアンサー獲得回数3912007/06/01 01:15:14

ポイント25pt

height で 100% を指定してあげればよいと思いますが、それが有効となるためには親要素が高さを持っていなければなりません。


下記の例では親要素としてテーブルを利用してみました。

<html>
<head>
<style type="text/css">
<!--
.leftBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.centerBox {
    width: 34%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.rightBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: right;
    border: 2px solid #000000;
}

td.box {
    width: 100%;
    height: 1;
}

--->
</style>
</head>
<body>
    <table width="90%">
        <tr><td class="box">
            <div class="leftBox">左上</div>
            <div class="centerBox">中上</div>
            <div class="rightBox">右上</div>
        </td></tr>
        <tr><td class="box">
            <div class="leftBox">左中</div>
            <div class="centerBox">真ん中1<br>真ん中2<br>真ん中3</div>
            <div class="rightBox">右中</div>
        </td></tr>
        <tr><td class="box">
            <div class="leftBox">左下</div>
            <div class="centerBox">中下</div>
            <div class="rightBox">右下</div>
        </td></tr>
    </table>
</body>
</html>

http://park16.wakwak.com/~html-css/css/css_18.html

id:preshu

ご回答ありがとうございます。

確かにこの方法であれば

中央のボックスのサイズに高さが連動しますね。

ただ、今回はTableレスなデザインで構築しているので、CSSのみで対応を模索しています。

ご回答ありがとうございました。

2007/06/01 08:44:18
id:Mook No.3

Mook回答回数1312ベストアンサー獲得回数3912007/06/01 11:48:55ここでベストアンサー

ポイント50pt

別に親要素は何でも良いので、親要素に DIV を使用してはどうでしょうか。

<html>
<head>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

.leftBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.centerBox {
    width: 34%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: left;
    border: 2px solid #000000;
}

.rightBox {
    width: 33%;
    height:100%;
    background-image: url(image.jpg);
    background-repeat:repeat;
    float: right;
    border: 2px solid #000000;
}

.box {
    width: 90%;
    height: 1;
    border: 1px solid #FFFFFF;
}

--->
</style>
</head>
<body>
        <div class="box">
            <div class="leftBox">左上</div>
            <div class="centerBox">中上</div>
            <div class="rightBox">右上</div>
        </div>
        <div class="box">
            <div class="leftBox">左中</div>
            <div class="centerBox">真ん中1<br>真ん中2<br>真ん中3</div>
            <div class="rightBox">右中</div>
        </div>
        <div class="box">
            <div class="leftBox">左下</div>
            <div class="centerBox">中下</div>
            <div class="rightBox">右下</div>
        </div>
</body>
</html>

ただ、box クラスの border を指定しないとうまく配列されなかったので、今回は背景色と同じ色を指定することで逃げました。

ここは、もっと良い方法がありそうな気もします。

http://park16.wakwak.com/~html-css/css/css_18.html

id:preshu

Mookさん

詳細な説明ありがとうございます。

ご説明いただいた内容を試行錯誤して

何とか理解し、自分なりに組み替えて活用できそうです。

いろいろな手段があると思うので、

自分なりにいろいろとご助言いただいた内容を参考にして、

がんばってみたいと思います。

ありがとうございました。

2007/06/04 17:51:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません