- ベストアンサー
MTのリストマークが消えない！！！
MTでブログ作成をしてます。 ３カラムのメインページの左サイドにリストメニューを置き、リストマークを画像に消したいのですが、どうしてもできません。 ＃メイン <div id="links-left-box"> ～略～ <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> ～略～ </div> ＃スタイルシート #links-left-box ul{ list-sytle-type:none; } お手数ですが、どなたかお教えいただければ幸いです。
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ＞list-sytle-type:none; この部分のスペルが（誤：sytle、正：style）間違っていますね。修正すればきちんと動作しますよ。
関連するQ&A
- プレビュー画面でリストマークが消えない
いつもお世話になります。 DW CS3でナビゲーションバーを作成しようとしているのですが、CSSでlist-style:none;やlist-style-type:none;にしてもリストマークが消えてくれません。 さらにfloat:left;を使っても横並びになってくれません。 デザイン画面ではリストマークも消え横並びになっているになぜかプレビューで確認すると反映されていないのです。 HTMLおよびCSSは下記の通りです。 どなたか詳しい方、ご教授願います。 HTML <div id="nav"> <ul> <li class="nav01"><a href="#0"><img src="images/keybridge.gif" border="0" /></a></li> <li class="nav02"><a href="#n" class="style14">News</a></li> <li class="nav03"><a href="#s" class="style14">Schedule</a></li> <li class="nav04"><a href="#a" class="style14">Access</a></li> </ul> </div> CSS #nav { background:#FFFFFF } #nav ul{ width:100%; margin:0 auto; overflow:hidden; } #nav li { width:25%; float:left; list-style:none; } #nav a{ display:block; text-align:center; text-decoration:none; } #nav a:hover{ background:#CCCCCC }
- ベストアンサー
- CSS
- <ul>と<li>リストマークを消すのはどちら？
CSSの質問です。 <ul>と<li>でリストマークを消すために list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか？ どちらに設定してもリストマーク消えますけど。 どちらに設定したら規格上違反とかありますか？
- ベストアンサー
- CSS
- 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}
- 締切済み
- ブログ
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- CSSIE7でレイアウトが崩れます（リストスタイル..)
はじめまして ノブタです TAGの掲示板でもご質問いたしています。 急いでいますのでなりふり構わずすみません。 ２コラム型（入れ子）のHP作成で 左側にメニュー項目を作成しました。 あらかじめCSSでlist-styleはnoneを指定いたしています。 作成過程で（Dreamweaver）上でもリストスタイルは表示されませんでした。 もちろんIE6でもレイアウトのズレも無くリストスタイルも無い状態で表示されていました。 しかし、IE７では（Dreamweaver）上でも作成過程からリストスタイルが表示されレイアウトが右に膨らみ崩れます。 初期化する意味でimportで読み込ませてみたり、*:first-child+html { }や アンダーバー＿ を子セレクターを使用したり トライしてみるのですが上手く反映されません。 リストマークがIE7で現れ本当に困っていいます。 助けてください お願いいたします。 （基本的なCSSができていようで勘違いしています） ソースは以下のような感じですが..... 教えて頂けたら嬉しいのですが 宜しくお願いいたします。 /!------CSS------/ #menus{ float:left; margin-left:1px; margin-top:10px; margin-bottom:25px; margin-right:3px; width:162px; background-color: #FFFFFF; clear: both; list-style:none; display:block; } *:first-child+html #menus{ list-style:none; } /!--こんな感じで試しています。--/ UL#menus{ margin:35px 5px 0px 0px; width:162px; height:400px; background-color:#FFFFFF; clear:left; display:inline; list-style:none; _list-style:none;/!--こんな感じで試しています。--/ } ul menus { /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus{ list-style:none; }/!--こんな感じで試しています。--/ UL#menus LI { clear: both; hight: 162px; list-style:none; list-style-position:inside; } ul menus li{ /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus li{ list-style:none; } /!--こんな感じで試しています。--/ /!--*一回一回記述してみたり削除してみたり試しています。--/ /!-----以上がCSSです----/ ｈｔｍｌは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" href="reset.css" type="text/css" media="all"> <link rel="stylesheet" type="text/css" HREF="CSS/details3000.css"> <!------//////// 省略 ////////////---> <div id="left"> <div id="menus"> <ul> <li id="menus01"> <li id="menus02"><a href=""></a></li> <li id="menus03"><a href=""></a></li> <li id="menus04"><a href=""></a></li> <li id="menus05"><a href=""></a></li> <li id="menus06"><a href=""></a></li> <li id="menus07"><a href=""></a></li> <li id="menus08"><a href=""></a></li> </ul> </div> <ul id="menus" > <LI> <img src="imges/leftmenus/sp002.gif" onmouseover="setRollOverImg(0, this)" onmouseout="setRollOverImg(1, this)" /></LI> <LI> <img src="imges/leftmenus/sp003.gif" width="162" height="30" onmouseover="setRollOverImg(2, this)" onmouseout="setRollOverImg(3, this)" /></LI> <!-----以上がソースです。------> リストマークが消えません 教えてください 宜しくお願いいたします。
- 締切済み
- HTML
- リストに指定したマークの位置がずれてしまいます
特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>
- ベストアンサー
- HTML
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- リスト表示を左に寄せたい
いつもお世話になります。 下記のような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
お礼
すいません。 素で間違えてました（汗） ご指摘ありがとうございます！