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>
としてあります。
いろいろ参考にしてやりましたところ途中にコピーライトが
ありその後ずっと下の方まで左右のびていて左が少し短くて
終わる感じになりますになります。
どうすればいいのでしょうか
過去の質問も参考にしましたがやったらこうなったというわけです。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
失礼しました。
左右の高さを整えたいですね。
それなら、「.main」と「.submenu」に、height を設定出来ないですか?
高さがコンテンツ毎に違うので有れば、「.pageyohaku」の背景画像で、「.main」と「.submenu」の領域に別けるというのも有りだと思いますが・・・。
ご確認ください。
この回答への補足
padding-bottom: 32768px;
は、自分でもよくわかりませんがあわせるのにネットに
書いてありました。
その場合、一番長い文章の終わりに他のがのびているということです。
私の場合は、フッターで締めくくりたいのです。
htnlを上での作成でCSSをstyle.cssで作成すれば
現状どうなるかわかってもらえると思います。
本来はファイルなどを提供できるといいのですがそれが出来ないので
htmlとCSSの両方を書きました
画像は提供できないので空欄になってますがタイトル画像のバーと
思ってください。
よろしくお願いします。
>height を設定出来ないですか?
コンテンツごとに高さが違うのでそれが出来ません
はじめのCSSから何が変なのかもよくわかりません。
ページと枠のあり方から説明頂けると助かります。
少し混乱しています。
私の場合はbodyがそのページ
pageがフレーム風のカラム分けの大枠
その中に上から#header 2つと左右のもの
そして締めくくりのフッター(1つまたは2つ)
http://web.fc2.com/
上のとはちょっと違いますが左にメニュー、右に内容
そして、最後に左の方が短いのにCopyrightの上のバーで
しっかりと区切ってある
http://css.eweb-design.com/
こちらの方が色が付いていてわかりやすいでしょうか
締めくくりはこういう風にしたいです。
(ここは右が幅余りすぎですが)
高さが違う場合の例として2件あげました
No.3
- 回答日時:
まずは、「padding-bottom: 32768px;」「margin-bottom: -32768px;」を削除、もしくはコメントアウトしてみてください。
この状態で、左側の高さを右側の高さに合わせたいという事でしょうか?
ご確認ください。
ご回答ありがとうございます。
いろいろ見て地道にやっているのですが、どうもうまくいきません。
少し質問とずれるのですが、CSSでの配置などを作成出来る
ソフトはありませんか。
また、現在フレームのページ(左メニューと右コンテンツ)を
一気に書き換え左メニューに相当するものをコンテンツに組み込む
ソフトありませんか。
CSSもそうなんですがHTMLもゼロからは作れません。
現在は、Microsoft FrontPage2000を使っています。
No.4
- 回答日時:
まず始めに、「padding-bottom: 32768px;」「margin-bottom: -32768px;」は不要だった事を理解して頂けたと思います。
少し調べた所、「padding-bottom:」「margin-bottom:」を利用した方法もあるみたいです。
http://coliss.com/articles/build-websites/operat …
上記のページに書かれていますが、「32768px」とは意味が有るのでしょうか?上記の方法を真似るのも良いと思います。
上記の方法を真似るのが難しいと言うので有れば、「.main」と「.submenu」の高さを揃える方法として、単純に height で高さを指定した方が簡単で良いと思います。後はコンテンツ頃に、個別に指定するのが良いのではないでしょうか。
他の方法としては、「.main」と「.submenu」で背景の色は指定せずに、「#page」の背景に、「.main」と「.submenu」の部分に相当する色分けをした背景画像を用意して、高さ方法に繰り返せば良いと思います。
以下のページが参考になります。
http://allabout.co.jp/internet/hpcreate/closeup/ …
他に
>少し質問とずれるのですが、CSSでの配置などを作成出来るソフトはありませんか。
基本的に、html(xhtml)及び、CSS を学んで頂かなければ、Dreamweaver 等は使えないと思います。まずはエディターだけで基本的なレイアウトを作れるようになってください。
>一気に書き換え左メニューに相当するものをコンテンツに組み込む
ソフトありませんか。
ありません。
>CSSもそうなんですがHTMLもゼロからは作れません。
理解して覚えて頂くしかないと思います。
頑張ってください(^^)。
ご回答ありがとうございます。
地道に上のアドレスやにているページ(ほとんどフレームなのが欠点)を
研究しようと思い再度上からCSSを見直しています。
padding-bottom: 32768px;がいいようなことを書いてあるCSSの
解説ページにも書いてありましたので意味不明ながらも付けました。
フレームページ作成のように一概には行きませんね。
ありがとうございました。
No.5
- 回答日時:
>padding-bottom: 32768px;がいいようなことを書いてあるCSSの
>解説ページにも書いてありましたので意味不明ながらも付けました。
「サイトに書いて有ったから設定しました」は避けた方が良いと思います。理解して利用するには良いと思いますが、理解しないで採用することはお勧めしません。ですので、今回は「padding-bottom: 32768px;」「margin-bottom: -32768px;」を忘れた方が良いと思います。
希望を叶える方法として、以下のページの方法は如何でしょうか。ご確認ください。
http://www.techdego.com/2007/05/liquid_image_fau …
【Faux columnsとは?】の項目を参照してみてください。
多分一番簡単な方法です。「#page」部分に背景画像を入れる方法です。
最後に
希望したいデザインを実現するには様々な方法が有り、回答は一つでは有りません。サイトを検索したり、質問したりすると色々な情報が出てきて混乱すると思いますが、様々な情報からご自身が理解出来た方法から試して、学んで行くのが良いと思います。一つの方法を固執しないで色々試してみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
form input テキストを上下中央...
-
初心者html・CSS ウィンドウを...
-
CSSで指定した背景画像にリンク...
-
画像だけを端に寄せる方法
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
css初心者 フレックスボックス...
-
div領域をウインドウサイズに合...
-
ライトボックスでスクロールバー
-
HTMLで一部だけスクロールする...
-
表示倍率を変えるとレイアウト...
-
ボックスを中央配置したいです。
-
スクロールボックス内の文字の...
-
スクロールボックスを中央に配...
-
ヘッダーの画像にメインエリア...
-
Safariでheight:100%のボックス...
-
border-style:solidで文字がずれる
-
cssが効かなくて困ってます
-
中点「・」の改行について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
divで囲まれたpaddingの指定を...
-
CSSで指定した背景画像にリンク...
-
【HTML&CSS】フッター下部の余...
-
HTMLのiframeの入れ子について
-
画像と一緒にスライドするリン...
-
ページを拡大縮小でborderが消...
おすすめ情報