• ベストアンサー

フッターの位置をスタイルシートで

HTML&CSSの勉強を始めたばかりです。 ヘッダー、内容3カラム組み、フッターという形にしたいのですが、どうしてもフッターが最下部に来てくれません。 フッターを3カラムの下に来させるには下記のほかに何が必要なのでしょうか。本とにらめっこしながらプロパティを足したり引いたりはしているのですが。 かなり基本的なところだと思いますがお願いいたします。 HTML------ <div id="header"> あいうえお </div> <div id="main"> <div id="mainleft"> かきくけこ </div> <div id="maincenter"> さしすせそ<br> まみむめも<br> や ゆ よ </div> <div id="mainright"> なにぬねの </div> </div> <div id="footer"> たちつてと </div> CSS------ div#header{width:600px;} div#main{width:600px;} div#mainleft{top:40px;width:100px;float:left; position:absolute ;} div#maincenter{top:40px;width:400px;float:left; position:absolute ;left:105px;} div#mainright{top:40px;width:100px;float:left; position: absolute;left:510px;} div#footer{width:600px;position: relative;}

  • campt
  • お礼率78% (11/14)
  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.2

CSSを div#header{width:600px;} div#main{width:600px;} div#mainleft{width:100px;float:left;position:relative;} div#maincenter{width:400px;float:left;position:relative ;} div#mainright{width:100px;float:left;position: relative;} div#footer{clear:both;width:600px;} にしてお試しあれ。

campt
質問者

お礼

できました。 ありがとうございます。 absoluteでleftの位置やtopの位置指定 が変に邪魔していたみたいです。 上がおかしいからclear:both;も効かなかったのかな。

その他の回答 (1)

  • partita
  • ベストアンサー率29% (125/427)
回答No.1

div#footer {clear:both;}

campt
質問者

補足

ありがとうございます。 でも、これを加えても、ヘッダーのすぐ下、3カラムと重なった位置なんです。

関連するQ&A

  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • css固定したフッターが本文と重なってしまいます

    #all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。

    • ベストアンサー
    • HTML
  • スタイルシートでうまくフッター部分を配置設定する方法を教えてください。

    スタイルシートに詳しい方に教えていただきたいのですが、 今ホームページを作っていて、 フッター部分の設定に困っています。 タイトルカラム 左カラム コンテンツカラム フッターカラム というページ構成で 絶対指定で top と left を使って 各要素の位置指定をしているのですが、 フッター部分だけうまくいきません。 フッターに 「Copyright (C) ●● All Rights Reserved.」 という文言をタイトルカラムと同じ width で入れたいのです。 なぜか title カラムの下に表示されたり、 画面の一番上に表示されたりするのです。 bottom を使用するのかな? と思ったのですが、それでもうまくいきませんでした。 できるだけページ全体を table タグを使って デザインしたくなくて、スタイルシートであれこれ やっているのですが、苦戦しています(汗)。 スタイルシートを下記しますので、 お知恵をお貸しくださいませ。 -------------------- div.title { position: absolute; top: 0px; left: 20px; width: 800px; background-color: #ffffff; height: 412px; } .left { width:185px; position: absolute; top: 415px; left: 20px; background-color:#ffffff; } .content { position: absolute; top: 415px; left: 205px; width: 600px; text-align: left; } .footer { position: absolute; bottom: 0px; left: 20px; width: 800px; text-align: left; height: 100px; }

    • ベストアンサー
    • HTML
  • CSSレイアウトでフッターをうまく配置出来ません。

    CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px;  margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }

    • ベストアンサー
    • CSS
  • フッターを固定したい…

    上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}

    • ベストアンサー
    • HTML
  • FOOTERを3カラムで配置したい

    こんにちは。いつもお世話になっています。 質問は題名の通りです。footerを3カラム使い、3列で配置したいと考えています。 CSS ---- /* フッター */ div#FOOTER { width:100%; border-top: 1px solid #204460; border-bottom: 4px solid #204460; background: #507EA1 ; } div#FOOTERleft{ position:absolute; left:0; width:33%; } } div#FOOTERmiddle{ position:absolute; width:34%; margin-left:33%; margin-right:33%; } div#FOOTERright{ position:absolute; right:0; width:33%; } --- html <div id="FOOTER"> <div id="FOOTERleft"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> <div id="FOOTERmiddle"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> <div id="FOOTERright"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> </div> と書いたのですが、なぜかFOOTERleftとFOOTERmiddleの間に隙間ができ、FOOTERrightは他2つの下側に配置されます。 手元のWeb標準の教科書を参考に頑張ってみましたが、うまくできませんでした。 どなたか正常に配置することができる書き方を教えてください。 どうかよろしくお願いします。

    • ベストアンサー
    • CSS
  • floatをfooterに指定すると正しく表示ができない。

    floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか?わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </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; ######ココマデ よろしくお願いします。

  • スタイルシートで背景を伸ばしたい

    以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。 色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。 どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css"> <!-- body{ font-size: 10pt; text-align: center; } #container { width: 752px; border-left: 1px solid #599E3D; border-right: 1px solid #599E3D; } #main { float: right; width: 570px; background: #FFFFFF; } #side { float: left; width: 180px; background: #E0FFFF; border-right: 1px solid #F2992F; } --> </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう