- 締切済み
リストタグの上に変なスペースが・・・
下記の１～４のリストを上下の画像(a.jpg/b.jpg)で囲んでいます。 なぜかa.jpgの下だけに10pxくらいのスペースが開いてしまいます。 解消方法を教えていただけないでしょうか？ 【html】 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="../images/a.jpg" border="0"></td> </tr> <tr> <td background="../images/bg.jpg"><h3> <ul id="pointlist"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </h3></td> </tr> <tr> <td><img src="../images/b.jpg"></td> </tr> </table> 【css】 #pointlist { padding-left: 30px; padding-right: 15px; margin: 0px; list-style-type:square; list-style-position:inside; } #pointlist li{ width: auto; float: left; margin-top: 0px; padding-right: 20px; font-size: 0.9em; line-height: 1em; text-align: left; white-space: nowrap; }
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <h3>のmarginです h3 { margin:0px; } で消えます
<table>だからでは？ 「border="0"」にしてもボーダーは存在します。単にtableタグによって発生する区切りのスペースでしょう。
関連するQ&A
- firefoxのみテーブルのborderが消える
firefoxのみテーブルの上下のborderの一部が消えてしまいます。 ウィンドウのサイズを変えると消える位置が変わります。 消えないための方法はありますか？ 【CSS】 table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } 【HTML】 <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返す。
- ベストアンサー
- HTML
- 真中にならない
HTML <div align="center"> <ul class="u"> <li><a href="index.html"><img onmouseover="this.src='images/home2.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" alt="" border="0" /></a></li> <li>・・・・・ </li> </ul> </div> CSS ul.u { list-style:none; margin: 0px; padding: 0px; } ul.u li{ float: left; list-style:none; display:inline; margin: 0; } これで中央に来ないのですがどうしてでしょうか？ ulではなくtableですと真中にちゃんときます。
- ベストアンサー
- 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
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- 文字を中央表示にしたいのですが
文字を中央表示にしたいのですが、真ん中より右側にずれてしまいます。 タグのどこが悪いのかわかりませんので、教えていただけませんでしょうか。 ＜HTMLタグ＞--------------------------------- <table cellpadding="0" cellspacing="0" id="image"><tr><td valign="bottom"> <ul> <li><a href="home.html">ホーム</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> </td></tr></table> -------------------------------------------------- ＜cssタグ＞-------------------------------------- #image{ border:none; background:url('img/bannar.bmp') no-repeat left top; margin-left: auto; margin-right: auto; width:600px; height:258px; text-align: center; } #image td{ margin:auto; } #image ul{ list-style-type:none; } #image li{ width:150px; margin:10px; padding:0; background-color:#fff; font-size: 14px; text-align:center; text-decoration:underline; } ----------------------------------------
- ベストアンサー
- HTML
- 自作の一段組みのソースを使い、二段組みのサイトを
作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。 ～html～ <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 style="display:none">タイトル</h1> <ul id="topmenu"> <li class="logo1"><a href="#">お問い合わせ</a></li> <li class="logo2"><a href="#">サイトマップ</a></li> </ul> </div> <!-- サイドメニュー (スワップイメージを使っています)--> <div id="menu"> <ul> <li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> <li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> ※以下省略 </ul> <div> <!--main--> <div id="main"> <div id="introduction"> <h2><img src="images/introduction.png" alt="introduction" /></h2> </div> <!-- コンテンツ --> <div id="content"> <h2>h2タイトル(1)</h2> <dl class="info"> <dt>1月1日</dt> <dd>あああ</dd> <dt>1月2日</dt> <dd>いいい</dd> ※以下省略 </dl> <h2>h2タイトル(2)</h2> <dl class="info"> <dt>1月1日</dt> <dd> ううう</dd> <dt>1月2日</dt> <dd>えええ </dd> ※以下省略 </dl> </div> <!--contentsはここまで--> </div> <!--mainはここまで--> <!-- フッター --> <div id="footer"> <ul id="lastmenu"> <li class="logo3"><a href="#">よくある質問</a></li> <li class="logo4"><a href="#">プライバシーポリシー</a></li> </ul> <p>Copyright BBB. All right reseved.</p> </div> </div> <!--containerはここまで--> ～css～ body {background-image: url(images/sora.jpg)} /* コンテナ */ div#container {background-image: url(images/background0.png); width: 980px; margin-left: auto; margin-right: auto; overflow:hidden; position:relative} /* ヘッダー */ div#header {background-image: url(images/header.png); background-repeat:no-repeat; height: 169px; margin-bottom: 30px} ul#topmenu {font-size: 1.2em; padding-left: 580px; padding-top: 130px} ul#topmenu li {float:left; margin-left:15px; margin-right:15px; font-weight:bold} .logo1 {list-style:none; background-image: url("images/mail.png"); background-position: left center; background-repeat: no-repeat; padding-left:35px} . logo2 { list-style:none; height:25px; background-image: url("images/zisyaku.png"); background-position: left center; background-repeat: no-repeat; padding-left:30px } /* メニュー */ #menu {margin-left: 40px; width:260px} #menu li{list-style:none; margin-bottom: 4px} /* メイン */ div#introduction {margin-left: 132px; margin-bottom: 10px} /* コンテンツ */ div#content {width: 475px; border: 2px solid #400000; padding-top: 28px; padding-right: 60px; padding-left: 50px; padding-bottom: 20px; margin-left: 135px; margin-bottom: 80px; font-weight: none;} div#content h2 {color: #400000; font-size: 1.8em; letter-spacing: 0.5em; border-bottom-width: 3px; border-left-width: 14px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #008080; border-left-color: #008080; padding-left: 10px; margin-bottom: 15px} dl.info dt,dl.info dd {font-size:1.2em; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #400000} dl.info dt {clear: left; float: left; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat;} dl.info dd {margin-bottom: 0.8em; margin-left: 9.2em; margin-bottom: 1.5em} /*メインはここまで*/ /* フッター */ div#footer {background-image: url(images/footer.gif); position:absolute; bottom:0px; height:60px; width:980px;} ※以下省略。
- ベストアンサー
- CSS
- ウィンドウ全体をテーブルで表示するには？
できればウィンドウ全体をテーブルにする方法を教えて欲しいです。 左右上下に余白がなく、ウィンドウの大きさと同じ大きさでテーブルが表示される様にしたいのですが、下記のタグをどうさわっても余白ができてしまいます…。 何処が間違いなのか教えて頂けると有り難いです。 下手ですがイメージもかいてみたので見てみて下さい。 分かり辛い説明で申し訳ありませんが、よろしくお願いします。 【HTML】 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td>たいとる</td></tr> <tr><td class="menu_td"><ul class="menu">めにゅー</ul></td></tr></table> 【CSS】 body{ background-image:url(＊＊＊); background-repeat: repeat; } .menu_td{ padding-left:20px; height:20px; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; filter:alpha(opacity=75); -moz-opacity:0.75; } .menu{ margin:0px; padding:0px; list-style-type:none; } .menu li{ width:100px; height:20px; line-height:20px; float:left; } .menu li a{ padding-left:15px; height:20px; line-height:20px; background-image:url(＊＊＊); background-position:0% 50%; background-repeat:no-repeat; display:block; } .menu li a:hover{ background-color:#efefef; } table{ border-collapse: collapse; border: 0px #999999 solid; color: #999999; font-size: 9pt; font-family: Verdana,Osaka,'MS UI Gothic'; } ul{ margin:0px; padding:0px 0px 0px 15px; list-style-type:circle; } よろしくお願いします。
- 締切済み
- CSS
- スマホ画面で長い文章が、左端に短い幅で片寄る。
スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。 これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。 #header { width:100%; background:#cccc99; } #container { width:950px; margin-left:auto; margin-right:auto; text-align:left; } #col1 { width:740px; float:left; margin-left:20px; background:#383838; } #col2 { width:190px; float:left; } #footer { clear:left; width:100%; border-top:1px solid #8f8472; } 左側にメニュー（190px）を配置したレイアウトです。 h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され 左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。 ul.abc { list-style:none; width:100%; margin: 0; padding: 0; } ul.abc li { float:left; margin-right:1em; padding: 0; } ul.abc a { float:left; line-height:85px; } ul.abc img { float:left; margin-right:.5em; vertical-align:middle; } <ul class="abc"> <li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0"> xxxxxxxxxxxxxxxxxxxxx</a></li> </ul><div style="clear: left;"></div> よろしくお願い致します。
- 締切済み
- CSS
- 背景と画像の間にスペースが
画像3つで角丸ボックスを作り、真ん中の部分はテキストに応じて縦に伸びるように背景にしたいのですが、IEで見ると背景と底の部分の角丸画像の間にスペースができてしまいます。Firefoxでは問題ありません。 どうすれば解決できるかお教えいただければと思います。 ［CSS］ .back{ height:auto; background: url(../images/area.gif) repeat-y ; } .txt{ width:218px; margin:0px; padding:0px; list-style:none; } .txt li{ margin:0px; padding:5px 10px 0px 13px; } img{ margin:0px; padding:0px; border:0px; vertical-align:bottom; } ［html］ <img src="images/head.gif" width="218" height="7" alt=""> <ul class="txt back"> <li>2008.03.01<br>Webサイトがオープンしました。</li> <li>2008.03.01<br>Webサイトがオープンしました。</li> </ul> <img src="images/foot.gif" width="218" height="7" alt="">
- ベストアンサー
- HTML
- IEでは指定の位置に配置してくれません
添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。
- ベストアンサー
- HTML
