li要素を横並びにしたいのに、できません。
-
0 名前： くく ： 2006/11/07（火） 09:36 ID:T1YhbwoR
- なんともお粗末な表示になってしまいます。
どこをどういじればいいのか、さっぱりわかりません。
ご教授を、よろしくお願いします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>○○</title>
<style type="text/css">
<!--
body {
font-size: 75%;
font-family: "ヒラギノ角ゴ pro w3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",
sans-serif;
line-height: 1.5;
color: #333333;
background-color: #ffffff;
}
#navigation {
width: 700px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0px;
height: 32px;
overflow: hidden;
border-bottom: 2px solid #cccccc;
}
#navigation li {
float: left;
width: 115px;
margin: 0;
padding: 0;
}
#navigation a {
display: block;
width: 100%;
padding: 6px 0 8px 0;
color: #ffffff;
background-color: #4c924d;
background-image: url(images/a.gif);
background-position: left top;
text-decoration: none;
text-align: center;
}
#navigation a:hover {
background-color: #297e27;
background-position: right top;
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="top.html">ＴＯＰ</a><li>
<li><a href="#">１</a><li>
<li><a href="#">２</a><li>
<li><a href="#">３</a><li>
<li><a href="#">４</a><li>
<li><a href="#">問い合わせ</a></li>
</ul>
</div>
-
1 名前： みかん ： 2006/11/07（火） 09:36 ID:43rRNWFl
- </body></html>を最後につける。
width: 115px;が入りきれていないのでずれてるだけ。もっと小さい数字にするか、
width: 700px;をひろげる。
本当に横並びにしたいだけなら、cssで必要なのは
#navigation li {
float: left;
}
だけです。後は、大きさやら色などの飾り。
float:left;の変わりにdisplay:inline;でも可。
-
2 名前： 匿名 ： 2006/11/07（火） 09:36 ID:O3vJn3Ll
- >>1
揚げ足取りですまないが、HTML4.0ならば</body>、</html>は省略可。
あとCSS2では、floatは必ずwidthを伴わねばならない。
widthなしあるいはwidth:autoの浮動ボックスは、幅が0と見なされる。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#float
CSS2.1ではこの仕様が変更され、幅が不明の浮動ボックスは内容に応じて伸び縮みするようになった。
とは言え、上記のように幅が不明の浮動ボックスの処理はブラウザによってさまざまなので、
古いCSS2実装が淘汰されるまでは、widthを明示することをお勧めする。
つかfloatは面倒なので、display:inlineをお勧めしたい。
-
3 名前： くく ： 2006/11/07（火） 09:36 ID:7oPAYoBv
- ＞みかん様、
</body></html>の件、ここで質問するときには影響がないだろうと思い（勝手に）省略してしまいました。すみません。
width: 115px；の数値を下げ、width: 700px;の数値をあげてみました。
結果としては、５項目全てが表示されるようになりましたが、
overflow: hidden;でカットされるはずの部分がカットされず、空白として
残ってしまいます。どうしてこうなるのでしょうか？
＞匿名様
float: left;の部分をdisplay: inline;に置き換えてみましたが、
なんの変化もありませんでした。
ちなみに、ここのサイトで紹介しているホームページ制作ガイドの
menu2のタイプをコピペして表示をみたら、横並びにもならず。
さらには、float: left;の部分をdisplay: inline;に置き換えてみても
変化なしでした。
なにが、どう影響しているのでしょうか？？（汗）
-
4 名前： ひー ： 2006/11/07（火） 09:36 ID:f/Jfw6vs
- おそらく基本的なところを見落としてるのかと思いますが
リストタグが<li></li>となっているのが1ヶ所だけなのが原因ではないでしょうか？
リストタグを全て<li></li>で閉じていれば、ちゃんと表示されましたので一度ご確認してはどうでしょうか？
-
5 名前： くく ： 2006/11/07（火） 09:36 ID:T1YhbwoR
- ＞ひー様
ありがとうございましたっ！！！！！！！！
閉じ忘れが原因でした。
皆様、ありがとうございました。
-
6 名前： Z ◆XTzyosZXcL ： 2006/11/07（火） 09:36 ID:B47X1Gqg
- 問題は解決したようですが、気になりましたので。
>>5
>閉じ忘れが原因でした。
文法チェッカをお使いになることをお勧めしておきます（HTMLの場合、要素によっては開始タグまたは終了タグ、あるいは両方が省略できますが、ミスを防ぐためにも省略しないほうがよいと思います）。
Another HTML-lint gateway：
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
-
7 名前： くく ： 2006/11/07（火） 09:36 ID:7oPAYoBv
- ＞Ｚ様
ご紹介いただいたサイト、とても参考になります。
文法チェッカもさることながら、”のけぞる本”など、びっくりです。
まるで今の私の状態そのもの（恥）
しっかり勉強させていただきます。
ありがとうございました。
