ドリームウィーバーでリスト作成すると余白ができる

解決済

質問者：qooqoo444
質問日時：2007/11/25 12:11
回答数：3件

ドリームウィーバーで、CSSでサイドナビをつくっています。
リストをたてにし、1項目づつボーダーでかこっています。
IE でも　ファイアーフォックスでもきれいに表示されるのですが、
ドリームウィーバー上では、左に余白ができる分、右に飛び出し、
その横のボックスが下にずれるということが起こっています。
ご指導お願いします。

～html
<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>

～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 10px;
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{
margin-left: 0px;
padding-left:19px;
background-color: #ffffff;
width: 180px;
font-weight: normal;
color: #333333;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yosoho
回答日時：2007/11/26 21:05

前回のソースを貼っときます。

続編は検証中です。ワッペンはアンカーポイントでは？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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">

</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>

- 0
- 件

通報する

No.3

回答者： yosoho
回答日時：2007/11/26 21:08

追伸：padddingの5は、5pxに修正するほうが良いです。

- 0
- 件

通報する

No.1

回答者： yosoho
回答日時：2007/11/25 16:33

CSSで、

「li{padding左10px;}」を0で「text-indent: 10px;」追加し
「.menu{padding-left:19px;}」を削除で「text-indent: 19px;」追加で
どうでしょう。

この回答への補足

早々のご回答ありがとうございます。
その後、少しデザインを変え、複雑になってしまったようですが、
結果はかわないままで、おっしゃられうよにうに左右？の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;

}