- ベストアンサー
ホームページのメニューと写真の間にすき間ができる理由
- ホームページのメニューと写真の間にすき間ができる問題が発生しています。IE８では問題ありませんが、firefox5やchromeではトラブルが発生します。
- メニューバーと写真の間のすき間を調整するために、marginやpaddingを設定しても解決しない場合があります。
- 原因としては、floatやvertical-alignの設定が正しくない可能性があります。HTMLとCSSのコードをご確認の上、適切な設定をお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
メニューバーとその下の写真に隙間ができる理由は、下の写真に<p>タグが原因となっています。 対処方法として、2通りあります。 ■<p>タグを削除する。 <div id="photo"> <img src="image/catch_s1.jpg" width="800" height="280" /> <!-- / #photo --></div> ■CSSで<p>の外余白を0pxにする。 #photo p { margin: 0px; }
その他の回答 (2)
- DrFell
- ベストアンサー率55% (305/551)
>調べて >メニューと、下の写真のmarginとpaddingを0にしたり、 >vertical-alignを指定してみたりしたのですが、 >変わりませんでした。 どのように調べられたのでしょうか？あて物しただけでしょうか？ この場合、 *{border:1px solid red;} などを入れて、要素を視覚化します。すると問題のスペースは写真部分に問題があるとわかります。 次に*{border:1px solid red;}を消して、 #photo {border:1px dotted red;} #photo *{border:1px solid red;} などとすると、#photoと次の要素間に問題のすき間があることがわかります。 #photoはパディングを0としていますので、指定していないｐが怪しいとなります。 #photo p{margin:0;padding:0;} としてみると、問題解決！となります。 こんな風にして調べて行く方法も覚えておくと便利です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IE8で互換モードで表示されています。 firefox,opera,chrome,safari,IE8(標準モード),IE9の表示が正しいです。 HTMLとCSSはstrictで作成すること。 ・DWは文書構造を解析できません。結果、文書構造に従ったマークアップは人でないと無理です。 デザインのためのHTMLを作ってしまう。 ・CSSのスタイルはDWで書けますが、CSSの根幹をなすカスケーディングはDWはまったく無知です。 よってCSSも人でないと無理です。 私もDWは持っていますが、HTMLとCSSだけはDWは使いません。無理です。 DOCTYPE,htmlタグは、標準モードで起動するようにセットすること。いずれ互換モードは使えなくなります。 画像でリンク先を表すべきではありません。また、内容に関係ない画像は背景にしましょう。 可能な限りリキッドデザインにしましょう。i-pad,携帯電話には対応させないと・・ IE5,IE6への後方互換を考えればliにclass名が必要になります。 <body> ＿＿<div class="header"> ＿＿＿＿<h1>サンプル</h1> ＿＿</div> ＿＿<div class="section"> ＿＿＿＿<h2>見出し</h2> ＿＿＿＿<p>文章</p> ＿＿＿＿<p>文章</p> ＿＿</div> ＿＿<div class="footer"> ＿＿＿＿<div class="nav" id="menu"> ＿＿＿＿＿＿<ul> ＿＿＿＿＿＿＿＿<li><a href="index.html"><span>トップ</span></a></li> ＿＿＿＿＿＿＿＿<li><a href="./works.html"><span>事業内容</span></a></li> ＿＿＿＿＿＿＿＿<li><a href="./results.html"><span>実績と強み</span></a></li> ＿＿＿＿＿＿＿＿<li><a href="./order.html"><span>資料請求</span></a></li> ＿＿＿＿＿＿＿＿<li><a href="./profile.html"><span>会社概要</span></a></li> ＿＿＿＿＿＿</ul> ＿＿＿＿</div> ＿＿</div> </body> </html>
