- ベストアンサー
Dreamweaver CS5でホームページ作成時の上部の余白をなくす方法
- Dreamweaver CS5でホームページを作成している際に、上部に余白ができる問題が発生しました。デザインビューでは問題ありませんが、ライブビューやブラウザーのプレビューで隙間が発生します。この記事では、Dreamweaverで上部の余白をなくす方法を紹介します。
- 上部の余白ができる問題は、CSSの設定に原因があります。具体的には、body要素に設定されているmarginやpaddingが影響しています。上部の余白をなくすためには、このCSSの設定を修正する必要があります。
- まず、CSS部分でbody要素に指定されているmarginやpaddingの値を確認してください。margin: 0px; padding: 0px; と指定されていることを確認しましょう。もし値が異なっている場合は、0に修正してください。この修正により、上部の余白がなくなります。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
ANo.2 をヤメて、こっちが正解だと思います。 #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } 上の部分を下のように変更してみてください。 #headWrap #header ul { float: right; } #headWrap #header ul li { float: left; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 { float: left; margin-top: 0px; }
その他の回答 (2)
- outbrave
- ベストアンサー率60% (231/380)
#headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } 上の部分を下のように変更してみてください。 #headWrap #header ul {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 {float: left; margin-top: 0px; }
- outbrave
- ベストアンサー率60% (231/380)
どのようなレイアウトがご希望なのかわかりませんが #headWrap #header h1 img { /*float: left;*/ margin-top: 0px; } float: left; を削除すれば隙間はなくなると思います。 また、 #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; } 最後の } が全角になってます。
補足
早速の回答ありがとうございます。 ご指摘の所を変更してみたのですが、やはりライブビューとブラウザービューでは上に隙間ができてしまいます。 レイアウトのイメージとしては、http://www.villagestore.jp/nouveau/←コチラのサイトが近いとおもいます。 #headWrapの中の#header 部分にロゴ画像と、リンクを付けたリストを横並びに設定したかったので、ロゴにfloat: left;をつけ、リストにはfloat: right;を設定してみたのですが、ここに何か問題があるのでしょうか??floatやmargin、paddingをちゃんと理解できていないのかもしれません。 分かりにくい説明にも関わらず、回答をくださってありがとうございました。
お礼
できました!! ご丁寧にありがとうございます。 #headWrap #header ul liにfloat: rightを設定した事と#headWrap #header h1 img にfloat: leftを設定したのが間違っていたのですね。 とても勉強になりました。