画像を挿入して横並びのメニューリストを作ったのです

質問

が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？
以下がソースです。

～html～
<ul id="menu">
<ul>
　　　　<li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li>
<li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>
　　　　　　　　　　　　　　　　　　　　　　　　　　省略
　　　 </ul>

～css～
ul#menu {margin-left: 45px}

ul#menu li {list-style-type: none;
float: left}

ul#menu li a {display: block;
width: 181px}

ul#menuのところに記述しましたが、変化ありませんでした。

回答No.2

ORUKA1951 · ベストアンサー

＞本来、スパンタグはそれ自身は意味を持たず、文章の一部を修飾するタグですよね？
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
　修飾するというより、特定の意味を持たせるためです。他のフレーズ要素(EM、STRONG、DFN、CODE、 SAMP、KBD、VAR、 CITE、ABBR、及びACRONY)では足りない場合に使います。
　具体的には<span class="mark">別の場所からも参照される語句</span>と言う風に使うことが多いでしょう。(markはHTMLから導入されるこの意味を持つ要素です。「3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」)

　ここでは、単純にスタイルシートの(タイプセレクタ)ためだけに使ってます。
div.nav ol li a span{/* ナビゲーションブロック内の ol内のli内のa内のspan */
　visibility:hidden;/* 表示はしないけど存在する */
}
★このclass名のnavもHTML5で導入されるナビゲーションを示す要素を参考につけています。HTML5では、下記のように、そのまま要素として記述できます。そのためにIDではなくclass名としてあります。
<nav id="menue">
　<ul>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　</ul>
</nav>

スペースがあるので詳しく説明しておきます。
div.nav ol,div.nav ol li{
　display:block;list-style:none;margin:0;padding:0;
}
/* 同じプロパティを複数回書くのは無駄なのでセレクタは,で区切ってグループ化してあります。
　リストを単なるブロック要素に置換しておきます。
　リストに対してブラウザごとにmarginやpaddingの設定が異なりますから、marginとpaddingもブラウザのデフォルトの設定を消しておきます。ここのプロパティ記述は定番として覚えておくと便利です */
div.nav ol{/* ナビゲーションセクションのolについての記述 */
　height:59px;/* 高さを確保しておきます */
　width:auto;margin:0 45px;/* 左右を45px開けて中央配置 */
}
div.nav ol li{/* 子孫セレクタ詳細度は[0,0,1,3] */
　float:left;/* floatさせます */
　width:20%;/* リキッドスタイルの場合は親のolの巾によります */
　background-image:url() /* 注 */
}
div.nav ol li+li{/* 兄弟セレクタでliの兄弟のliのみ適用されます */
　margin-left:10px;
}
div.nav ol li a{
display:block;/* 行内要素であるaをブロックにします */
width:100%;/* そのうえで、li要素いっぱいまで広げます */
height:100%;
　background-image:url() /* 注 */
}

固定サイズで行う場合は、%の部分をpxにしてください。その場合はウィンドウ巾が異なるユーザーには不便かもしれません。特にi-padやi-phoneの場合・・

お礼

ありがとうございました。

HTML5と従来のHTMLとは、けっこう違いますね。私もそろそろHTML5の書き方を取り入れていこうと思います。

回答No.1

ORUKA1951

HTMLが間違ってます。
<div id="menu">
　　<ul>
　　　　<li><a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li>
　　　　<li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>
　　　　<li><a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li>
　　　　<li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>
　　</ul>
</div>
だとします。(HTML5への移行を考えると、<div class="nav" id="menue">としたほうが良いでしょう。HTML5では、<nav id="menue">と書くことになります。)

この場合スタイルシートは
#menue ul,#menue li{display:block;list-style:none;margin:0;padding:0;}/* 定番 */
とした上で、
#menue{height:○○px;}
#menue li{float:left;}
#menue li+li{margin-left:14px;}

で良いでしょう。
なお、もっと良い書き方は
<div class="nav" id="menue">
　<ul>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　　<li><a href="./"><span>トップへ</span></a></li>
　</ul>
</div>
div.nav ol,div.nav ol li{
　display:block;list-style:none;margin:0;padding:0;
}
div.nav ol{
　height:59px;
　width:auto;margin:0 45px;
}
div.nav ol li{
　float:left;
　width:20%;
　background-image:url() /* 注 */
}
div.nav ol li+li{
　margin-left:10px;
}
div.nav ol li a{
display:block;
width:100%;
height:100%;
　background-image:url() /* 注 */
}
div.nav ol li a span{
　visibility:hidden;
}
(注)背景画像が個別に違う場合は<a href="style="url()">で指定するか、hrefの値を元にスタイルシートで指定する。後者は、後日HTMLを変えなくても変更できる利点があります。
例
　div.nav ol li a[href="./index.html"]{background-image:url();}
　div.nav ol li a[href="./books"]{background-image:url();}
とか・・

★なお、いずれもタブを全角スペースに置き換えてあるので戻してください。

補足

度々、ありがとうございます。うまくいきました。

ご回答を受けて質問なのですが、<li><a href="./"><span>トップへ</span></a></li>のスパンタグを使う意図を教えて頂けないでしょうか？

本来、スパンタグはそれ自身は意味を持たず、文章の一部を修飾するタグですよね？