![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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;
}
です。
本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
スタイルシートとして
ul {
margin: 0px;
/* または padding: 0px; または両方 */
}
を設定したらどうなるでしょうか?
ul のかわりに div, li でやったらどうなるでしょうか?
ありがとうございます!
さっさくやってみたらズバッと解決ができました!!
2日間ほどこの問題で頭をなやませており、ずっとしこりがとれないままだったのですが、おかげでスッキリできました!
本当に助かりました!!
本当にどうもありがとうございました!!!
No.1
- 回答日時:
左側に空白ができてしまうのは、現在のブラウザの解釈がそうなってるからではないかと思うのですが、直接的にどう直せばいいのかは、わかりません。
対症療法としては、CSSか、ULタグのところで、左マージンを指定してしまえばいいのではないでしょうか。たとえば、
<ul style="margin-left:10px;">
のようにすれば、各LIの左側は揃えられます。
<ul style="margin-left:10px;">を早速試したところ、各liの左側をそろえることに成功できました★
usktさんの早急な回答、本当にうれしかったです!
どうもありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
footer を横幅いっぱいに広げる...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
スクロールボックスを中央に配...
-
余分な縦スクロールバーが出て...
-
li 黒丸含んで移動する方法
-
【HTML&CSS】フッター下部の余...
-
テーブル内の画像をマウスオー...
-
IE9でa:hoverが効かない
-
Firefoxでheight:100%がきかない?
-
CSSのposition値の上書き(打消...
-
横のTableタグのヘッダを...
-
WEBサイト作成:初心者です...
-
画像だけを端に寄せる方法
-
ラジオボタンの大きさを変更し...
-
画像を中心に配置したい
-
HTML CSS の display: flex
-
CSSのdivのposition:relative;...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報