• ベストアンサー
  • すぐに回答を!

CSS初心者です。

  • 質問No.5978100
  • 閲覧数67
  • ありがとう数22
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 82% (169/205)

CSS初心者です。

宜しくお願いします。
CSSで既に組まれているものを編集したいのですが、Footer部分を一番画面の下にさげたいのですが。
CSSではどのように設定したらよいのでしょうか。。今Bodyの高さを長くなるよう設定したら、
Footer部分が中心にきてます。

すいません。教えてください。
※DreamWeaverはCS4を使用していて、CSSの内容が全て英語表記なので、そちらで
教えていただけると助かります。

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

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

ベストアンサー率 42% (401/933)

こんばんは
>Footer部分を一番画面の下にさげたいのです
質問の文章からは、詳細はよく分からないのですが、「多分こんな感じ?」というサンプルを提示します(このサイトに投稿する都合上、インデントを全角スペースにしています。テスト表示するときには半角スペースに置換してください。)。


なお、
>DreamWeaverはCS4を使用していて、CSSの内容が全て英語表記なので
DreamWeaverに限らず、CSSは英語表記です。「慣れるしかない」と諦めてください。

HTMLのみ
<html>
 <head>
 </head>
 <body>
  <table border="1">
   <tr>
   <td colspan="2">ヘッダー</td>
   </tr>
   <tr>
    <td>メニュー</td>
    <td>本文</td>
   </tr>
   <tr>
   <td colspan="2">フッター</td>
   </tr>
  </table>
 </body>
</html>

HTML+CSS
<html>
 <head>
  <style type="text/css">
   .header{
    border:1px solid #000000;
   }
   .menu{
    border:1px solid #FF0000;
    float:left;
   }
   .main{
    border:1px solid #00FF00;
    float:left;   }
   .footer{
    border:1px solid #0000FF;
    clear:all;
   }
  </style>
 </head>
 <body>
  <div class="header">ヘッダー</div>
  <div class="menu">メニュー</div>
  <div class="main">メイン</div>
  <div class="footer">フッター</div>
 </body>
</html>
お礼コメント
akkun11

お礼率 82% (169/205)

ご丁寧に有難うございます。
投稿日時:2010/06/22 11:58

その他の回答 (全1件)

  • 回答No.2
それは、footerより上部の部分に対して、footerの回り込み現象が働いているためです。
footerの左右に何も配置したくないなら、footter全体を囲む部分のCSSに、

clear-both;

を追加すれば、回り込みを回避できます。
clear-bothは、floatさせた後に多く用います。
お礼コメント
akkun11

お礼率 82% (169/205)

ご丁寧に有難うございます。
投稿日時:2010/06/22 11:58
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ