- ベストアンサー
フッターがウインドウの一番下にいきません。
Dreamweaver CC2014を使ってWebサイトを作っています。 レイアウトを決めるために画像を作り、これを基に、フッターを常にウインドウの一番下にきてほしいのですが、ヘッダーの下にきてコンテンツの上に浮いてしまったり、もしくはサイドメニューの下に沿って表示してしまったりと、どうしても思うようにレイアウトできません。 どのようにHTMLとCSSの設定をすれば、この画像のようにレイアウトできるのでしょうか?
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- dreamweaver cs3 でのホームページ作成について
お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。 この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み(ヘッダー部分のメニューや左メニューのレイアウト)についてはやはりテーブルでのレイアウトが正しいのでしょうか? まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
- フッターの位置を一番下に表示させたいのですが・・・
表示方法について質問をさせてください。 現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。 しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。 コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。 そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。 サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。 これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか? ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。
- ベストアンサー
- HTML
- FirefoxだとCSSで作ったフッターが崩れてしまいます
お世話になります。現在、CSSにて2段組にて ヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを 切り分けてサイトを作っておりますが IEだと私が意図した通りに表示されるのですが、FireFoxだと フッター部分のレイアウトが、コンテンツ部分にかぶってしまい レイアウトがぐちゃぐちゃになってしまいます。 #cover { width: 700px; height: 100% } #menu { width: 150px; height: 100%; float: left } #main { width: 550px; height: 100%; float: right } #footer { width: 700px; clear: both } こちらが、htmlです。 <div id="cover"> <div id="main">コンテンツ</div> <div id="menu">メニュー</div> <csobj csref="a.html" h="259" occur="27" t="Component" w="700"> <div id="footer">フッター</csobj></div> </div> ※このcsobjは、Goliveのコンポーネント機能を使って 1つの外部ファイルからリンクさせることによって、 ヘッダー部分に変更が生じたら、全ページを一括で更新できる 機能を使っています。SSI(サーバーサイドインクルード)みたい なやつでしょうか。 とても困っていますので、詳しい方ぜひご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- htmlでヘッダやフッタを共通化したい
ヘッダ、サイドバー、コンテンツ、フッタというレイアウトで 100ページぐらいあるWebサイトを構築する場合、 ヘッダやフッタに変化がないのであれば、共通化したくなります。 (変更があった時に、1箇所変更すればいい、という風にしたいため) そこで、例えば、PHPが使えるところであれば、includeすればいいのですが、 使えない場合、JavaScriptを使えば可能ではあると思います。 しかし、JavaScriptはOffにされた時のことを考えると このやり方はリスクがあるような気がします。 そこで、知りたいのですが、htmlを共通化したい場合、 PHPなどを使う以外に、どんなやり方があるのでしょうか? できれば、サーバサイドに仕込む方法ではないやり方でお願いします。
- ベストアンサー
- HTML
- 詳しいかた、教えてください
この画像と全く同じものを作りたいのですが、cssがうまく出来ません。 ヘッダー、ナビゲーションメニュー、コンテンツのH1の下の余白の設定、 フッターがうまくいきません。 特にナビゲーションメニューのボタンが中央に寄らない、フッターの背景や配置の設定、 どのようなcssにしたらいいでしょうか!?
- 締切済み
- CSS
- フッターのボーダーが消えてしまいます(cssとhtmlで2カラムのレイアウト)
cssとhtmlで2カラムのレイアウトのウェブページを作っています。 左のカラムがナヴィゲーションメニューになっています。 フッターにborderを設定しているのですが、borderの上のラインが消えてしまうことがあります。 htmlはこんな感じです。 <div id="contents"> </div> <div id="side"><!--左メニューここから--> <ul id="menu"> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> </div><!--左メニューここまで--> <div id= "footer" ><!--フッターここから--> Copyright・・・ </div><!--フッターここまで--> 実験してみたところ、左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、 </li>で終わってしまうと、ボーダーが消えてしまうようです。 フッターに背景色をつけてみたところ、本来のフッターの領域からはみだして背景色がついていました。 やはり、</li>の後になんらかの文字を入れると、適正な位置に背景色がつくのです。 なぜでしょうか。
- ベストアンサー
- CSS
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 (ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定) イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ(固定) (スクロールバーなし) -------------------------------- コンテンツ (スクロールバーあり) -------------------------------- フッタ(固定) (スクロールバーなし) -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- 楽天市場のデザインのコーディングについて
今度、楽天市場に出展するのですがコーディングについて教えて下さい。 まずfireworksでデザインした物をDreamweaverでコーディングした後、楽天の説明文にソースをコピー&ペーストをしたのですが・・・うまくいきません。 具体的にはヘッダー→コンテンツ(左にサイドメニュー・右にコンテンツ)→フッターというデザインでどのページに行ってもヘッダー・サイドメニュー・フッターは共通で表示される様にしたいのですが、商品の詳細画面になるとメニューの下に商品情報が出てきてしまいます。 何か良い方法があれば教えていただけますでしょうか? 宜しくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- ヘッダー・フッター固定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
- ヘッダ・フッタの定義
ブラウザでヘッダ・フッタを印刷するように指定できますが、これを、HTML(Javascript・cssなど)で指定することは可能でしょうか? やりたいことは、あるHTMLを印刷したときに、ブラウザの設定がどうなっていても、フッタ(URL)を表示させたくありません。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
丁寧に教えていただきありがとうございました。webサイト制作をはじめたばかりで右も左も分からない状態ですが、これからも制作を続けてたくさん学んでいきたいと思います。