CSSについて質問です。

人様のページですが、説明に使わせていただくと
http://desperadoes.biz/style/dan/1-f.html
こちらのようなシンプルなフロートを使った組み合わせなのですが、この例の場合左のメニューの下にフッターまでの間空白が出来てしまいます。

私が作っているものもメニューの高さは不明ですし(ユーザーの指定するフォントサイズによります)、右の本文はもっと高さが不明です。

フッターまでの余白を左右両方とも無くす方法はないでしょうか?
何か解決方法orそれが書かれたURL、回答があれば教えて下さい。
よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2007/02/01 08:29:16
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:okuryu No.4

回答回数72ベストアンサー獲得回数3

ポイント30pt

1の回答者です。

色ではなく #wrapper に例えば左側が赤色、右側が青色という画像(800px x 1px 等)を指定するというのはだめでしょうか。

CSS は次のような感じに。

#wrapper {
    background-image: url("background.gif");
    background-repeat: repeat-y;
}

デザインがリキッドレイアウト(可変)であっても大きめの画像を用意するなどすれば見るぶんには支障がないようにつくれると思います。

id:x2pop

なるほど、これは素晴らしい方法かもしれません。

今、左右それぞれの高さを取得して、長い方に合わせるJavaScriptを書いて全然動いていないところでした(汗)

見事に解決できました!

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

2007/02/01 08:27:33

その他の回答3件)

id:okuryu No.1

回答回数72ベストアンサー獲得回数3

ポイント20pt
<div id="wrapper">
  <div id="content">
    <p>左側</p>
  </div>
  <div id="navi">
    <p>右側</p>
  </div>
</div>

例えば HTML が次のようになってるとして、#wrapper の背景に任意の画像を指定すれば違和感のないような感じにはできると思います。

具体例でいうと以下のページのような感じです。

http://web-standards.jp/?cat=5

id:x2pop

無理みたいです…。

左の背景色が赤、右が青だとすると、

#wrapperに赤を設定して左が長く伸びると右の下側が赤になってしまいます。

伸びるのは必ず右、とか分かっていればこの方法で解決できますね…。

URLは申し訳ありません。なぜかタイムアウトして開けませんでした

2007/01/31 23:51:49
id:coliss No.2

回答回数79ベストアンサー獲得回数10

ポイント20pt

こういうことでしょうか。

http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/

簡単に説明すると、MENUとSUB TITLEの2つの領域を囲む1つの領域を作成し、そこに背景を指定するという方法です。

id:x2pop

http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/inde...

> この方法なら、ダミーのHTMLは必要ですが、左右どちらの段が短くても、HTMLの記述順やfloatプロパティの適用段を気にする必要はなくなります。

とあるのですが、どうしてもどちらかの色しか問題を解決できません。

メニュー用の解決策だと本文が長いとダメ、

本文用だと、メニューがダメ、、

2つ用意するしかないのでしょうか…。

2007/02/01 00:11:36
id:coliss No.3

回答回数79ベストアンサー獲得回数10

ポイント20pt

背景色の指定ではなく、MENUとSUB TITLEと同じ幅・色を使用した背景画像を使用するのではダメでしょうか。

id:x2pop

同じ幅といっても見る環境によって変わりますが…。

すいません、少し言われている意味を理解していないようです。

ああ、下のokuryuさんと同じ回答ですね。

理解できました。

2007/02/01 01:05:38
id:okuryu No.4

回答回数72ベストアンサー獲得回数3ここでベストアンサー

ポイント30pt

1の回答者です。

色ではなく #wrapper に例えば左側が赤色、右側が青色という画像(800px x 1px 等)を指定するというのはだめでしょうか。

CSS は次のような感じに。

#wrapper {
    background-image: url("background.gif");
    background-repeat: repeat-y;
}

デザインがリキッドレイアウト(可変)であっても大きめの画像を用意するなどすれば見るぶんには支障がないようにつくれると思います。

id:x2pop

なるほど、これは素晴らしい方法かもしれません。

今、左右それぞれの高さを取得して、長い方に合わせるJavaScriptを書いて全然動いていないところでした(汗)

見事に解決できました!

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

2007/02/01 08:27:33

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

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

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

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

回答リクエストを送信したユーザーはいません