- ベストアンサー
CSS フッターのコピーライトが最下位に配置しない
LimeGreen5の回答
こんにちは。 <div id="secondary" class="sidebar-area-top" role="complementary"> このパートが position: absolute で指定されたため、親要素の位置・高さから独立したことが原因のようですね。 現在2段組になっている <div id="content" class="site-content-top"> のパートが3段以上になったらcopyrightはコンテンツの一番下に落ちるかと思いますが、現状が最終形のレイアウトなのかは不明ですので、とりあえず現段階のCSSを手っ取り早く調整してみましょう。 style-top.cssの507行目 @media screen and (min-width: 960px) .site-content-top { position: relative; } このブロックに最小天地幅指定をかけてしまえば、 とりあえずcopyright行は下に落ちます。 （デベロッパーツールで確認しました） .site-content-top { position: relative; min-height: 860px; } 860pxとしたのは、見た目で合わせました。 お好みの数値を入れていただければ。 ブラウザごとの確認が必要かと思いますが、おためしください。
関連するQ&A
- サイドのウィジェットが下がってしまっている
http://yesdeafcan.com/ 右のサイドのウィジェットが下がっています。 ボックスのはみ出しだと思うのですが、うまくいきません。 アドバイスをお願いします。
- ベストアンサー
- HTML
- コピーライト下・フッター一番下に色をつけたい
添付データのように、コピーライト下・フッター一番下にグレーの色をつけたいと考えております。 この点がうとく、上級者の方にお力を是非お貸し頂ければと存じます。 CSSとhtml記述を提供頂けますと幸いでございます。
- ベストアンサー
- CSS
- フッターの回り込みを防ぐ方法を教えてください（ＣＳＳ）
ブラウザ：ＩＥ７ 左右の二段組みで、左に navi ボックス、右に content ボックスの場合 div#content {float: right; width: 100%; margin-left: -150px; margin-right: auto} div#navi {float: left; width: 150px} div#footer {clear: both} としたのですが、フッターが navi の下に回り込んでしまいます。 {clear: both} は navi の幅 150px の中だけで float が clear されているだけです。 フッターが回り込まないようにするには、どうしたら良いか分かりません。 よろしくお願いいたします。
- 締切済み
- HTML
- フッターのボーダーが消えてしまいます（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
- 『css/html』フッターを下部＆特殊な移動
こんばんは。 現在Homepageを自分で作成しているのですが 頭が混乱しておりまして・・・、解決策が見つからないのでこちらに質問させていただきました。 結論としましては フッターをある範囲だけ移動(可変)するようにしたい。 現在は ブラウザ上部よりheight：650pxはメインエリアとして情報を記述。 その下にフッター(hright：50px)を配置。 フッターは下部に固定しメインエリアには食い込まない様に設定。 (ブラウザがheight：700px以下になるとスクロールバーが出現しスクロール) ブラウザがheight：700px以上の場合にはメインエリアを延ばして対応。 ここまでの動きはこんな感じです。 http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html ここまでは上記のサイト等を調べつつ作成する事が出来たのですがこの後が問題で フッターの最大位置（？）最大下部位置（？）を1000pxに設定し ブラウザが1000px以上になるとフッターの上部は固定され下部が伸びる（若しくは現れる※1） という動作にしたいのですが cssでその様な事が可能なのでしょうか？ 質問文を書くのにも矛盾が生じていると思います。 不可能なら不可能で仕方ないのですが・・・。 何卒、よろしくお願い致します。 ※1. 現れるというのは最初からフッターにheight：500pxくらいの画像を用意し それが見えてくるという意味合いです。
- ベストアンサー
- HTML
- フッターの位置が真ん中にならない・・・
右サイドメニューのテキストの配置を中央から左よせに変更したら、フッターまで左よりになってしまいました。<div>が閉じられていないのかもと思い、右サイドバーの最後のテキストの後に</div>を追加してみましたが、フッターのテキスト位置は左に寄ったままでした。 なぜに急にフッターをいじってないのにフッターのテキストが左よりになってしまったのでしょうか？フッターのテキストを中央寄せに戻すにはどうしたらよいでしょうか？
- ベストアンサー
- ネットトラブル
- 動画を掲載すると最下部のフッターを突き抜ける
CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html
- ベストアンサー
- CSS
- CSSで「float: left;」の次にフッタをうまく表示させるには？
http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。 が、実はもう一つ、新たに表示に際して困ったことが起きています。 現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。 さて。 このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。 この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。 もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。 ご指導、よろしくお願いします。
- 締切済み
- HTML
- [CSS] 常にフッターは下部に表示 IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> <div id="container"> <div id="main"><p>内容</p></div> <div id="footer">Copyright</div> </div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
- ＣＳＳレイアウトについて
今まで参考書を見ながら参考書どおりにＨＰを作っていましたが、 それでは自分どおりのＨＰが作ることができないと思い、 タグ辞典などを見ながら自分でＨＰ作成を行うことにしたのですが、 ＣＳＳにて５個のボックスを作成して５個それぞれで 色分けしたあとにpositionにて位置を指定しましたが うまくいきません。 自分が考えているレイアウトは １個目のボックスはタイトルで一番上にあり ２個目のボックスは左メニューで左側にあります。 ３個目のボックスはメインスペースで中央にあります。 ４個目のボックスは右メニューで右側にあります。 ５個目のボックスはコピーライトで一番下にあります。 どなたか解決できる方のご回答をお待ちしております。 またこの場にて簡単なタグを記載していただければ幸いです。
- ベストアンサー
- HTML
お礼
コメントをありがとうございます。 デベロッパーツールでmin-height: 860px;を追加しましたところ、下に落ちました。 助かりました。