リンクＢＯＸと見出しに空白が出来る
- 独学でHTMLとCSSの勉強をしている方が、リンクBOXと見出しの配置に空白が生じる問題について質問されています。
- 提供されたHTMLとCSSのソースコードを確認したところ、スタイル指定の方法に問題があることがわかりました。
- HTML要素に対してスタイルを指定する際に、相対的な位置指定を行っているため、予期しない空白が生じているのです。
- ベストアンサー
リンクＢＯＸと見出しに空白が出来る
ただ今独学でhtmlとcssの勉強をしているのですがｃｓｓとｈｔｍｌでリンクBOXを作ってその下に見出しをつけようと思ったら添付画像のように空白が出来ます。ソースのどこが悪いのでしょうか。 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did"> <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"> div#container{border:solid 2px black; padding:10px; width:1200px; margin-left:auto; margin-right:auto} div#top a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-31px; left:1px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about1 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-97px; left:165px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about2 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-163px; left:326px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about3 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-229px; left:490px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about4 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-295px; left:654px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about5 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-361px; left:818px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about6 a { display:block; width:168px; height:64px; background:#ffcc00; position:relative; top:-427px; left:979px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } h2{ padding:-1000px 0px 0px 0px; font-size:1.15em; border-left:solid 18px #ffcc00; padding-left:5px; margin:3px; } p { margin: 0.5em 0px; } </style> </head> <body> <div id="container"> <h1><img src="title.png" alt="株式会社＊＊＊＊"/></h1> <div id="top"> <a href="../index/index.html"><p align="center">TOP</p></a> </div> <div id="about1"> <a href="about1.html"><p align="center">会社方針</p></a> </div> <div id="about2"> <a href="about2.html"><p align="center">企業概要</p></a> </div> <div id="about3"> <a href="about3.html"><p align="center">製品</p></a> </div> <div id="about4"> <a href="about4.html"><p align="center">福祉サービス</p></a> </div> <div id="about5"> <a href="about5.html"><p align="center">スタッフ紹介</p></a> </div> <div id="about6"> <a href="about6.html"><p align="center">お問い合わせ</p></a> </div> <h2>会社方針</h2> </div> </body> </html>
- miyamasa5330
- お礼率0% (0/2)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
div id=about*に適用されている、display:block;が入っているために下がっています。 それではなく、float:leftを適用させればご質問者様のお考え通りの機能になるのではと想像しまして。 スマートな方法ではないかもしれませんが、div#top aとdiv#about* a のdisplay:block;とtop:-*pxとleft:*pxを消します。 その後で"div#about* a"に "float:left"を追加して左揃えにします。 更に、h2の要素に"clear:left;"を追加して、あとはh2の要素を適宜いじればいけるのではないでしょうか。 以下ソース <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did"> <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"> div#container{border:solid 2px black; padding:10px; width:1200px; margin-left:auto; margin-right:auto} div#top a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; left:1px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about1 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about2 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about3 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about4 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about5 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about6 a { width:168px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } h2{ clear:left; padding:0px 0px 0px 0px; font-size:1.15em; border-left:solid 18px #ffcc00; padding-left:5px; margin:3px; } p { margin: 0.5em 0px; } </style> </head> <body> <div id="container"> <h1><img src="title.png" alt="株式会社＊＊＊＊"/></h1> <div id="top"> <a href="../index/index.html"><p align="center">TOP</p></a> </div> <div id="about1"> <a href="about1.html"><p align="center">会社方針</p></a> </div> <div id="about2"> <a href="about2.html"><p align="center">企業概要</p></a> </div> <div id="about3"> <a href="about3.html"><p align="center">製品</p></a> </div> <div id="about4"> <a href="about4.html"><p align="center">福祉サービス</p></a> </div> <div id="about5"> <a href="about5.html"><p align="center">スタッフ紹介</p></a> </div> <div id="about6"> <a href="about6.html"><p align="center">お問い合わせ</p></a> </div> <h2>会社方針</h2> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜそんなに長大で複雑怪奇なHTMLスタイルシートになるのでしょう。他人は無論、あなた自身も手がつけられないのでは？ 理由は単純です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから relative ボックスの位置はまず通常フローにて計算され（この計算で得られた位置 を通常位置と呼ぼう）、その通常位置から相対的に配置される。 なお、あ るボックスBが相対配置される場合、それに後行するボックスの位置は、 Bが相対配置されていないかのように計算される。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-position )］より と言うことです。元々あったところは席は空くけど席は残っている。 しかし、それ(スタイルシートでデザインする)より前に、HTMLの文法チェックを～必ずしましょう。ミスがあると期待通りにデザインでき ませんし、ブラウザ間でエラー処理が異なるため表示差で悩まされます。 ・A要素の中に<p>は入れられません。 ・idやclass名は文書構造を補完するために書くのであって、デザインのために書くのではありません。その文書構造を利用してスタイルは 書きますが。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』 また、現在作成されるならHTML4.01strictが良いでしょう。transitionalは使うべきではありません。 1999年のHTML4.01の勧告以来・・『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 次期HTML5、や現行のXHTML1.1にはtransitinal(互換仕様)はありません。strictを学んでおけば、HTML5 にはすぐ移行出来るでしょう。 ★横幅1200pxは広すぎます。スマホや最も普及している1028pxのディスプレイでは苦痛です。 下記サンプルはスマホの640px以上でしたら伸縮して表示されます。幅広ディスプレイだと中央 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strictです。 ★タブは＿に置換してあるので戻すこと。また文字コードはShift_JISです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>会社方針</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header,div.section,div.footer{ ＿border:2px black solid; ＿margin:0 10px; ＿width:95%;max-width:1000px;min-width:620px; ＿margin:0 auto;padding:10px; } div.header h1{ ＿width:95%;margin:0 auto; ＿position:relative; ＿text-align:center; } div.header h1 img{display:block;width:100%;height:auto;} div.header{ ＿border-bottom-width:0; ＿padding-bottom:70px; ＿background-color: ＿rgb(255,204,00); } div.section{border-width:0 2px;clear:left;} div.footer{border-top-width:0;} h1,h2,h3,p,ol,ul{margin:0;line-height:1.6em;} div.header ol,div.header ol li{ list-style:none;display:block; text-align:center; line-height:64px;font-size:0.9em; } div.header div.nav ol li{width:13.5%;float:left;border:solid 1px black;} div.header div.nav ol li a{background-color:#FFCC00;display:block;width:100%;height:100%;text-decoration:none;} div.header div.nav ol li a:hover{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1><img src="./images/title.png" alt="株式会社＊＊＊＊" width="600" height="60"></h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="../index/index.html">TOP</a></li> ＿＿＿＿<li><a href="about1.html">会社方針</a></li> ＿＿＿＿<li><a href="about2.html">企業概要</a></li> ＿＿＿＿<li><a href="about3.html">製品</a></li> ＿＿＿＿<li><a href="about4.html">福祉サービス</a></li> ＿＿＿＿<li><a href="about5.html">スタッフ紹介</a></li> ＿＿＿＿<li><a href="about6.html">お問い合わせ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>会社方針</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連するQ&A
- 画像のtext-align:center;について
http://loveosan0801.uijin.com/content/ishida.html 上記URLの画像がcenterに配置されません。 どのように修正すれば、centerに配置されますでしょうか？ お教えいただけませんか？ body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #center p { text-align:center; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }
- ベストアンサー
- HTML
- 「アンカーテキスト」について
HTMLチェックサイトを使用してHTMLチェックをしたところ、アンカーテキストを作成して内部リンクを張る箇所で下記のようなエラーが大量に出てきました。 <div>～</div>内に<a>を入れたところ、画面が崩れてきれいに表示されません。 ＜該当サイトの左側のメニューです。＞ ホームページを作成すること事態初めてで、SEO対策も全然分かってなく基本的な質問で申し分けありませんがご教授お願い致します。 ●HTMLチェックサイト（Another HTML-lint gateway） http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ●エラー内容 -------------------------------------------------- <div>を145行目の<a>～</a> 内に書くことはできません。<div>～</div>内に<a>を書くことはできます。 -------------------------------------------------- ●html（変更前） -------------------------------------------------- <li><div align="left"><a href="syurui.html#okyaku1" target="_self"><div style="margin-left:10em;">Ｏ脚</div></a></div></li> -------------------------------------------------- ●css -------------------------------------------------- #sub { float: left; width: 226px; display: inline; margin-left: 37px; } #sub p { padding-top: 0.5em; padding-bottom: 0.5em; } #sub .submenu { text-align: center; padding-bottom: 10px; border-bottom: 5px solid #FF7F00; margin-bottom: 20px; border-right: 1px solid #FF7F00; border-left: 1px solid #FF7F00; } #sub .submenu a { color: #FF7F00; text-decoration: none; border-bottom: 1px dotted #FF7F00; display: block; width: 224px; } #sub .submenu a:hover { background: #f5f5f5; } --------------------------------------------------
- ベストアンサー
- CSS
- Firefoxで見出しが上段にずれてしまいます。
IE6.0とOperaであれば正常に表示されるのですがFirefox2.0ですと<h1></h1>の部分が上の方にずれてしまいます。 色々変えてみましたが結局直すことが出来ませんでした。ご教授の程、よろしくお願いします。 ◆スタイルシート◆ body { font-family: "ＭＳ Ｐゴシック", ; margin: 0px; padding: 0px; text-align: center; } #wrapper { text-align: left; margin: 0px auto; padding: 20px; height: auto; width: 900px; h1 { font: x-large "ＭＳ Ｐゴシック", ; border-bottom: 1px solid #0000FF; border-left: 10px solid #0000FF; width: 100%; text-align: left; #contents { margin: 0px; padding: 0px; height: auto; width: 750px; } #wrapper #contents #side { font: small/23px "ＭＳ Ｐゴシック", ; } #contents #side { margin: 0px 5px; padding: 0px; float: left; height: auto; width: 430px; } #contents #main { margin: 0px; padding: 0px; float: right; height: auto; width: 300px; ｝ ◆ＨＴＭＬ◆ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <body> <div id="wrapper"> <div id="contents"> <h1>名称</h1> <div id="side"> <P>説明文 </P> </div> <div id="main"> JPEG画像 </div> </div> ※contents～mainまでを何度か繰り返します。 </div> </body> </HTML>
- ベストアンサー
- HTML
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- 画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTM
画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML お世話になっております。 ある画像の上にposition:rerative;を使って文字をのせています。 この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか？ 下記ソースです。 /*css*/ img.button{/*画像*/ margin:0px 0px 8px; padding:2px; border:#999999 1px solid; } .text{/*画像上の文字*/ margin:0px; padding:0px; font-size:14px; text-align:left; } <!--html--> <div style="position:relative;"> <a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a> <div style="position:absolute; left: 24px; top: 13px; width: 217px;"> <p class="text">画像上の文字</p> </div></div> 検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか？うまくいきませんでした。 お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。 表現の仕方や言葉の使い方を間違っていたらすみません…。
- ベストアンサー
- HTML
- ＩＥでテーブル内のテキストが勝手に改行されます。
個人でサイトを運営しているのですが、 外部ＣＳＳをテーブルに適用するとＩＥとＦｉｒｅｆoxで表示が変わってしまい 困っています。問題は下記です。 テーブルに指定するＣＳＳは以下のようなものです。 table.1{ border-top:1px solid #666666 ; border-left:1px solid #666666 ; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; text-align:left; font-size: 10pt; padding:3px; } .1 th{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; color:#330000; background-color:#996633; padding:0.1em 0.1em; text-align:center; } .1 td{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; padding:8px 8px 8px 8px; line-height: 120%; } そして本文のＨＴＭＬです。 <table width="166" border="0" class="1"> <tr> <td colspan="2"><div align="center">テキストテキスト</div></td> </tr> <tr> <td>イメージ写真</td> <td>イメージ写真</td> </tr> <tr> <td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> <td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> </tr> </table> 以上のようなものです。 このようにするとＦｉｒｅｆｏｘではきちんと表示されるのですが、 ＩＥだとテキストの部分が４文字ほどで勝手に改行されてしまい、 かなり縦長のテーブルになってしまいます。 試行錯誤してみたのですが、全然できなくて本当に困っています。 もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。
- ベストアンサー
- HTML
- HTML 微妙なずれを修正したいです。
http://matsudamakoto.web.fc2.com/index.html 上記URLの ナビゲーションと画像が微妙にcenterからずれてしまっているように感じます。 これらをうまくcenterに表示する方法を教えていただけませんか？ cssのソースを提示させていただきます。 よろしくお願いいたします。 body { font-size:14px; line-height:150% } h1 { color:black; border-left:10px solid #cccccc; border-right:10px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; font-size:16px; padding:10px 0 10px 0; text-align:center; } p { text-align:left; border-left:10px solid #cccccc; border-right:10px solid #cccccc; padding:0 0 0 20px; } #menu { list-style-type:none; text-align:center; } #menu li { display:inline; border-right:5px solid #cccccc; padding:0 20px 0 20px; } .main { width: 100%; } .main div { width: 50%; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- google画像検索のように画像を表示させたい
http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？ この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか？
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
