• ベストアンサー

divとdiv、本文とフッタの境目が開きます。

HTMLをテキスト打ちしているのですが、 本文とフッタの間、divとdivの境目が開いてしまい、困っております。 こちらにありますので、原因がお分かりの方がいらっしゃいましたら どうぞ教えて下さい。 http://pppits.com/work/demo/abend_demo/index.html ソースを開いていただければわかりますが、 記事1・2と記事3の境目です。 記事1・2が長くなった場合に、記事3とフッタをその下につけたいのですが うまくいきません。 納期が明日で、切羽詰っております。 宜しくお願い申し上げます。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

じっくり拝見したいところですが時間が今無いので、WEBデザインカテで再度質問を立ち上げてみては? ピンポイントな回答がつくかもしれません。 http://oshiete.goo.ne.jp/category/258/

h-hinomoto
質問者

お礼

お忙しい中ありがとうございます。 改めて質問し直しましたので、こちらは終了させていただきます。 がんばります。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.1

拝見したのですが、デザイン自体が壊れてますよ。 当方で確認したのはIE8.0とFireFox3.6ですが、FFでは完璧に崩れています。 それは別に気にしなくていいのでしょうか。 ご質問についてですが、 padding-bottom、 くさいですね。

h-hinomoto
質問者

お礼

早速のご回答ありがとうございます! デザインの崩れの件、失礼致しました。 修正して上書きしておりますので今一度見ていただけないでしょうか。 フッタが妙な位置で固定されてしまいます。 更にFFでは「記事3」が丸ごと表示されないのですが…

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 4カラム目がおかしな位置にきてしまいます

    HTMLをテキスト打ちしているのですが、 4カラム目がおかしな位置にきてしまい、困っております。 こちらにありますので、原因がお分かりの方がいらっしゃいましたら どうぞ教えて下さい。 http://pppits.com/work/demo/abend_demo/index.html ソースを開いていただければわかりますが、 記事1・2と記事3の境目です。 記事1・2が長くなった場合に、記事3とフッタをその下につけたいのですが うまくいきません。 納期がすぎており、切羽詰っております。 宜しくお願い申し上げます。

    • ベストアンサー
    • CSS
  • フッター固定時のdivの背景について

    フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで(フッターの上まで)表示させるために何かよい方法はありますでしょうか? <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • <div>テキスト</div>

    HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか? 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか?

    • ベストアンサー
    • HTML
  • DIV内の padding について

    下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか? よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }

    • ベストアンサー
    • HTML
  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で(間)中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ~~~~~~~~ <div id="head">~ヘッダー~</div> <div id="flashcontents">~Flashデータ~</div> <div id="foot">~フッター~</div> ~~~~~~~~ 【CSS】 ~~~~~~~~ html,body {margin:0; padding:0; overflow:hidden;} #head{~サイズなどを指定~} #flashcontents{margin: 0; height: 100%; width: 100%;} body > #flashcontents {height:100%; position: absolute;} #contents { position: fixed; overflow:hidden; bottom:0; 他サイズなど指定…} ~~~~~~~~ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか? よろしくお願い致します。

    • 締切済み
    • CSS
  • テキストリンクとテキストで、高さが違ってしまいます。これを直したいのですが…

    左側のテキストリンクは左上に、右側のテキストは右上に表示させたいのですが、FxとIEで高さがずれてしまいます。どちらのブラウザでもIEのように高さが合うようにしたいのですが… 以下、ソースです ---------------------------------------- HTML <div id="footer"> <a href="index.html">左端に揃えたい</a> <p>右端に揃えたい</p> </div> CSS #footer a { float: left; } #footer p { float: right; } ---------------------------------------- 素人質問で申し訳ありません。いろいろ考えた結果、左側はリンクで、右側がテキストだから高さが合わないのではないかと思っているのですが、対策が取れませんでした。

    • ベストアンサー
    • HTML
  • 枠線でメイン部分を囲み、フッターを一番下にもってくるには?

    お世話になります。 標準モードで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>

    • ベストアンサー
    • HTML
  • footerを{position:absolute;bottom:0p

    footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。            これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか? 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって) </div> <div id="mainContainer"> ・・・・中略(3カラム等あって) </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。

  • css外部ファイル(ヘッダ、フッタ)の書き方

    素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを(テキストエディタを使って)書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 ---------- <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; ---------- のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか? 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには?

    お世話になります。 タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。 なにかいい方法がないか、ご教授いただけると幸いです。 尚、テーブルは使わない方法でお願いします。 以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#h100 { height:100%; background-color:#eeeeee; } div#header { background-color:black; color:white; } div#container { background-color:#ffffee; } div#footer { background-color:black; color:white; } --> </style> </head> <body> <div id="h100"> <div id="header">ヘッダー</div> <div id="container">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • BOSS GT-1をオーディオインターフェースとしてcubase pro12で使用しようとすると、MIDIトラックの音程が狂ってしまいます。原因や解決策を教えてください。
  • BOSS GT-1を使用してMIDIキーボードを鳴らすと、鳴らした音と実際の音程が一致しない問題が発生しています。また、音程のズレも感じます。原因や対処方法を教えてください。
  • BOSS GT-1をオーディオインターフェースとして使用している際に、MIDIトラックの音程がおかしくなる問題が発生しています。音程のズレや鳴らした音と実際の音の一致しなさに困っています。解決策を教えてください。
回答を見る