- 締切済み
CSSによる左右の高さをそろえる
http://oshiete1.goo.ne.jp/qa4249087.html で質問してましたが、すこし内容が変わるので改めて質問させて頂きます。 現在のCSSは、 body { text-align:center;} /*メインのフレーム指定*/ #page { width:760px; margin:0 auto; text-align:left; padding-bottom: 32768px; margin-bottom: -32768px; } /*ヘッダー及び横項目指定*/ #header { width:100%; text-align:center; height:65px; } #header2 { width:750px; line-height:35px; background-color:#FF00FF; } /*中央左右設定及び余白指定*/ .pageyohaku { margin:0 10px; } .main {width:570px; float:right; background-color:#E0FFFF;padding-bottom: 32768px; margin-bottom: -32768px;} .submenu { width:170px; float:left; background-color:#FFC0CB;padding-bottom: 32768px; margin-bottom: -32768px;} .c-both { clear:both; } /*下記記載事項枠指定*/ .footer1 {width:100%; text-align:left;line-height:15px;background-color:#24CF00;clear:both;position:relative;} .footer2 {width:100%; text-align:center;line-height:15px;background-color:#DCDCDC;clear:both;position:relative;} /*リンク指定*/ .link {color:blue;} －－－－－－－－－－－－－－－－－－－ htmlは <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>ホームページ</title> </head> <body> <div id=page> <div id=header> <p><img border="0" src="" width="730" height="65"></p> </div> <div id=header2> <p>このページはレーベル作成を指南します</p> </div> <div class=pageyohaku> </div><! pageyohakuの終わり指定> <div class=main> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> <p>本日はようこそ</p> </div><! mainの終わり指定> <! サブメニュー一覧> <div class=submenu> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> <p>リンク</p> </div><! submenuの終わり指定> <div class=c-both> </div><! c-bothの終わり指定> <div class=footer1> 最下層メニュー項目</p> </div><! footer1の終わり指定> <div class=footer2> <p>コピーライト</p> </div><! footer2の終わり指定> </div><! Pageの終わり指定> </body> </html> としてあります。 いろいろ参考にしてやりましたところ途中にコピーライトが ありその後ずっと下の方まで左右のびていて左が少し短くて 終わる感じになりますになります。 どうすればいいのでしょうか 過去の質問も参考にしましたがやったらこうなったというわけです。
- milkyway01
- お礼率94% (217/230)
- CSS
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- nori_007
- ベストアンサー率35% (369/1048)
>padding-bottom: 32768px;がいいようなことを書いてあるＣＳＳの >解説ページにも書いてありましたので意味不明ながらも付けました。 「サイトに書いて有ったから設定しました」は避けた方が良いと思います。理解して利用するには良いと思いますが、理解しないで採用することはお勧めしません。ですので、今回は「padding-bottom: 32768px;」「margin-bottom: -32768px;」を忘れた方が良いと思います。 希望を叶える方法として、以下のページの方法は如何でしょうか。ご確認ください。 http://www.techdego.com/2007/05/liquid_image_faux_columns_css.php 【Faux columnsとは？】の項目を参照してみてください。 多分一番簡単な方法です。「#page」部分に背景画像を入れる方法です。 最後に 希望したいデザインを実現するには様々な方法が有り、回答は一つでは有りません。サイトを検索したり、質問したりすると色々な情報が出てきて混乱すると思いますが、様々な情報からご自身が理解出来た方法から試して、学んで行くのが良いと思います。一つの方法を固執しないで色々試してみてください。
- nori_007
- ベストアンサー率35% (369/1048)
まず始めに、「padding-bottom: 32768px;」「margin-bottom: -32768px;」は不要だった事を理解して頂けたと思います。 少し調べた所、「padding-bottom:」「margin-bottom:」を利用した方法もあるみたいです。 http://coliss.com/articles/build-websites/operation/css/558.html 上記のページに書かれていますが、「32768px」とは意味が有るのでしょうか？上記の方法を真似るのも良いと思います。 上記の方法を真似るのが難しいと言うので有れば、「.main」と「.submenu」の高さを揃える方法として、単純に height で高さを指定した方が簡単で良いと思います。後はコンテンツ頃に、個別に指定するのが良いのではないでしょうか。 他の方法としては、「.main」と「.submenu」で背景の色は指定せずに、「#page」の背景に、「.main」と「.submenu」の部分に相当する色分けをした背景画像を用意して、高さ方法に繰り返せば良いと思います。 以下のページが参考になります。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/ 他に >少し質問とずれるのですが、ＣＳＳでの配置などを作成出来るソフトはありませんか。 基本的に、html(xhtml)及び、CSS を学んで頂かなければ、Dreamweaver 等は使えないと思います。まずはエディターだけで基本的なレイアウトを作れるようになってください。 >一気に書き換え左メニューに相当するものをコンテンツに組み込む ソフトありませんか。 ありません。 >ＣＳＳもそうなんですがHTMLもゼロからは作れません。 理解して覚えて頂くしかないと思います。 頑張ってください(^^)。
お礼
ご回答ありがとうございます。 地道に上のアドレスやにているページ(ほとんどフレームなのが欠点)を 研究しようと思い再度上からＣＳＳを見直しています。 padding-bottom: 32768px;がいいようなことを書いてあるＣＳＳの 解説ページにも書いてありましたので意味不明ながらも付けました。 フレームページ作成のように一概には行きませんね。 ありがとうございました。
- nori_007
- ベストアンサー率35% (369/1048)
まずは、「padding-bottom: 32768px;」「margin-bottom: -32768px;」を削除、もしくはコメントアウトしてみてください。 この状態で、左側の高さを右側の高さに合わせたいという事でしょうか？ ご確認ください。
お礼
ご回答ありがとうございます。 いろいろ見て地道にやっているのですが、どうもうまくいきません。 少し質問とずれるのですが、ＣＳＳでの配置などを作成出来る ソフトはありませんか。 また、現在フレームのページ(左メニューと右コンテンツ)を 一気に書き換え左メニューに相当するものをコンテンツに組み込む ソフトありませんか。 ＣＳＳもそうなんですがHTMLもゼロからは作れません。 現在は、Microsoft FrontPage2000を使っています。
補足
これを外しましたら短い左側が届かず 右側の終わりでフッターがつきました。 これで左側もフッターまで揃ってくれればよいのですが。
- nori_007
- ベストアンサー率35% (369/1048)
失礼しました。 左右の高さを整えたいですね。 それなら、「.main」と「.submenu」に、height を設定出来ないですか？ 高さがコンテンツ毎に違うので有れば、「.pageyohaku」の背景画像で、「.main」と「.submenu」の領域に別けるというのも有りだと思いますが・・・。 ご確認ください。
お礼
ご回答ありがとうございます。
補足
padding-bottom: 32768px; は、自分でもよくわかりませんがあわせるのにネットに 書いてありました。 その場合、一番長い文章の終わりに他のがのびているということです。 私の場合は、フッターで締めくくりたいのです。 htnlを上での作成でＣＳＳをstyle.cssで作成すれば 現状どうなるかわかってもらえると思います。 本来はファイルなどを提供できるといいのですがそれが出来ないので htmlとCSSの両方を書きました 画像は提供できないので空欄になってますがタイトル画像のバーと 思ってください。 よろしくお願いします。 >height を設定出来ないですか？ コンテンツごとに高さが違うのでそれが出来ません はじめのＣＳＳから何が変なのかもよくわかりません。 ページと枠のあり方から説明頂けると助かります。 少し混乱しています。 私の場合はbodyがそのページ pageがフレーム風のカラム分けの大枠 その中に上から#header ２つと左右のもの そして締めくくりのフッター(１つまたは２つ) http://web.fc2.com/ 上のとはちょっと違いますが左にメニュー、右に内容 そして、最後に左の方が短いのにCopyrightの上のバーで しっかりと区切ってある http://css.eweb-design.com/ こちらの方が色が付いていてわかりやすいでしょうか 締めくくりはこういう風にしたいです。 (ここは右が幅余りすぎですが) 高さが違う場合の例として２件あげました
- nori_007
- ベストアンサー率35% (369/1048)
前の質問も確認しましたが、具体的にどうしたいのでしょうか。 かた、CSS をざっと見て、「padding-bottom: 32768px;」「margin-bottom: -32768px;」の意図が分かりません。ご説明ください。 また、コピーライトと、最下層メニュー項目が中間に有ります。 コピーライト、最下層メニュー項目の位置は中間がご希望なんですか？ 再度最終的にどうしたいのか、ご説明された方が的確な回答を頂けると思います。
お礼
ご回答ありがとうございます。
お礼
ありがとうございました 出来る限り理解を深めながら求める理想のスタイルに していこうとおもいます。