スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。
body {
margin: 0px;
}
.menu {
background-image:url(./img.gif) ;
background-repeat:repeat ;
margin:0px ;
padding:10px ;
position:absolute;
width:150px ;
}
といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。(メニューの行数が短いので。)
私は、下までメニュー部分の背景がくるようにしたいのです。(つまり、画面が左右に2分割されるように)
そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。
表示させると、画面がきちんと2分割されます。
しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。
スクロールしても、下まできちんと2分割できるようにするには、どうすればいいでしょうか?
たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。
No.5ベストアンサー
- 回答日時:
こんにちは。
考え方は#4さんと同じなんですが、bodyにメニュー部分と本文部分の背景画像を一つにまとめ、リピートするのに最低必要な高さ(極力サイズを小さく)で作成しY方向だけにリピートさせる方法があります。この方法はA List Apartで掲載された偽カラムの作成方法です。
body {
margin: 0px;
background:url(背景画像.gif) repeat-y
}
.menu {
margin:0px ;
padding:10px ;
width:150px ;
float:left;
}
.本文{
float:left;
width:…;
}
説明が下手でごめんなさい。
参考URL:http://www.alistapart.com/
ありがとうございました。ご紹介のサイトはよくわからなかったのですが、自己解決しました。
http://desperadoes.biz/style/p_frame.php
を参考にしたら、できました。
流れとしては、
class=body内にclass=menuとclass=mainを入れるのではなく、最大領域で、class=body内にclass=menuとclass=mainを作成し、class=menu内に適当なpaddingを設定したid(classも可)を作成し、そのid内に背景画像を入れるといった方針でできました。
当然、class=main内にも、適当なpaddingを設定したidを作成しました。
ありがとうございました。
No.7
- 回答日時:
条件に合った構成を作成してみようと思いますが、もしよろしければ、既に作成されたソースを見せていただけますか…?
どのように要素を包含されているかも確認したいので…。
読み取れる限りの条件にあったものを考えてみますが…。
ありがとうございました。
自己解決しました。No.5に分かりにくい説明ですが、書いておきました。
www.mamapapa.net/kosodate/ 近日中ににアップする予定ですので、検索でこちらを見られた方は、まず、
http://desperadoes.biz/style/p_frame.php
を参考になさって、それがリンク切れなどの場合には、上記サイトでソースを見ていただければ参考になると思います。
最初は height など一箇所を加えたり直すだけでいいのかと思っていましたが、意外にも難問でした。
No.6
- 回答日時:
#4 です。
本文が短い場合ですが、メニューがウィンドウの表示領域内におさまるのでしたら、本文のほうにheight:100%;を加えればよいかと思います。
あるいは、そのページは、本文のほうの背景をbodyに設定するとか。
height:100%;はページ全体に対する割合ではなく、表示領域に対する割合なので、スクロールするほど長さのないページならきれいにできます。
どのページにも同じスタイルで、というのであれば
他の方が提案しているように、背景を1枚に加工するか、テーブルを使うか、overflowを使ってしまう手もあるかと。
ありがとうございます。
本文の方が短くなるかどうかは、見る人の環境によるのではないかと思います。
大量の文章のため、左メニューのwidthは180pxぐらいの固定にしていますが、本文の部分は右端まで文章がくるようにしています。その場合、画面サイズ、最大化せずにブラウズする場合、左にお気に入りを表示させている場合などによって、どちらが長くなるか場合によって違うのではないかと思います。
いかがでしょうか。
No.4
- 回答日時:
背景がメニューと本文の二つだけでよいのでしたら、メニューの背景をbodyに付けてはいかがでしょうか?
body {
margin: 0px;
background-image:url(メニュー側背景) ;
}
.menu {
margin:0px ;
padding:10px ;
width:150px ;
float:left;
border:solid 1px #ff0000;
}
.(本文)
{
background-image:url(本文側背景) ;
margin-left:170px;
padding:10px ;
border:solid 1px #0000ff;
}
分かりやすいようにborderを付けてみました。
本文のほうが短いとダメですけどね(^^;
20~30ページあるサイトなのですが、本文が短いページを見ると、やはりご指摘のように、うまくいきませんでした。
短いページですと、凹の形に背景が流れ込んでしまいました。
やろうとしていることは単純なのですが、スタイルシートでは意外と難しいんですね。
これって、スタイルシートが不十分だということなのでしょうか。
実はそのサイトは以前にフレームで分けていたのですが、リニューアルに際して、できるだけW3C準拠のサイトにしたいと思って、このような質問をさせていただきました。
でも、body全体に背景を指定して、本文(=main)部分の背景を別にというアイディアは素晴らしいと思いました。ありがとうございました。
No.2
- 回答日時:
#1です。
度々すみません。
今確認したら、
--------------------------------------------------
◆ background-attachment: attachment (C1/e4/N6)
ウィンドウのスクロールを動かした時の背景の動作を
scroll(規定値:一緒にスクロールする)、
fixed(スクロールしない)、
inherit(継承)のいずれかで指定します。
--------------------------------------------------
とありました。fixedじゃまずかったです・・・。
BODY {
background-image: url(image/back.gif);
background-attachment: scroll;
}
でいかがでしょう。
参考URL:http://www.tohoho-web.com/css/reference.htm#back …
早速のお返事ありがとうございました。参考のURLは私も見て、それらしいところをいろいろやってみたのですが、どうもうまくいかず、教えて!gooに頼ってしまいました。
ご教授の方法もアレンジしたりしながら、いろいろやってみたのですが、残念ながらうまくいきませんでした。
No.1
- 回答日時:
あまり詳しくは無いのですが・・・
これではいかがでしょう
body {
margin: 0px;
}
.menu {
background-image:url(./img.gif) ;
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
width:150px ;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
HTMLで文字が重なって表示されます
-
CSS検証サービス
-
定義リストに下線をつけたいと...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
form input テキストを上下中央...
-
背景が下まで表示されないんです。
-
Media Queries 4 で 非推奨とな...
-
<div>と<div>の間の10px程の...
-
CSS flot の設定について
-
CSS:animation開始位置の設定
-
インラインフレーム内の表示位...
-
CSS、width100%でもできる余白
-
css初心者 フレックスボックス...
-
firefoxにおけるmargin-topの表...
-
clearfix の後marginが効かない
-
position:absoluteなのにセンタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
HTMLで文字が重なって表示されます
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
CSS、width100%でもできる余白
-
CSSでボックスのheightが0になる
-
CSSがなぜかfont-sizeだけ効か...
-
Media Queries 4 で 非推奨とな...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
<div>と<div>の間の10px程の...
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
おすすめ情報