人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

cssについて

下記のようなulの入れ子のメニューを作り、
cssで menu と menu2 にそれぞれ別の背景画像を
表示できるcssを教えてください。

画像は例として横200px、縦50pxでお願いします。

<li class="menu2">は数が増えたり減ったりとかわりますので
<ul class="menu2">の縦幅を固定はできません。


<ul class="menu">
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a>
<ul class="menu2">
<li class="menu2"><a href="x" class="menu">xxx</a></li>
<li class="menu2"><a href="x" class="menu">xxx</a></li>
</ul>
</li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
<li class="menu"><a href="x" class="menu">xxx</a></li>
</ul>

お願いします


●質問者: worldtravel
●カテゴリ:ウェブ制作
✍キーワード:CSS UL 画像
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● wizemperor
●5ポイント

どんな感じにしたいのかが伝わらないんですが、

ul.menu {
 width: 200px;
 background: url(画像ファイル) repeat-y 0 0;
}

ul.menu2 {
 background: url(画像ファイル) repeat-y 0 0;
}

という感じで良いのでは?


高さが伸びてもいいように、画像の高さを大きめに作っておくか、リピートしてもいいようにつくる感じになるでしょう。

あるいは、画像を縦2分割(上側・下側)にして伸び縮みするようにするとか。

あるいは、おすすめできませんがスクロールさせるとか。

ul.menu {
 width: 200px;
 background: url(画像ファイル) repeat-y 0 0;
}

ul.menu2 {
 height: 50px;
 overflow: auto;
 background: url(画像ファイル) repeat-y 0 0;
}
◎質問者からの返答

イメージですが

■がmenuで、□がmenu2で、

このように表示したいのです。

■■■■■

■■■■■

■■■■■

□□□□□

□□□□□

■■■■■

■■■■■

それぞれに背景画像を表示したいのですが

入れ子になっているところがどうしても重なってしまったり

ずれてしまったりしますので、こうならない方法を知りたいのです。

入れ子にしなければ簡単にできるのですが...

背景画像というのは

li毎に一枚のがぞうということで、

パターンの画像を縦にズラーっと表示したいのではありません。


2 ● wizemperor
●5ポイント

ナビゲーション的なものと想像してるんですが、リストマーカーはあり・なしのどちらでしょう。

なしなら、li要素ではなくa要素の背景にしてみてはどうでしょう?

ul.menu,
ul.menu li,
ul.menu2,
ul.menu2 li {
 margin: 0;
 padding: 0;
 list-style: none outside;
}

ul.menu {
 width: 200px;
}

ul.menu li a,
ul.menu2 li a {
 line-height: 50px;
 display: block;
}

ul.menu li a {
 background: url(画像ファイル1) no-repeat 0 0;
}

ul.menu2 li a {
 background: url(画像ファイル1) no-repeat 0 0;
}

リストマーカーありなら、入れ子の部分はクラス名を変えるとかして細かい調整が必要でしょうね。

どちらにしても、高さを固定することは不可能ですし、環境によっては返って不格好に表示されるので、フレキシブルなデザインのほうがいいとは思いますけどね。

◎質問者からの返答

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


3 ● Q-A
●70ポイント ベストアンサー

ul{margin:0px;margin-left:0px;padding-left:0px;width:200px;display:block; }

li{list-style-type:none;width:200px;line-height:50px;margin-left: 0px;}

.menu{background: url(任意);}

.menu2{background: url(任意2);}

こんな感じでどうでしょう?

えっと忠告ですが、クラス名はULだけにつけたほうが、管理が楽だと思います。

◎質問者からの返答

できました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ