ナビゲーション
-
0 名前： 関 ： 2006/12/06（水） 09:52 ID:9sd6vWBc
- おはようございます。
ナビゲーションの事で教えてください
横型です。
下記に様にCSS html双方書いていたのですが
上手くいきません。
項目数だけ横にあらかじめ作りました
画像を並べたいのですが機能しません。
書きましたソースのいくつかがおかしいと思うのですが
解りかねています。教えてください
html
<div id="navigation">
<ul>
<li id="01"> </li>
<li id="02"> </li>
<li id="03"> </li>
<li id="04"> </li>
<li id="05"> </li>
<li id="06"> </li>
</ul>
</div>
-------------------------------
css
#navigation{
height: 30px;
background-color: #FFFFFF;
float: left;
margin-top: 3px;
border-color: #CCCCCC;
width:600px;
margin-left: 2px;
margin-right:2px;
}
#navigation ul {
margin: 0 0 1em;
padding: 0;
list-style: none;
}
#navigation li {
margin: 0;
padding: 0;
display:inline;
}
#navigation li a {
text-decoration: none;
display: block;
}
#navigation li#01{
background:url(../navigation/imges/01.gif) no-repeat;
}
#navigation li#02{
background: url(../navigation/imges/02.gif) no-repeat;
}
03recipe{
background: url(../navigation/imges/r03.gif) no-repeat;
}
#navigation li#04
background: url(../navigation/imges/04.gif) no-repeat;
}
#navigation li#05{
background: url(../navigation/imges/peasant01.gif) no-repeat;
}
---------------------------------------------
#navigation li#01 a:hover{
background:url(../navigation/imges/01_1.gif) no-repeat;
}
#navigation li#02 a:hover{
background: url(../navigation/imges/02_1.gif) no-repeat;
}
#navigation li#03 a:hover{
background: url(../navigation/imges/r03_1.gif) no-repeat;
}
#navigation li#04 a:hover{
background: url(../navigation/imges/04_1.gif) no-repeat;
}
#navigation li#05 a:hover{
background: url(../navigation/imges/peasant05_1.gif) no-repeat;
}
どうすればいいのでしょうか、散々悩んでいますがご指導いただければ
幸いです。
関
-
1 名前： Ryu ： 2006/12/06（水） 09:52 ID:braAjNZo
- 下記ページにあるサンプルを応用すればできると思いますがいかがでしょうか。
http://www.tagindex.com/hp_guide/menu/04.html
-
2 名前： Ryu ： 2006/12/06（水） 09:52 ID:braAjNZo
- 追記
以前、私もCSSからメニュー画像を読み込ませようとしましたが、マウスオーバーで説明文が出ないなど（私の知っている範囲では解決出来ない問題が多々あった）の問題があったので、普通にHTML内で画像を読み込むようにしました。
-
3 名前： 葦毛 ： 2006/12/06（水） 09:52 ID:.JRyGlRG
- 初めまして。
私も勉強中の身なので正しく書けている自信は無いのですが、動作的にはこんな感じでしょうか。
関さんの書かれたHTML、CSSに少し（便宜的なものも含めて）書き加えてみました。
---------------
HTML
<div id="navigation">
<ul>
<li id="01"><a href="">01</a></li>
<li id="02"><a href="">02</a></li>
<li id="03"><a href="">03</a></li>
<li id="04"><a href="">04</a></li>
<li id="05"><a href="">05</a></li>
<li id="06"><a href="">06</a></li>
</ul>
</div>
---------------
CSS
#navigation li {
margin: 0;
padding: 0;
display:inline;
width: 100px; ＊追記
float: left; ＊追記
}
---------------
上記のように、li要素の幅を100px（単純にdivの横幅を要素の数で割った数値）に指定、更に左に回り込ませるように指定してみました。
HTMLの方は<a href="">が無ければCSSのa:hoverが適応されないため便宜上仮に表記しています。
見当違いでしたら申し訳ないです。
-
4 名前： 匿名 ： 2006/12/06（水） 09:52 ID:OW7cJmk5
- idの命名は数字で始めてはいけません。
-
5 名前： 関 ： 2006/12/06（水） 09:52 ID:bsb8dOwQ
- 皆様ありがとうございました。お礼申し上げます。
ありあがとう
