- ベストアンサー
ドリームウィーバーでリスト作成すると余白ができる
- ドリームウィーバーでリスト作成すると余白ができる問題が発生しています。左に余白ができる分、リスト内のボックスが右に飛び出し、表示が崩れてしまいます。
- ドリームウィーバー上でのリスト作成時に、余白が生じる現象が発生しており、表示が崩れる問題が発生しています。
- ドリームウィーバーを使用してリストを作成する際に、余白が発生し、表示が崩れる問題があります。
- qooqoo444
- お礼率62% (104/166)
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
前回のソースを貼っときます。 続編は検証中です。ワッペンはアンカーポイントでは？ <!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"> <!-- #sidenavi { float: left; height: 600px; width: 180px; margin: 0px 0px 0px 2px; padding: 0px; background-color: #FFFFFF; background-image: url(img/rose.jpg); background-repeat: repeat-y; } ul { padding: 5 0 0 0px; margin: 0px; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:25px; margin: 0 0 0 0px; padding: 5 0 0 0px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "ＭＳ Ｐゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; text-indent: 10px; } .menu{ margin-left: 0px; background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; text-indent: 19px; } --> </style> </head> <body><div id="sidenavi"><img src="img/sidenavi.jpg" width="180" height="165"> <ul> <li>AAAAAAA</li> <li class="menu">BBBBBB</li> <li class="menu">CCCCCCC</li> <li class="menu">DDDDDDD</li> <li>HTML</li> <li>プログラム</li> </ul> </div> </body> </html>
補足
早々のご回答ありがとうございます。 その後、少しデザインを変え、複雑になってしまったようですが、 結果はかわないままで、おっしゃられうよにうに左右？のpaddingをtext-indentに変更してみたのですが、 相変わらず、IEやfirefoxでちゃんと表示されるのに、 DWでは、リストの左に余白があり、右に飛び出て、右のボックスが 下にずれたままです。左に余白があるため、リストの幅を短く すると（liとmenuの180pxを130px）DW上では、下にずれた右のボックスは、戻るのですが、もちろん両ブラウザーでみると、リストの幅が足りなくなります。 ひとつ気になるのは、ところどころに、黄色いワッペンのような 中にカタカナの「ヘ」のようなものが現れます。 ～html <ul> <li> AAAAAA</li> <li class="menu"><a href="index.html" class="menu1">BBBBBBB</a></li> <li class="menu"><a href="index.html" class="menu1">CCCCCCC</a></li> </li> <li class="menu"><a href="index.html" class="menu1">DDDDDD</a></li> <li>HTML</li> <li>プログラム</li> </ul> </div> ～CSS ul { padding: 5 0 0 0px; margin: 0; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:28px; margin: 0 0 0 0px; padding: 5 0 0 0px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "ＭＳ Ｐゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; } .menu{ background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; border-bottom: 2px #ffffff dotted; text-decoration: none; margin: 0px; padding: 0px; height: 15px; } .menu a:hover { color: #DD041A; border-bottom: 2px #DD041A; dotted; background-color: #E4E4E4; } hr { background-color: #DD041A; color: #DD041A; } a.menu1{ display: block; padding: 2 0 1 0px; text-indent: 10px; margin: 0 0 0 0px; text-decoration: none; width:180px; } a.menu1:hover{ background-color: #E3E3E3:180px; }