- ベストアンサー
CSSでliのマーカーの位置を変更したいです。
scorpion2009の回答
- scorpion2009
- ベストアンサー率0% (0/4)
＞マーカーの位置をテキスト側（右側） これは画像(マーカー)をテキストの後ろに表示したいと言うことなのか、あるいは画像(マーカー)をテキストの前に表示したいのだが、マーカーとテキストの間隔が広いので、それを縮めたいだけなのかが文面からはよく分かりません。 後者ならば、list-style-imageよりも、backgroundで指定した方が良さそうです。 たとえば、 ［HTML］ <li>目次１</li> ［CSS］ li{ padding-left: XXpx; background: white url(marker.gif) no-repeat left center; } marker.gifがマーカー画像ファイル、XXにはマーカー画像ファイル横幅より少し大きめの値をピクセルで指定します。この値を調整することによってマーカー画像とテキストの間隔を調整できます。
関連するQ&A
- リストの回り込みについて（マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。
- ベストアンサー
- HTML
- CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。
.ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>１１１１１</li> <li>２２２２２</li> <li>３３３３３</li> <li>４４４４４</li> <li>５５５５５</li> <li>６６６６６</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE６と７でも違う表示になりました（IE6だとかなり右寄り） operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか？ どうかよろしくお願致します。
- ベストアンサー
- HTML
- リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法は？
HTMLの<li>タグでリスト文章をつくるとき、list-style-positionでoutsideにしているボックスの外にリストマーカーが配置されてしまうので論外ですし、かと言ってinsideにしても<li>タグ内の文章の二行目以降がリストマーカーと同列に配置されてしまい、<li>内の文章よりも左側にリストマーカーがはみ出してくれないのでリストマーカーが<li>内の文章に埋没してしまって見にくくて困っており、回避策を探しております。 リストマーカーをボックス内に収めて、かつ、<li>内の文章だけをリストマーカーよりもインデントする方法はないのでしょうか？ 【現在の問題な状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 【希望する正しい状態】 ● list-style-positionをoutsideにした場合：リストマーカーがボックスモデルからはみ出してしま ってしまう問題がある ● list-style-positionをinsideにした場合：リストマーカーがボックスモデル内には入って配置して くれるのの、文章がインデントされてしまう問題がある 宜しくお願いいたします。
- 締切済み
- HTML
- リストを横に並べるとマーカーが消える
お世話になります。 標題の通りなのですが、cssでリストを横に並べると、マーカーが消えてしまいます。 マーカーを表示させたいのですが、できないのでしょうか？ ちなみに今現在の指定は下記のような感じです。 ご教授よろしくお願い致します。 UL { list-style-image: url(hoge.gif); } LI { float: left; width: 50%; }
- 締切済み
- HTML
- cssのclassについて
よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？ きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか？ コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML
- list-styleでの画像CSS設定について
list-styleのをCSS設定で画像を指定しています。 文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？ 現在のCSSはこのように設定しています。 .style_1 { list-style-image: url(画像url.gif); } フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。 また、リスト画像とli要素(文章)までの間隔も離したいです。 CSSに詳しい方がいましたら、ご教授下さいませ。
- 締切済み
- ブログ
- CSSでリストマーカーを背景画像表示した場合のブラウザ（OS）間のずれ
よくある手法だと思いますが、<li>に背景画像を表示し擬似的にマーカーを表示しています。 簡略化した例を下記に書きます。 例） ---------- HTML <ul> <li>リスト1</li> <li>リスト2</li> </ul> ---------- CSS * { padding: 0; margin: 0;} body { font-family: Osaka,'ＭＳ Ｐゴシック',sans-serif; font-size: 12px; line-height: 1.4; } ul, li { list-style: none;} li { back-ground-image: url(～～～～.gif); /* 5px×5pxのマーカー */ back-ground-position: 0 2px; /* winでジャストの位置 */ back-ground-repeat: no-repeat; padding-left: 10px; } テストブラウザはwin:IE/Firefox、mac:safari/firefoxです。 上記の例でwinではジャスト表示なのですが、macでは予想以上に上にマーカーが表示されてしまいます。 back-ground-position: 0 center; にすると全体的に若干予想より下にきてしまい、IEではかなり下に来てしまいます。 line-heightや画像サイズを変更したりしてみましたがなかなかうまくいきません。 他に何かよい方法はありますでしょうか。
- 締切済み
- CSS
- list-style-image・・マーカーとコンテンツの距離
縦横15ピクセルのmarker.gifを使って、リストのマーカーに指定したいのですが・・・ たとえば、このようにすると、 ul { margin: 0px; padding: 0px; } li { background-color: lightgrey; margin: 0px 0px 5px 15px; padding: 0px; list-style-image: url("marker.gif"); list-style-position: outside; } IEやOperaでは、マーカーのすぐ左にコンテンツ（灰色の背景色つき）がくるのに対して、 Firefoxでは、マーカーとコンテンツの間に何ピクセルか隙間ができて、結果、マーカーが親エレメントより左側にはみ出してしまいます。 CSS2の仕様をしらべると、「marker-offset」というプロパティがあるようなのですが、まだブラウザが未対応のようで・・・ この隙間は、どういう定義なのでしょうか？規定値が決まっていたりするのでしょうか？ また、変更することはできないのでしょうか？
- ベストアンサー
- HTML
- CSSリストタグ
<div class="test_box_1"> <ul> <li>テキスト <img src="img/icon.gif" width="20" height="20"></li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> </div> こういった記述をして、リストの横にアイコン画像を出そうとしたのですが、 アイコンを入れると、バランスが崩れます。 （アイコンを入れた下に余白ができてしまったり。） アイコンの高さを小さくしてみたりといろいろやってみたのですが できません。 制御する方法はあるのでしょうか？ ちなみに、CSSはこのように記述しています。 .test_box_1 ul { list-style-type: none; width: 100%; margin: 10px 0px 0px 10px; } .test_box_1 li { display: block; width: 30%; background-image: url(../images/list_arrow2.gif); background-repeat: no-repeat; background-position: 0px 3px; padding-left: 10px; float: left; } よろしくお願いします！
- ベストアンサー
- HTML