フッターを表示させたい
Adobe Dreamweaverで、HTMLを用いて
練習サイトを作っています。
HTMLと、CSSでフッターを作っているのに表示できません。
打ち間違えがないか確かめたり、値を変更したりしてみましたが解決できなかったので
質問させていただきました。
以下にコードをコピペしますので診てください。
(CSS)
<!doctype html> <html> <head> <title>住宅設計施工の美浜工務店</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <header> <div id="Logo_area"> <h1><a href="#"><img src="imagesのコピー/Logo.gif" alt="美浜設計株式会社"></a></h1> </div> <div id="Navi_area"> <div id="banner"><a href="contact.html"><img src="imagesのコピー/Contact.gif" alt="お問い合わせ"></a></div> <ul> <li><a href="contact.html">資料請求</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">リクルート</a></li> <li><a href="#">トップ</a></li> </ul> </div> </header> <main> <img src="imagesのコピー/MainImage.jpg" alt="メイン画像" > <div id="Side_navi"> <ul> <li id="navi01"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Top_over.gif" alt="トップ" ></a></h2> </li> <li id="navi02"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Guide_out.gif" alt="会社概要" ></a></h2> </li> <li id="navi03"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Owners_out.gif" alt="実例集" ></a></h2> </li> <li id="navi04"> <h2><a href="#"><img src="imagesのコピー/SideNavi_ModelHouse_out.gif" alt="モデルハウス" ></a></h2> </li> <li id="navi05"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Blog_out.gif" alt="匠のブログ" ></a></h2> </li> <li id="navi06"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Event_out.gif" alt="見学会" ></a></h2> </li> <li id="navi07"> <h2><a href="#"><img src="imagesのコピー/SideNavi_Recruit_out.gif" alt="資料請求" ></a></h2> </li> </ul> </div> <div id="Main_box"> <div class="MainBox_item"> <div class="MainTitle"><h2>トピックス  [TOPICS]</h2></div> <img src="imagesのコピー/MainBox_Image.jpg"> <div class="MainBox_right"><a href="#">人気のスマートハウスシステム</a><br><br> Mi SmartSystem<br><br> 最新のテクノロジーを採用し、地球環境にやさしい省エネ住宅を実現!!</div> </div> 新着情報 [NEWS]@charset "UTF-8"; /* CSS Document */ body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "sans-serif"; margin: 0; padding: 0; width: 100%; height: 100%; background-image: url("imagesのコピー/body_border.gif"); background-repeat: repeat-x; } #container { width: 900px; height: 600px; margin: 0px auto 0px auto; float: none; } header{ height: 120px; width: 900px; } header h1{ margin: 0px; padding: 0px; } header #Logo_area { float: left; height: 100px; width: 300px; } header #Logo_area h1 { margin-top: 40px; } header #Navi_area { float: right; height: 100px; width: 580px; } header #Navi_area #banner{ float: right; margin-right: 30px; margin: 0px; padding: 0px; } header #Navi_area ul{ list-style-type: none; font-size: 10px; margin-top: 100px; } header #Navi_area li{ display: inline; float: right; width: 70px; border-left-style: solid; border-left-width: 1px; border-left-color: #050505; padding-left: 8px; } header #Navi_area li a{ text-decoration: none; color: black; } header #Navi_area li a:hover{ color: #09f; text-decoration: underline; } main{ height: 600px; width: 900px; } main #Side_navi { height: auto; width: 210px; float: left; margin-top: 30px; } #Side_navi ul { margin: 0px; padding: 0px; list-style-type: none; border-top-width: 1px; border-top-style: solid; border-top-color: black; } #Side_navi ul #navi01 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Top_out.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi02 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi03 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Owners_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi04 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_ModelHouse_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi05 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Blog_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi06 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul #navi07 { margin: 0px; padding: 0px; width: 210px; height: 46px; background: url("imagesのコピー/SideNavi_Recruit_over.gif")no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; } #Side_navi ul a:hover img { visibility: hidden; } #Side_navi ul h2 { margin: 0px; padding: 0px; } main #Main_box { height: auto; width: 450px; float: left; margin: 30px 0px 0px 20px; } #Main_box .MainBox_item { width: 450px; float: left; margin-bottom: 20px; } #Main_box .MainBox_item .MainTitle { background-image: url("imagesのコピー/MainTitle.gif"); width: 450px; height: 25px; margin-top: 0px; margin-bottom: 7px; } #Main_box .MainBox_item .MainTitle h2{ font-size: 12px; color: #4A4A4A; margin: 0 0 0 10px; padding: 1px; } #Main_box .MainBox_item .MainBox_right { font-size: 11px; float: right; width: 250px; } #Main_box .MainBox_item img { float: left; } #Main_box .MainBox_item a { color: #F63; } main #Banner_box { height:300px; width: 200px; float: right; margin-top: 30px; background-color: blue; } hooter{ clear: both; height: 20px; width: 900px; background-color: #000; font-size: 10px; text-align: center; color: #FFF; line-height: 17px; margin: 0 auto 0 auto; } ```HTML
2013年8月12日 雑誌に掲載されました
注文住宅専門誌「The Housing」に当社の建築技術が紹介されました。
2013年8月10日 新築見学会開催のお知らせ
9月10日(土)、9月11日の2日間、当社施工中の新築住宅の見学会を建て主様の許可を得て開催致し
ます。引き渡し直前の新築住宅が見学できる貴重な機会です。みなさまのご参加をお待ちします。
2013年7月20日 最新スマートハウス見学会?8月10日(土)、8月11日の2日間、当社設計施工の最新の
スマートハウス見学会を開催します。ソーラーパネルを使った売電システム。内外気の循環を 使った
快適な保温システムによる暖房費、冷房費の節約、燃料蓄電池を使った効率的な蓄電システムなど最
新の技術の実例をお見せします。
2013年7月10日 建築資金計画相談会?7月20日(土)、7月21日の2日間、金融公庫や金融機関からの借
入、利用できる補助金や節税などを金融プランナーが詳しく解説、お客様ひとりひとりに応じた資金
計画を立案します。
2013年6月22日 リフォーム相談会?7月1日(土)、7月2日の2日間リフォーム相談会を開催します。シ
ステムキッチンや子ども部屋のリフォームの他、現在の宅地をそのまま使った2世代住宅への立て替
えなど大規模なリフォームの相談も受け付けます。
最新のブログ記事 [BLOG]
9月は連休が2回あり、例年住宅展示場はどこも家族連れのみなさんで賑わいます。今年はさらに消
費税増税前の駆け込みということもあり、沢山の人手増が期待されています。(...) </div>
<div id="Banner_box"></div>
</main>
<footer></footer>
試したこと
一行ずつ確かめ作業をした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/08 12:05