- ベストアンサー
LI タグでメニュー
aegillsの回答
- aegills
- ベストアンサー率70% (7/10)
すみません、＃４です。 liをfloatしって何でしょうね・・・ liをfloat:leftでお願いします。 ちなみに、サンプルの表示はIE8, FireFox3.5, Chrome2で確認しています。 IE6やIE7だと崩れるかもしれませんが、その辺はCSSハックするなり、Javascript使うなりで対処してください。
noname#100277
- noname#100277
noname#119957
関連するQ&A
- <li>タグでメニューを作った場合
横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか
- ベストアンサー
- CSS
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- <li>リストで横メニューを作るわけ
CSSで作成する際、 <li>リストを横書きにしてメニューに使う方法をよく見かけます。 <li>リストを使わなくても同じような横のメニューは作れますが、なぜ、あえて<li>リストを使って作るのでしょうか。 <li>を使うとメリットがあるという理由があったら教えてください。
- 締切済み
- ホームページ作成ソフト
- <li>タグを使って横並びメニューボタンを作成する際ベストな手法とは？
CSSで、横並びのメニューボタンを作成しています。 （文字も画像にしています。） imgタグで並べるのではなく、liタグを使って、テキストは表示しないようにしたいと思い、下記のようなソースで記述しました。 /*htmlソース*/ <li class="tmenu01"><a href="sample">はじめに</a></li> /*cssソース*/ li.tmenu01 { display:block; width:126px; height:31px; background:url(image/menu01.gif) no-repeat; text-indent:-9999px; float: left; } しかし、text-indent:-9999px;とfloat: left;をいっしょに使用すると、背景画像・文字とも表示されなくなってしまいます。 いろいろネットを調べてみたのですが、文字を飛ばす+横並びのバージョンの解決方法が見つからず、方法がわかりません。 いい方法がありましたら、どなたか教えてください…m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- dreamweaver cs4 で<li>タグのcssについて
dreamweaver cs4 で<li>タグのcssの設定を以下のようにしました。 自分は下の図のように単語と単語の間を空けたいのですが、どうもうまくいきません。 設定方法ご存じの方、いらっしゃいましたら教えていただけたら嬉しいです。
- 締切済み
- ホームページ作成ソフト
- cssだけで縦書き的にliを並べる
すみません、質問させてください。 <ul> <li>1</li> <li>2</li> … <li>10</li> </ul> を、 1 6 2 7 3 8 4 9 5 10 と、並べる方法はありますでしょうか？ ただし、liの数は1～10の間で変動し、 ulは常に親要素の中央に配置させたいです。 ※liのwidthを100pxとした場合、 liの数が5以下の場合はulもwidthが100pxで親に中央配置、 liが6以上の場合はulのwidthが200pxになって親に中央配置。 cssだけで実装できる方法があればご教授ください。
- ベストアンサー
- CSS
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- <li>で並べたメニューのリンク色指定class
<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。 図のような状態で、MENUは（赤）、TOPは（青）と２種類の色分けをしたメニューバーを作っています。 それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが うまくいきません。 ●現在やっている方法 ・htmlでリストを組み、それぞれリンクタグにクラス指定 MENU（赤） … class="menu" TOP（青） … class="top" ・cssでclassのリンク色a、a:hoverを指定 【html】 <ul> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="top">TOP</a></li> </ul> 【css】 a.menu:link { color: #000000; border-left-width: 5px; border-left-style: solid; border-left-color: #ff0000; padding-left: 5px; font-size: 10px; margin-right: 10px; } a.menu:hover { color: #cccccc; border-left-width: 5px; border-left-style: solid; border-left-color: #ffc5c5; padding-left: 5px; font-size: 10px; margin-right: 10px; } …class="top"（青）も同じ感じ ---------------------------- クラスごとのリンク色指定がうまく認識されていない気がします。 記述が間違っているのでしょうか？それともそもそもこの方法が間違っているのでしょうか？ お恥ずかしながらこの場を借りて質問させて頂きました。 色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。
- 締切済み
- HTML
- JQueryで、liタグの背景に色を付けたい。
JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか？(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>
- ベストアンサー
- JavaScript
- スマホだと<li>に・が出るのですが
Wordpressを使ってホームページを作成しています。 初心者です。 ショッピングサイトを作成する際 <ul>と<li>を使って、商品の画像、商品名、カートボタン、この３っつを横並びにした一行を作り、 それをいくつも重ねて、一覧表の中で買い物をできるような感じの物を作りました。 ところが、スマートフォンで見ると、 <li>を使ったところに・が入ります。 パソコンの方では、CSSでtable-cellと書いているので、それで・が見えないのだと思います。 何か改善の方法はありますか？
- ベストアンサー
- CSS