この人頭いいなと思ったエピソード

<li>の先頭に出るスペースの埋め方を教えてください！

締切済

  • 質問者：cyon905
  • 質問日時：
  • 回答数：2件

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: "ＭＳ Ｐゴシック", 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;
}
です。
本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

スタイルシートとして


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

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

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

通報する
お礼日時：2007/12/10 11:04

No.1

  • 回答者： uskt
  • 回答日時：

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


対症療法としては、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質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報