オンライン健康相談、gooドクター

DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか?

ちなみにHTMLは↓
<body>
<div id="all">
<div id="header"></div>
<div id="navigation">
<ul class="sample">
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
</ul>
</div>
<div id="main"></div>
<div id="main2"></div>
<div id="footer"></div>
</div>
</body>
----------------------------
そしてスタイルシートは↓
#all {
background-color: #00FF00;
width: 750px;
position: relative;
height: auto;
margin-right: auto;
margin-left: auto;
}
#navigation {
background-color: #FF0000;
height: 50px;
width: 750px;
position: relative;
clear: right;
}
#main {
height: 270px;
width: 750px;
position: relative;
background-color: #FFFF99;
}
#footer {
background-color: #999999;
height: 50px;
width: 750px;
position: relative;
clear: right;
}
#ul.sample {
width: 100%;
}

#header {
background-color: #999933;
height: 200px;
width: 750px;
position: relative;
clear: left;
}
a.sample {
text-align: center;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 16px;
text-decoration: none;
color: #FFFFFF;
background-image: url(img/blue-spy.JPG);
height: 35px;
width: 125px;
padding-top: 15px;
float: left;
}
a:hover.sample {
background-image: url(img/sky.jpg);
}

ul.sample li {
list-style-type: none;
float: left;
}
#navigation li {
float: left;
height: 50px;
width: 125px;
}
です。
本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか?

gooドクター

A 回答 (2件)

スタイルシートとして


ul {
margin: 0px;
/* または padding: 0px; または両方 */
}
を設定したらどうなるでしょうか?

ul のかわりに div, li でやったらどうなるでしょうか?
    • good
    • 2
この回答へのお礼

ありがとうございます!
さっさくやってみたらズバッと解決ができました!!
2日間ほどこの問題で頭をなやませており、ずっとしこりがとれないままだったのですが、おかげでスッキリできました!
本当に助かりました!!
本当にどうもありがとうございました!!!

お礼日時:2007/12/10 11:04

左側に空白ができてしまうのは、現在のブラウザの解釈がそうなってるからではないかと思うのですが、直接的にどう直せばいいのかは、わかりません。


対症療法としては、CSSか、ULタグのところで、左マージンを指定してしまえばいいのではないでしょうか。たとえば、
<ul style="margin-left:10px;">
のようにすれば、各LIの左側は揃えられます。
    • good
    • 2
この回答へのお礼

<ul style="margin-left:10px;">を早速試したところ、各liの左側をそろえることに成功できました★
usktさんの早急な回答、本当にうれしかったです!
どうもありがとうございました!

お礼日時:2007/12/10 11:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

人気Q&Aランキング