掲示板/スタイルシート質問板/過去ログ/一覧/ ３段組以上の　背景の縦リピート

0 名前：こー： 2006/06/11（日） 11:14: ＨＴＭＬ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
　省略
</head>

<body align="center">
<div id="outside">
<div id="inside">
<div id="oo_waku">
<div id="l_waku">
<div id="gazou01">あ</div>
</div>
<div id="r_waku">
<div id="r_r_waku">
<div id="gazou02">い</div>
</div>
<div id="r_l_waku">
<div id="gazou03">う</div>
</div>
</div>

<div class="clclclcl"></div>
</div>

<div class="clclclcl"></div>
</div>
</div>
</body>
</html>

ＣＳＳ

body {
text-align: center ;
margin: 0 0 ;
padding: 0 0 ;
background: #999999 ;
}

.clclclcl {
clear: both ;
}

#outside {
text-align: center ;
width: 760px ;
/* height : 1000px ; */
margin: 0 auto ;
padding: 3px 0 0 8px ;
background-image: url("aaa/back.JPG") ;
background-repeat: repeat-y ;
}

#inside {
text-align: center ;
width: 760px ;
margin: 0 0 ;
padding: 0 0px 0 0px ;
}

#oo_waku {
text-align: left ;
width: 760px ;
margin: 0 auto ;
}

#l_waku {
width: 200px ;
float: left ;
}
#r_waku {
width: 560px ;
float: right ;
}

#r_r_waku {
width: 350px ;
float: right ;
}

#r_l_waku {
width: 210px ;
float: left ;
}

#gazou01 {
width: 89px ;
height: 50px ;
background-image: url("aaa/gazou_001.gif") ;
background-repeat: no-repeat ;
}

#gazou02 {
width: 89px ;
height: 50px ;
background-image: ("aaa/gazou_002.gif") ;
background-repeat: no-repeat ;
}

#gazou03 {
width: 89px ;
height: 50px ;
background-image: url("aaa/gazou_003.gif") ;
background-repeat: no-repeat ;
}

以上のような、３段組のＨＴＭＬ・スタイルシートでの
ｏｕｔｓｉｄｅ内　back.JPG　Ｙ方向リピート
ですが、ＩＥ・ＮＮ・ＦＦ・ｏｐｅｒａのうち
ＮＮのみリピートされません。

なぜされないのか、どうすればよいのか
ご教授ください♪

もちろん、/* height : 1000px ; */
部分を有効にすれば、1000pxはリピートされ
ますが、固定にせずに可変でリピートさせたいのです。

ちなみにクリア(1)と(2)
が無ければＩＥ以外ではリピートされなくなります。
また２段組であれば、floatを片側のみ（LEFTのみ）
にして、右側分はmarginで左側の幅を指定し右に表示させる
という方法なら強引ではありますが、表示上は上記の
４ブラウザならうまくいきます。
しかしそのようなやり方は通用範囲が限られてきますので
使いたくありません。

どうぞよろしくお願いいたします。

1 名前： Pid ◆byEkK9OALr ： 2006/06/11（日） 11:14: > ＩＥ・ＮＮ・ＦＦ・ｏｐｅｒａのうちＮＮのみリピートされません

えーと，このソースだと NN に限らず aaa/back.JPG は表示されないと思うのですが（厳密には，repeat-y は効いてはいるが，. outside ボックスが潰れているので見えない）。

----
・なお，#gazou02 の background-image 指定にミスがあります。
・と言いますか，これは「表」ですよね？ならば div 要素ではなく table 要素でマークアップすべきです。
・また，細かい話になりますが，#outside，#inside，#*_waku の各要素は，このソースを見る限り id ではなく class で分類すべきです。その際，これらは id/class の名付け方としては不適切なので，スタイルではなく文書構造や意味に基づいて名前を付けた方が良いでしょう。

2 名前：こー： 2006/06/11（日） 11:14: 返信ありがとうございます。

なんかボロボロのコーディングのようで
お恥ずかしい限りです・・・。

＞#gazou02 の background-image 指定にミスがあります
　については、記述ミスです。
　ファイル名はそのままコピペせずわざと変えてしまった
　もので、その際のミスです。

　ファイル名こそ違いますがこのコーディングで
　ＮＮ以外はＹでリピートされています。
　（もしかしたらされるのが間違いで、されないはずの
　　コーディングなのでしょうか？
　　だとしたら、なぜこのコーディングでは
　　”outside ボックスが潰れて”しまうのでしょうか？
　潰れてしまわないようにするにはどうすればよいのでしょうか？
　　
　

　
　これは表ではなく、右・中央・左という３段組で
　可変長で縦に続く段組（のつもり・・・）です。
　それぞれの　_waku　（縦段）を拡張し表を含めて
　もっと項目がふやすつもりです。
　たとえば、見栄えが
　http://www.mapfan.com/
　の中央部のような感じの縦３段分けです。
　まだ初心者なので詳しくは解りませんが
　このように表ではないとしても、名づけ方は
　不適切なのでしょうか。
　一応（テストなので適当ですが）右側をｒ・左側をｌ
　といった感じでつけたのですが
　もしそのような件で参考になるぺージなどが
　ありましたら、ぜひ教えてください♪
　

　質問の仕方などに不適切がありましたら
　お許しください。

3 名前： Z ◆XTzyosZXcL ： 2006/06/11（日） 11:14 ID:kWTOVhJr: >>0ですと、DIV要素の入れ子が妙なことになっているように受け止められますが。
　また、そもそも何のために多段組をされるかです。あくまでDIV要素はグループ化のためのもので、それ自身は意味をもちません。段落ならP要素、表ならTABLE要素という風にマークアップをし、それらをまとめて塊としてくくるのがDIV要素だと考えてください（DIV要素だけでなく、各要素にも直接CSSが適用できます）。

DIV要素について（HTML4.01仕様書該当部分）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

id属性とclass属性（HTML4.01仕様書該当部分）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#class-id-example
http://www.w3.org/TR/html401/struct/global.html#class-id-example

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html

CSSの基本：
http://web.xii.jp/iec/css/

　多段組自体については、下記がよいでしょう。

「CSSによる段組（マルチカラム）レイアウト講座」
http://www.geocities.jp/multi_column/

余談：文法チェッカのすすめ
http://web.xii.jp/iec/note/checker

4 名前：こー： 2006/06/11（日） 11:14: またまた早速の返信ありがとうございます。

HTML Project2　で　ＨＴＭＬをチェックしたところ
入れ子等、問題なしでした。

また、中身を殆ど省略していますが（つまりこのＨＴＭＬは
殆ど段組の枠のみのコーディング）ＤＩＶはグループ化
のみに使用しています。

＞何のために多段組をされるか・・・・・
＞段落ならP要素、・・・・

ですが

このコーディングは横割りではなく縦割りの段組です。

殆ど
http://css.uka-p.com/3column_main.shtml
を参照しました。

話が本題からずれてきましたね♪
すみません。

back.JPG　が　なぜＮＮだけリピートしないのか
そして、先にも書いたように、もしかしたらＮＮ
以外でリピートされるのが間違いで、これは本来なら
リピートされないはずのコーディングなのか？
だとしたら、なぜこのコーディングでは
”outside ボックスが潰れて”しまうのか？
潰れてしまわないようにするにはどうすればよいか？

もしよろしければ、引き続きご指導くださいませ。

参照ページ等たくさん書いてくださってありがとうございます。

「CSSによる段組（マルチカラム）レイアウト講座」
http://www.geocities.jp/multi_column/

以外は今まで色々な検索で引っかかっていても
ほとんど素通りしていました。

一度じっくりと読み、勉強したいと思います。

5 名前： Pid ◆byEkK9OALr ： 2006/06/11（日） 11:14: すみません，>>1 の時点では Mozilla 1.7.8，Opera 7.53 でしか確認してなかったのですが，Firefox 1.5，Opera 8.54 では確かに仰る現象になりますね。

私が思うに，ポイントは 2 点です。

(a). 浮動ボックスは，通常フローから外されて左もしくは右に移動します。通常フローでは，浮動ボックスはあたかも「存在しない」かのように垂直配置されます。

今回の件で言えば，#outside ボックスの子は全て浮動化ボックスですので，通常フローでは「中身が何も存在しない」状態になります。つまり，#outside ボックスの height の計算値は 0 です。

したがって，NN で #outside ボックスが潰れてしまうという動作は「正しい」ものです。

(b). ただし，#outside ボックス自身が浮動化している場合，もしくは overflow によるはみ出し制御の拠点となっている場合，#outside ボックスの height 計算には，浮動化した子孫ボックスも考慮の対象となります。

つまり，#outside に対して { float: left; }，あるいは { overflow: auto; } を与えれば，（少なくとも NN では）お望みの動作になるかと思います。

詳しくは http://www.kanzaki.com/book/css/3-2.html#s3-2-4 を参照して下さい。

6 名前：こー： 2006/06/11（日） 11:14: Pidさん
返信が遅れごめんなさい。

浮動ボックス・浮動化について大変参考にそして勉強になりました。
Pidさんのコメントと紹介いただいた参照ページは、本題で質問させて
いただいたことについて非常に納得のいくもので、またその本題で聞きたいと
していたことに対することにピタリと当てはまる回答であったため
読んだとたんにその解決策も一瞬にしてすぐに思いつきました。

解決策としては、浮動化（float）をクリアーしたあと、最後（クリア②の下など）に
たとえば　<span>ん</span>　とか　あるいは　スペーサーなんかを
ポツッと入れてやれば、height値が０ではなくなり（何も無いと言う認識では
なくなり）背景が下まで思い通りのheight可変長でドーンと現れるという
ことで、見事うまくいきました。

Pidさん　はじめ、回答いただいた皆様ありがとうございました。
感謝いたします♪

３段組以上の 背景の縦リピート

３段組以上の　背景の縦リピート