2段組での背景の調節。
-
0 名前： 悩める初心者。 ： 2006/05/01（月） 13:06 ID:PUtaRLDI
- はじめまして。
最近、CSSでのレイアウトを勉強している初心者です。
少し聞きたいことがありましたので書き込ませていただきます。
「contbox（760px）」というボックスの中に「main（幅660px）」と「side（幅100px）」の
2つのボックスを作り、mainを左側、sideを右側に配置しました。
その後にmainの背景色に白色、sideの背景色に黒を指定したのですが、
mainの高さが大きくなるとsideの背景色が途中で切れてしまいます。
調べたところ、この場合にはcontboxに背景色もしくは背景画像をつければいいということだったので、
760px×10pxの背景画像（左660pxは白、右100pxは黒）を作ってcontboxの背景画像にしてY軸にリピートさせました。
IEでは下までしっかり表示できたのですが、Firefoxで見た場合には背景画像が反映されません。
何かいい解決方法はないでしょうか？
-
1 名前： 匿名 ： 2006/05/01（月） 13:06 ID:Iz2k4TNT
- それだけだと、まだ少しパーツが足りなくて確実な答えにはならないかと思いますが
<div style="width: 760px; height: 1000px;">
<div style="width: 660px; height: 1000px; background-color:#fff; float:left;"></div>
<div style="width: 100px; height: 1000px; background-color:#000; float:left;"></div>
</div>
こういう表示になればよい、ということでしょうか？
（もちろん、body には margin:0px で。）
-
2 名前： 悩める初心者。 ： 2006/05/01（月） 13:06 ID:PUtaRLDI
- 素早いお答えありがとうございます。
ただ、そのやり方だとテンプレート化した場合に全てのページが縦1000pxになってしまいますよね？
ページによってmainに入るコンテンツの量が大きく変わるので、できればmainのコンテンツの
高さにあわせてsideの高さを自動的に伸縮させたいのですが・・・
一応、現時点で完成しているものは↓の様な感じなんですが。
http://hccweb1.bai.ne.jp/hekiru/box/
なお、contboxにつける背景をわかりやすくするため色を変えてます。
見ていただければわかるようにfirefoxだと右側のモスグリーンの帯が下まで表示されません。
スタイルシートは以下のようになってます。
#contbox {
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 12px;
width: 760px;
background-image: url(cback.gif);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#main {
float: left;
width: 660px;
background-color: #FFFFFF;
}
#side {
float: right;
width: 100px;
background-color: #000000;
color: #FFFFFF;
}
#footter {
width: 760px;
background-color: #003366;
color: #FFFFFF;
clear: both;
margin-right: auto;
margin-left: auto;
}
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#headder {
width: 760px;
background-color: #003366;
color: #FFFFFF;
}
-
3 名前： 匿名 ： 2006/05/01（月） 13:06 ID:Iz2k4TNT
- あぁ、そういう事でしたか。
でしたら、入れ子に入れ子するこういうのはどうでしょう？
<div style="width:760px; height: 100%;">
<div style="width: 760px; background-color:#000; text-align:left;">
<div style="width: 660px; height:200px; background-color:#fff;">
</div>
</div>
</div>
main用のボックスの中身を入れるのが面倒なので、height指定してますが、
使用されるときはその部分削除してご使用ください。
-
4 名前： 匿名 ： 2006/05/01（月） 13:06 ID:Iz2k4TNT
- ※ごめんなさい、追記＆修正
<div style="width:760px;">
<div style="width: 760px; background-color:#000; text-align:left;">
<div style="width: 660px; height:200px; background-color:#fff; float:left;">
</div>
<div style="width: 100px; float:left;">
</div>
</div>
</div>
サイド用のボックス忘れてました
