みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssのfloatで右にメニューを出す方法を勉強し

cssのfloatで右にメニューを出す方法を勉強しています。

ヘッダの左にロゴ(クリックをするとTOPへ飛ぶ)
右にメニューを横並びで表示したいです。
_________

■   ■■■■
ロゴ  メニュー
_________

のようにしたいのです。

例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、
メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると

☆★☆★css☆★☆★

/* abc */
#header ul.abc{
float:right;
margin: 0 ;
padding: 0 ;
width: 400px;
}

#header ul.abc li {
float:left;
display: inline;
}

/* 01 */
#header ul.abc li.01 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.01 a {
display: block;
background: url(../img/01.jpg) no-repeat top left;
}

#header ul.abc li.01 a:hover {
display: block;
background: url(../img/01_om.jpg) no-repeat top left;

/* 02 */
#header ul.abc li.02 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.02 a {
display: block;
background: url(../img/02.jpg) no-repeat top left;
}

#header ul.abc li.02 a:hover {
display: block;
background: url(../img/02_om.jpg) no-repeat top left;

/* 03 */
#header ul.abc li.03 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.03 a {
display: block;
background: url(../img/03.jpg) no-repeat top left;
}

#header ul.abc li.03 a:hover {
display: block;
background: url(../img/03_om.jpg) no-repeat top left;

/* 04 */
#header ul.abc li.04 {
width:100px;
height:50px;
margin:0 0 0 0;
}

#header ul.abc li.04 a {
display: block;
background: url(../img/04.jpg) no-repeat top left;
}

#header ul.abc li.04 a:hover {
display: block;
background: url(../img/04_om.jpg) no-repeat top left;


☆★☆★html☆★☆★

<div id="header">
<div class="logo"><a href="">ロゴ</a></div>

<ul class="menu">
<li class="01"><a href=""01</a></li>
<li class="02"><a href="">02</a></li>
<li class="03"><a href="">03</a></li>
<li class="04"><a href="">04</a></li>
</ul>
<div class="clear"></div>
</div>

これは例なんですが、
この記述できると思ったのですが、うまくいかず困っています。
何か足りないのでしょうか?それともcssで何か勘違いをしているのでしょうか?
お手数をおかけしますが、ご教授お願いします。

投稿日時 - 2010-11-28 19:04:07

QNo.6349853

困ってます

質問者が選んだベストアンサー

}の抜けている部分が多いので単純に記述ミスのところが多そうです。
もう少し重複する指定を減らすようにすれば見やすくなると思いますよ。
横幅がマージン分取られていなかったりもします。
あと、クラス名は数字からは始められません。英字、もしくは日本語に書き換えましょう。


/* menu */
#header ul.menu{
float:right;
margin: 0 ;
padding: 0 ;
}

#header ul.menu li {
float:left;
display: inline;
width:100px;
height:50px;
margin:0 10 0 0;
}


#header ul.menu li a {
display: block;
width:100px;
height:50px;
}

/* 01 */

#header ul.menu li.m01 a {
background: url(../img/01.jpg) no-repeat top left;
}

#header ul.menu li.m01 a:hover {
background: url(../img/01_om.jpg) no-repeat top left;
}

/* 02 */

#header ul.menu li.m02 a {
background: url(../img/02.jpg) no-repeat top left;
}

#header ul.menu li.m02 a:hover {
background: url(../img/02_om.jpg) no-repeat top left;
}

/* 03 */

#header ul.menu li.m03 a {
background: url(../img/03.jpg) no-repeat top left;
}

#header ul.menu li.m03 a:hover {
background: url(../img/03_om.jpg) no-repeat top left;
}

/* 04 */
#header ul.menu li.m04 {
margin:0;
}

#header ul.menu li.m04 a {
background: url(../img/04.jpg) no-repeat top left;
}

#header ul.menu li.m04 a:hover {
background: url(../img/04_om.jpg) no-repeat top left;
}


<ul class="menu">
<li class="m01"><a href=""01</a></li>
<li class="m02"><a href="">02</a></li>
<li class="m03"><a href="">03</a></li>
<li class="m04"><a href="">04</a></li>
</ul>

投稿日時 - 2010-11-29 00:21:37

お礼

すごいです!!できました!!!

はじめに全ての「li」にマージンを指定して
最後の「04」でマージンを0に指定するっていう方法があるんですね!!!

とても勉強になりました。

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

投稿日時 - 2010-11-29 09:14:19

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問