- 締切済み
ccs記述に、#xxx li {
tomoticksの回答
- tomoticks
- ベストアンサー率100% (1/1)
構造擬似クラスで指定されたらどうでしょう？ #xxx li:nth-child(番号) 例えば二番目だけ変えたいなら list-style:nth-child(2){ url(../images/zzz.gif) inside; } みたいな
関連するQ&A
- 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
- ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい
こんにちは。ページのメニューバーを<li>で作成していますが、 リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。 ・【横並び】 ・【リンクあるなし別のボタン背景画像】 ・【hover時も背景画像チェンジ】 の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。 ちなみに、作っておいて、へばった記述例が、以下です。 例）横並びのメニューボタン（メニュー１、２、３） ・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、 ・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------
- ベストアンサー
- CSS
- <li>による横並びメニューの記述法
こんにちは。 CSSで<li>を使って横並びメニューを作っているのですが、メニューのイメージとイメージの隙間を空けるにはどうすればよいのでしょうか？ 現在の記述はこうです。 -----------------html------------------------ <div id="menu"> <ul> <li id="menu01"><a href="index.html"></a></li> <li id="menu02"><a href="business.html"></a></li> </ul> </div><!--menu--> -----------------css------------------------ #menu ul{ margin:95px 0 0 25px; padding:0; width:100%; float:left; list-style:none; } #menu ul li { float:left; } #menu ul a{ text-decoration:none; display:block; width:125px; height:30px; } #menu ul a:hover{ text-decoration:none; display:block; width:125px; height:30px; } #menu01 a{ background-image:url(img/menu01a.gif); background-left:0 0; } #menu01 a:hover{ background-image:url(img/menu01b.gif); background-position:0 0; } #menu02 a{ background-image:url(img/menu02a.gif); background-position:0 0; } #menu02 a:hover{ background-image:url(img/menu02b.gif); background-position:0 0; } 現状だと、画像（menu01.gif）と画像（menu02.gif）がどうしてもつながってしまうんです。 どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- レンタルサーバ・ASP
- HTMLの記述について
HTMLの記述について二つ質問です． (1) ，一つ下のディレクトリにある画像などを参照するとき， a) <img src="images/logo.gif"> b) <img src="./images/logo.gif"> と，どちらの記述でも同じ画像を表示できますが，何か違いがあるのでしょうか． (2) たまに，<br> を <br /> などと記述しているHTMLソースをみかけますが， これらにも何か違いはありますか？ よろしくお願い致します。
- ベストアンサー
- HTML
- CSSのliタグで画像との間に空白ができてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS</title> <style type="text/css"> <!-- li { margin:0px; padding:0px; list-style-type:none; } --> </style> </head> <body> <ul> <li><img src="aaa.gif"></li> <li><img src="bbb.gif"></li> <li><img src="ccc.gif"></li> </ul> </body> </html> こんな感じのソースですけど、画像と画像の間に空白（2pxくらい）が できてしまいます。 画像と画像をくっつけたいのですがどうすればいいでしょうか？ 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLタグのDL DT DDを使ってliやulの代わり
HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、 liの list-style-image: url("test.gif"); がDL DT DDで表現できません。 違った方法で表示できるのでしょうか？ それとも不可能なのでしょうか？
- ベストアンサー
- HTML
- IE7で <li> の一部が消える
IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫） パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！ 「くくく」や「けけけ」に半角でも足したり削除すれば現れたり 右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css"> <!-- .xxx{ margin: 0 auto; width: 797px; background: #000;} .xxx ul{ margin: 0 0 0 12px; padding:0; list-style: none; font-weight: bold; line-height: 2;} .xxx li{ float: left; margin: 5px; text-align: center; white-space: nowrap;} .xxx a{ color: #FFF; text-decoration: none; border:1px solid #999; padding: 4px 5px 1px; } --> </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>
- ベストアンサー
- HTML
- <ul><li>で画像が均等配置せずレイアウト崩れ
<ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。 いつもお世話になります。 添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。 左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。 ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか？どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。 ●HTML <div id="rightmenu"> <div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用 <div id="rightbox-inside-txt"> <p class="title">タイトル</p> <p class="standard-title">コンテンツ内容</p> <p class="standard"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> </ul> </p> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用 </div> </div> </div> ●CSS #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { display:inline; float:left; margin:0; padding-right:10px; } #resultList li.mustright { float:right; padding-right:none; } #resultList li a { display:block; } #resultList li a img { display:block; width:110px; height:100px; border:0; } #rightbox-buttom { clear:both; }
- ベストアンサー
- CSS
- <li>の横並びで、<span>のところで改行
<li>をfloatで横並びにした場合、IE7のみ、<span>のところで改行されてしまい、最後の部分だけ以下のようになります。 ddd ( xx x ) IE8やそれ以外のブラウザは<li>のところで改行され、以下のようになります。 aaa ( xxx ) bbb ( xxx ) ccc( xxx ) ddd ( xxx ) どのようにすれば、IE7も<li>のところで改行され他と同じようになりますか。 実際にはaaa,bbb,xxxの文字などはもっと長いものでたまたま画面右端ぎりぎりにdddまで表示され</span>が区切りになって( xxx )の部分がddd下部に縦に3段くらいで表示されます。 IE8や、他のブラウザは、ddd ( xxx ) がセットで画面に収まらないので、<li>でおりかえされており、このようになってほしいのですが。 よろしくお願い致します。 <ul class="list"> <li><a href="a.html"><span style="color: #cccc99">aaa</span> ( xxx )</a></li> <li><a href="b.html"><span style="color: #cccc99">bbb</span> ( xxx )</a></li> <li><a href="c.html"><span style="color: #cccc99">ccc</span> ( xxx )</a></li> <li><a href="d.html"><span style="color: #cccc99">ddd</span> ( xxx )</a></li> </ul><div style="clear: left;"></div> ul.list{ list-style:none; width:100%; margin: 0 0 .8em 0; padding: 0; } ul.list li { float:left; display: inline; margin-right:.7em; }
- ベストアンサー
- 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
お礼
なるほど！ ありがとうございます！ やってみま～す。