- ベストアンサー
フッターの位置が真ん中にならない・・・
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
すでに出ている回答のように「見た目を直す」方法はまあいくつかあると思うのですが、ID「footer」より上の部分がすべてすでに ID「top」の入れ子になっているので、「理屈的に（あるいは気持ちよさの観点から）どないやねん」という感じがします。 単語の意味としては対になるところの ID「header」も存在するので、階層的にはそれと同じようにしたほうがよいような気がします。 たとえば、私は「top」、「middle」、あよび「bottom」、あるいは「head」、「body」、および「foot」などとして、左右分割も含めていろんな記事は「middle」や「body」に入れておかないと気持ち悪いです。 もしくは、footer より上が全部 top なら、footer の上を一つ作ってそれを「bottom」とするなど、きちんと理屈的にしておけば、気持ちよいうえに、見通しもよく、錯誤も減ると思います。
その他の回答 (3)
- mbx
- ベストアンサー率40% (16/40)
まだ直っていないようなら、とりあえず、top の中に footer も入れてしまってはいかがですか。 全部 top になってしまいますが、理屈より「とりあえず」を優先ということで...
お礼
なるほど。グッドアイディアです(#^.^#)。
- mbx
- ベストアンサー率40% (16/40)
釈迦に説法的ですが: top - middle -bottom top <-> bottom head -body - foot [tail] です。
お礼
なるほど、ご回答ありがとうございます。
- t_ohta
- ベストアンサー率38% (5078/13272)
スタイルシートの #footer に margin: 0 auto; を追加したら直りませんか。 左右のマージン設定が無いので左寄せになってるだけだと思います。
お礼
やってみたのですが、効かなかったです゜(つд⊂) なかなかむつかしいですよね・・・(つд⊂)
補足
あ！スタイルシートの方か！！なるほど(#^.^#)ご回答ありがとうございます。
関連するQ&A
- フッターのボーダーが消えてしまいます（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
- ＨＰレンタルサイトのフッターの位置調整について
http://shinsama1980.web.fc2.com/hyakuhoh-data4.htm このＨＰのフッターに「Powered by FC2ホームページ」という文字でレンタルサイトへのリンクがあるのですが、 このサイトをスマホで見た時のフッターが中央から左の位置にズレてしまいます。 （フッターは中央寄せの設定） これをスマホで見た時でも中央寄せで表示するには、どうすれば良いのでしょうか？ Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。
- ベストアンサー
- HTML
- 【HP制作】２カラムを3カラムに変更したい！
現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。 現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。 ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、 画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。 因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、 どうしても(1)→(2)→(3)の順番になりません。 独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。 お分かりの方がいらっしゃったら、どうかよろしくお願いします。 初心者レベルなので、分かり易く教えて頂けると助かります。 どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right; ←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/ ←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div> <!--***** メイン部分 *****--> <div id="main"> </div> <!--*****// メイン部分 *****--> <!--***** 左サイドメニュー *****--> <div id="leftside"> </div> <!--*****// 左サイドメニュー *****--> <!--***** 右サイドメニュー *****--> ←ここを追加しました。 <div id="rightside"> </div> <!--*****// 右サイドメニュー *****-->
- ベストアンサー
- CSS
- footerのclear:bothが効きません
教えてください。 コーダー初心者です。 タイトルどおりフッターで指定したクリアーが聞きません。 上ヘッダーで、左にナビ、右にコンテンツ 右コンテンツ内に右幅いっぱいの文章をその下に右コンテンツを二段組した文章をいれました。 フッターは現在右コンテンツ側によってしまい。 左ナビしたまできてくれません。 右コンテンツを幅一列で組んでいたのですが、二段組のレイアウトを追加指定したあたりから フッターがおかしくなりました。 原因は何でしょうか？ 教えてください。 下記はhtmlです。 <div id="wrapper"><!--全体囲み --> <div id="head">ヘッド</div> <div id="left">ナビ</div> <div id="right">コンテンツ<!--右側 --> <div id="section01"> <div class="section01" > 横一文章 </div> <div class="section01" id="Benefits"> 右文章 </div> <div class="section01" id="Lose"> 左文章 </div> </div><!--右囲み終わり --> <div id="footer"><!--フッター --> </div><!--フッター終わり --> </div><!--wrapper終わり --> </body> </html>
- ベストアンサー
- CSS
- 範囲指定印刷での位置（css)
media printを使って、印刷範囲を指定したいです。 サイトは大きく以下のように構成されています。 サイト全体を囲む div#base（サイズ固定、センターぞろえ） div#baseの中に、 ヘッダ #header（上段、左右いっぱい） メニュー .area_menu（中央段左。float:left） メイン .main（中央段右。float:right） フッタ #footer（下段、左右いっぱい） となっています。 上記各要素の中に子要素は諸々入っていますが、上記の大箱たちはこれ以上入れ子になってはいません。 ※例えば、「メニューとメイン」を合わせて別の箱でくくったりはしていません。 このうちの、メイン部分のみ、印刷したいです。 現在、 @media print{ .area_menu{display:none;} #footer{display:none;} #header{display:none;} .main{width:100%; float:none; color:#666;} } としています。 確かにメイン以外の部分は消えるのですが、本当にそのままの位置で消えただけという感じで、メインの左側に大きな余白ができてしまっています。 印刷サイズを拡大・縮小してみてもやはり同じで、左側の白い部分（メニューがあった部分）も「印刷物」として認識してしまっています。 印刷範囲からはみ出るくらい拡大すると、左に余白を残した状態で、右側は印刷可能範囲からはみ出て次ページに行ってしまいます。 どうすれば、「メイン部分だけ」を左に持ってこれるでしょうか？ 検索したのですが見つからなかったため、 適当に指定のfloatの部分を右や左にしてみたり、clearを入れてみたり、「div#baseを読んでるのか？」と思い、div#baseをdisplay:noneしてみたり…。 初心者なりに色々試してはみたのですが、どうにもうまくいきません。 float:rightがかかっているボックスを、左寄せにして印刷する方法をお願いします（＞＜
- 締切済み
- CSS
- 画像の位置を変えるタグについてですが・・
画像の位置を変えるタグについてですが・・ 「左寄せ」「中央」「右寄せ」の画像の位置を変えるタグは ありますが、少しだけ右にずらしたい時などのタグは ありますでしょうか？ 例えば、画像が左に寄りすぎているので 全角スペース 1つ分程度、右にずらしたい というような感じです。 宜しく御願いします。。
- ベストアンサー
- その他（インターネット・Webサービス）
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- InDesign CS4/テキストフレーム内の文字寄せの指定方法
InDesign CS4/テキストフレーム内の文字寄せの指定方法 InDesign で、タテ組のテキストフレーム内のテキストを、フレーム内で右寄せにするかセンターか左寄せか指定したいとします。 CS2 では段落コントロールパネルに、四角の中の川の字の位置で「右よせ」「中央」「左よせ」を表したボタンがあり、それをクリックすればよかったのですが、CS4 ではそのボタンが見当たりません。あれは廃止されたのでしょうか。 CS4ではそのつどテキストフレーム設定ウィンドウの「テキストの配置」ポップアップメニューを使うしかないのでしょうか。 Mac OS 10.5.8 です。
- ベストアンサー
- グラフィックソフト
- Word：テキストボックス内の文字の配置
Word2003を使っています。 テキストボックスの中の文字を、垂直方向で中央寄せしたいのですが、 どこで設定すればよいでしょうか。 水平方向なら大抵デフォルトでツールバーに入っていそうな「中央揃え」ボタンで可能なのですが。 配置したテキストボックスに対して右クリックし、 色々なメニューを探しているのですが見つかりません。 エクセルだと配置タブがあるからできるのですが。
- ベストアンサー
- オフィス系ソフト
- 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のコンポーネント機能を使って １つの外部ファイルからリンクさせることによって、 ヘッダー部分に変更が生じたら、全ページを一括で更新できる 機能を使っています。SSI(サーバーサイドインクルード)みたい なやつでしょうか。 とても困っていますので、詳しい方ぜひご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
すみません。入れ子とかめっちゃめちゃになっている部分も多く、ツギハギの知識で作っているので、見た目だけ直している部分も多く、理想的にはそうできたらなあと思うのですけどね(^^ゞご回答ありがとうございます。
補足
いじっているうちに なんとか解決できました。ありがとうございました。