- ベストアンサー
表示の違うリストの設定について
お世話になります。立て続けの投稿で恐縮いたします。 現在、ページ内に縦表示のリストがあり、CSSでは ul{ list-style: none; margin: 0px 0px 0px 1px; padding-left: 0; padding-right: 0; } li a{ text-decoration: none; display: block; padding: 5px; width: 170px; border-bottom: 1px solid #e6e6e6; color: #000000; background: #ffffff; } li a:hover{ text-decoration: none; color: #ffffff; background: #fffaec; } となっているのですが、縦表示とは別に横表示のリストを設置したい場合、どのようにすれば良いのでしょうか？ 凄く初心者のような質問で恐縮ですが、通常のテキストであれば単にクラスなどで変更できますが、このリストはどのようにしたらいいのか分かりません。 手元にある本は形式の違う対処法などは載っていなく、検索しても、調べた範囲ではどれも一種類のみのケースしか紹介がなく、その対処法が分からずにいます。 お恥ずかしい質問とは重々承知していますが、アドバイスのほど頂戴出来れば幸いです。宜しくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞通常のテキストであれば単にクラスなどで変更できますが、 リストも同じくclassで指定すればよいです。 もちろん、classを使わず詳細度や、隣接セレクタ、子セレクタ、子孫セレクタで区別できれば、それを使ってもできます。 よく使われるのが下記のようなHTMLの場合ですかね。 <body> <div> <h2>見出し</h2> <p>段落</p> <h3>目次</h3> <ul> <li><a href=""></a></li> </ul> <div> <ul> <li><a href=""></a></li> </ul> </body> このようにclassがなくても、区別できます。
お礼
ORUKA1951様 こんばんは。ご親切なアドバイスをありがとうございます。 divで別ければクラス指定しなくとも区別出来るという事でしょうか。 これまでCSSはあまり触ったことがないので（つい最近）、とても勉強になります。 有難うございました。
関連するQ&A
- CSSについて リスト表示のリストマークの表示位置
カテゴリをリスト表示すると左揃いにならず、 なぜが左に余計な空白というか空間ができてしまいます。 リスト表示のリストマークの表示位置をもっと左にするにはどうすればいいですか？ /* カテゴリー */ div#sidebar-left li {font-size: 0.75em; list-style-type: none; background-image: url(listmark.png); background-repeat: no-repeat; padding-left: 16px; margin-bottom: 4px; vertical-align: top} div#sidebar-left li a{color: #000000; text-decoration: none} div#sidebar ul{padding: 0; margin: 8px 8px 20px}
- 締切済み
- ブログ
- リスト表示を左に寄せたい
いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト（全体）が左に寄らないので困っています。 できたらボックス（id-=navi）の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ （ちなみに3段組みの一番左のボックスです） 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- ベストアンサー
- HTML
- 強制的に背景色を指定
#topics ul li a{ font-size: 14px; padding: 5px; text-decoration: none; background: #FFFFFF; } #topics ul li a:hover{ background: #FF6633; font-size: 14px; padding: 5px; text-decoration: none; color: #FFFFFF; } 以上のようなCSSを定義してリンクのボックスを置いているのですが、 <div id="topics"> <ul> <li><a href="～">～～</a> この場合マウスを置いたときに背景色反転するのですが、 何もしないときにも強制的に背景色反転させるにはどうすればいいのか なかなか実現できなくて悩んでおります、いい定義方法はないでしょうか。
- 締切済み
- HTML
- ドリームウィーバーでリスト作成すると余白ができる
ドリームウィーバーで、CSSでサイドナビをつくっています。 リストをたてにし、1項目づつボーダーでかこっています。 IE でも ファイアーフォックスでもきれいに表示されるのですが、 ドリームウィーバー上では、左に余白ができる分、右に飛び出し、 その横のボックスが下にずれるということが起こっています。 ご指導お願いします。 ～html <div id="sidenavi"><img src="img/sidenavi.jpg" width="180" height="165"> <ul> <li> AAAAAAA</li> <li class="menu">BBBBBB</li> <li class="menu">CCCCCCC</li> <li class="menu">DDDDDDD</li> <li>HTML</li> <li>プログラム</li> </ul> </div> ～CSS #sidenavi { float: left; height: 600px; width: 180px; margin: 0px 0px 0px 2px; padding: 0px; background-color: #FFFFFF; background-image: url(img/rose.jpg); background-repeat: repeat-y; } ul { padding: 5 0 0 0px; margin: 0px; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:25px; margin: 0 0 0 0px; padding: 5 0 0 10px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "ＭＳ Ｐゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; } .menu{ margin-left: 0px; padding-left:19px; background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; }
- ベストアンサー
- ホームページ作成ソフト
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
- CSSのリスト表示
リストの表示ですが、li a で上下と左にpaddingを入れたいです。 IEではOKなのですが、Firefoxでは右に背景色が飛び出てしまいます。 どこを直したら良いでしょうか。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> で組んでいます。 #category { width: 180px; float: left; } #categoryt ul { border-top: 1px solid #999999; } #category li { border-bottom: 1px solid #999999; } #category li a { display: block; width : 100%; padding: 5px; background-color: #F6F6F6; text-decoration:none; color: #000033; } #category a:hover { background-color: #DBE7EE; color: #003366; } --------------------- <div id="category"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div>
- ベストアンサー
- HTML
- IEでリストが横に並ばない
http://www.1uphp.com/con2/over/over2.html のサイトを参考にリストを横に並べようとしてます。 Firefoxではちゃんと表示されるのですがIEでは縦になってしまいます。Float:left;をdisplay:inline;に変えてみても結果は同じでした。 また何故かマウスのロールオーバーした時にリンクを「白」に設定してあるのですがこれも1部分以外反映されません。 どなかた解決策が分かる方いましたらお手数ですがよろしくお願い致します。 ul{ width:540px; height:35px; list-style:none; text-align:center; font-size:145%; font-weight:bold; line-height:100%; } li{ font-size: 0.8em; color: #333333; float:left; } a{display:block; width:100%; height:100%; background-image:url(); background-position:0px 0px; background-repeat:no-repeat; color:#ffffff; text-decoration:none; } a:link{ color: #3333ff; } a:hover{ background-image:url(); background-position:0px -35px; color:#ffffff; } a:visited{ color: #333333; }
- ベストアンサー
- HTML
- CSSのtext-decoration: none;が効かない
こんにちは。 ＣＳＳでリストタグ内のリンクのアンダーラインを消すために、 .side_menu li { line-height: 100%; border-bottom: 1px solid #FFFFFF; } .side_menu a { display: block; padding-left: 30px; background: #FFFFFF; width: 160px; text-indent: -17px; text-decoration: none; } .side_menu a:hover { background: #BDE2F7; text-decoration: none; } としました。 作業しているうちに、きちんと消えていたリンクのアンダーラインが付いているのに気づきました。 すべてにではなく、数行なのです。付いてないところもあります。 htmlにゴミが入ってるのかと思い、再入力したのですがなぜか傷が広がります。 こんな現象って・・・？ text-decoration: none;を効かせるには、どう対処すればいいのでしょうか？ よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- ナビゲーション表示のCSSについて質問させて下さい。
ナビゲーション表示のCSSについて質問させて下さい。 本を参考に以下のようなソースを試しているのですが、各メニューの幅を統一するためにはどうしたらいいのでしょうか？ 試しにと、width: 200px;として、li内に設定したりしていますが、変わる気配がありません。 /*css*/ ul{ list-style: none; text-align: center; margin: 30px 0px; color: #fff; } li{ display: inline; white-space: nowrap; } li a{ text-decoration: none; padding: 10px 10px; color: #fff; background: transparent; background: #f60; } li a:hover { color: #fff; background: #fc0; } ～html～ <ul> <li><a href="A.html">項目Ａ</a></li> <li><a href="B.html">項目Ｂ</a></li> <li><a href="C.html">項目Ｃ</a></li> <li><a href="D.html">項目Ｄ</a></li> <li><a href="E.html">項目Ｅ</a></li> </ul> お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。 お忙しいなか恐縮ですが宜しくお願い申し上げます。
- ベストアンサー
- HTML
- CSSでの個別hover設定
<div id="navi"> <ul> <li><a href="#"> HOME</a></li> <li><a href="#"> サービス概要</a></li> <li><a class="hae" href="#"> aaaaa</a></li> <li><a href="#"> 会社概要</a></li> <li><a href="#"> お問い合わせ</a></li> <li><a href="#"><span class="1"> サイトマップ</span></a></li> </ul> </div> #navi ul{ font-size: 12px; list-style: none; margin: 0 0 0 10px; padding: 0 0 0 0; border-top: 1px solid #ccc; } #navi li{ margin: 0; padding: 0; border-bottom: 1px solid #CCC; background: #ffffff url(../img/image133.gif) left center no-repeat; } #navi{ width: 150px; } #navi a{ background: #ffffff url(../img/image131.gif) no-repeat left center; padding: 4px 0 4px 0px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } #navi a:hover { background: #FFFFFF url(../img/image133.gif) left center no-repeat; padding: 4px 0 4px 0px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333; text-decoration: none; } #navi .hae{ background:none; padding: 4px 0 4px 10px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } #navi .hae:hover{ background:none; padding: 4px 0 4px 10px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } 現在、上記の内容で作成しているのですが、サービス概要の下にある aaaaだけを画像表示をOFFにしたいと思ってます。 クラスを設定してカーソルを載せていない時の非表示は出来たのですが ロールオーバー時の画像が表示されてしまいます。 CSSでのクラスhoverの記述が間違っているのでしょうか？ ご教授お願い致します。
- ベストアンサー
- HTML
お礼
torayoshi様 こんばんは。早速のアドバイスをありがとうございます。 uiと、liの組み合わせというか、どちらにクラス指定をしたらいいのか分かりませんでした。お恥ずかしい話ですが・・ いずれにせよお伺いして勉強になりました。 有難うございました。