お世話になります。
標準モードで1pxの枠線を作り、一番下にフッターがくるようにしたいのですが、どうにも出来ません。
また、左メニューとメインの部分がズレてしまう事も修復できず悩んでいます。
なにかいい方法がないか、ご教授いただけると幸いです。
尚、テーブルは使わない方法でお願いします。
以下が途中までのソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#flame {
width: 1000px;
height:100%;
margin-top: 10px;
margin-left: 10px;
padding: 20px;
border-color: #999999;
border-style: solid;
border-width: 1px;
}
div#header {
background-color:#999999;
color:white;
}
div#container {
background-color:#ffffee;
}
div#left {
background-color: #cccccc;
width: 200px;
left: 0px;
top: 0px;
}
div#content_right {
background-color: #cccccc;
margin-left: 210px;
font-size: 10pt;
line-height: 140%;
left: 0px;
}
div#footer {
width:100%;
background-color:666666;
color:white;
}
-->
</style></head>
<body>
<div id="flame">
<div id="header">ヘッダー</div>
<div id="content_right">メイン記事テキスト</div>
<div id="left">左メニュー部分</div>
</div>
<div id="footer">フッター</div>
</body>
</html>
No.3ベストアンサー
- 回答日時:
#2です。
「position」の使い方が質問者さんと違うかも知れません。
「メイン記事テキスト」の部分は「ヘッダ」直下に張り付いてますので、
固定したのは「左メニュー部分」だけです。
それから「ヘッダ」、「左メニュー部分」及び、「フッタ」共に文字サイズ、ラインハイトなど固定したほうが良いかも知れません。
(閲覧環境に対応させるため)
これらは私独自の解釈で得た結果です。
なので参考にはならないと思いますが、一応貼っておきます。
<!-- saved from url=(0022)http://internet#e-mail -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4#01 Transitional//EN"
"http://www#w3#org/TR/html4/loose#dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
html,body {
margin:0px;
padding:0px;
height:100%;
}
div#frame {
width: 1000px;
height:100%;
margin-top: 10px;
margin-left: 10px;
padding: 20px;
border-color: #999999;
border-style: solid;
border-width: 1px;
}
div#header {
background-color:#999999;
font-size: 14pt;
line-height: 120%;
color:white;
}
div#container {
background-color:#ffffee;
}
div#left {
background-color: #cccccc;
position:absolute;
font-size: 13pt;
line-height: 140%;
width: 200px;
left: 31px;
top: 54px;
}
div#content_right {
background-color: #cccccc;
margin-left: 210px;
font-size: 10pt;
line-height: 140%;
left: 0px;
}
div#footer {
font-size: 14pt;
line-height: 120%;
width:100%;
background-color:#666666;
color:white;
}
-->
</style></head>
<body>
<div id="frame">
<div id="header">ヘッダー</div>
<div id="content_right">本文
</div>
<div id="left">左メニュー部分</div>
</div>
<div id="footer">フッター</div>
</html>
たびたび恐れ入ります。
丁寧な解説にとても解りやすかったです。
文字サイズ、ラインハイトなど固定の件には、同意致します。
あれこれと作業していて左メニューのみの固定というということは
ヘッダー部分の仕様が変更になったりした場合、位置を微調整してあげれば大丈夫ということですね。
大変勉強になりました。
とても感謝しております。
本当にありがとうございます。
No.2
- 回答日時:
フッタは枠の外側なので、メインの記事がどんなに長文でも
それに伴って枠が下方に伸びるだけで、フッタはあくまで底辺に固定されるはずです。
実際にこちらでもやってみましたが、結果そのようになりました。
ありがとうございます。
「position」で固定したらやはりフッタにメインの文章が被ってしまいました。
お手数ですがお手本のソースを参考にさせていただけますか?
よろしくお願い致します。
No.1
- 回答日時:
div#は、div #に
位置を指定するには「position」を学ばれるといいです。
また、divがどう取られているかを知るために、</style>の前に
div{border:#f00 solid 3px}
等、実際には使っていない色で枠を表示されると視覚的に理解できます。完成したら、
div{border:#f00 solid 3px}
は外せばいいので、お試しあれ。
ありがとうございます。
さっそくdiv{border:#f00 solid 3px}を挿入し
位置関係を把握してみました。
positionで絶対値により左メニューとメインを固定してしまうと
テキストを流し込んだらフッターに文字が被ってしまいました。
現状の
■
■
のようにズレなくはなりましたが・・・
相対的にフッタがー下がっていくようにはならないのでしょうか・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで指定した背景画像にリンク...
-
font-sizeが効かない
-
どんな場合でもブラウザ画面の...
-
マウスオーバー時に画像と一緒...
-
セル内のリンク文字を中央に配...
-
chromeではbackgroundの画像が...
-
IEの場合に、リストに余白がで...
-
CSSでボックスのheightが0になる
-
<form>タグのプルダウンメニュ...
-
リンクの下線と文字の間隔を開...
-
ホームページ スマホサイズ
-
CSS3の記述の一部が反映されない。
-
隙間ができてしまいます。
-
「dt」「dd」の内容を一列で表...
-
写真と文字の大きさをそろえたい
-
CSS:hoverでナビボタンの背景画...
-
CSSを使ってテーブルを上下中央...
-
Liで背景画像が表示されない (...
-
ラジオボタンやチェックボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報