- ベストアンサー
liにスタイルシートが上手くいかない
LLLunaの回答
書き方が間違っていると思います。 ul要素に直接配置できるのはli要素のみです。 この書き方では、ul要素に直接ul要素が書かれています。 そのため、IEの場合は恐らく、aaaの直後にある</li>をゴミとして無視してしまっているものと思われます。 <ul> <li style="border:1px solid red">aaa</li> <li> <ul> <li>bbb</li> </ul> </li> </ul> 或いは、 <ul> <li><div style="border:1px solid red">aaa</div> <ul> <li>bbb</li> </ul> </li> </ul> と書けば（divは任意の要素に置き換え可）、解決すると思います。
関連するQ&A
- スタイルシート
さっそく質問させていただきます。 <table border> <tr> <td rowspan="3"> <h3>AAA</h3> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </td> <td> <h3>BBB</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>CCC</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>DDD</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> </table> このタグを記述すると左に右の三つのセルをまたがったセルが表示されると思うのですが、これと同じレイアウトをスタイルシートで表現するにはどのように記述すればよいのでしょうか？ 左側に一つのボックスを置いて、その直ぐ隣に三つのボックスを置きたいのです。
- ベストアンサー
- CSS
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- スタイルシートテーブルの罫線を細くしたい
例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか？ <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>
- ベストアンサー
- その他（インターネット・Webサービス）
- css の float:left; を li 適用
css の float:left; を li に適用すると <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> <li>AAA</li> <li>BBB <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB ●CCC □aaa□bbb のように表示されます これを ●AAA●BBB●CCC □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートで罫線をもっと細くしたい
IE6.0です、 テーブルの罫線をもっと細くしたいのですが、 border-widthは1pxが一番細いのでしょうか？ この教えてgooくらい細くしたいのですが 他にやり方があれば教えてください。 TABLE { border-color: #8b4513; padding: 1px 1px 1px 1px; margin: 1px 1px 1px 1px; border-style: solid; border-width: 1px 1px 1px 1px; } 宜しくお願いします、
- ベストアンサー
- HTML
- HTMLコーディング（onMouseOver,onMouseOut）
ＨＴＭＬコーディングで質問します。 やりたいこと：下記コードのように、<div></div>の間について、onMouseOver,onMouseOutにより、枠線を表示、非表示にする。 理由：下記コードの場合、<div></div>がない場合、「1. Hxxxx」にリンクが張られているが、呼び出されるPDFファイルの内容は、(1) Cxxxx、(2) Sxxxxを含んでいることを明確にしたい。 テスト結果：FireFoxでは狙い通りになるが、IEでは動作しない。また、DreamWeaverではエラー（HTML4.0）となります。 <div onmouseover="this.style.border='1px solid black'; this.style.padding='0px 0px 0px 0px';" onmouseout="this.style.border='0px'; this.style.padding='1px 1px 1px 1px';"> <ul> <li><a href="pdf/3.pdf">1. Hxxxx</a> <ul> <li>(1) Cxxxx</li> <li>(2) Sxxxx</li> </ul> </li> </ul></div>
- ベストアンサー
- その他（プログラミング・開発）
- display:table;を多段表示させたい
<style> .navi { display:table; } .navi li:nth-child(3n+1) { display:table-row; color:#F00; } .navi li { display:table-cell; width:50%; } /* 色づけ */ * {margin:0;padding:0;list-style:none;} .navi {width:600px;border-top:solid 1px #CCC;border-left:solid 1px #CCC;margin:0 auto;} .navi li {border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:5px;} </style> <ul class="navi"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>ｆ</li> </ul> こうすると、1,4,7,10…番目の要素が改行されますが、 <li></li>に何も入れないようにしなければならず、 行き詰ってしまいました。 table要素で多段表示させることはできないのでしょうか？
- 締切済み
- CSS
- ul liのclass指定について
表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか？ また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします！ 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }
- ベストアンサー
- CSS
- ul liが一行目だけずれる（IE7）
表題通りなのですが、IE7で確認するとul liの一行目だけがなぜか左にずれてしまいます。 原因が分からず困っています。 どなたか教えて頂けませんでしょうか。 宜しくお願い致します。 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; } div#side ul#sidenav { list-style-type:none; border: 1px solid #ccc; } div#side li { position:relative; width: 165px; height:40px; background:url(../common/bg.jpg) no-repeat center; padding: 1px; margin: 5px; } 【html】 <div id="side"> <ul id="sidenav"> <li>test</li> <li>test</li> <li>test</li> </ul> </div>
- ベストアンサー
- CSS
お礼
<ul>の下には<ul>を入れれるものと勘違いしていたようです。ありがとうございました。