- ベストアンサー
ボックスの高さ指定についての質問
goldfoxの回答
- goldfox
- ベストアンサー率49% (123/249)
box2の仕切り線とやらは、box3の左枠線を利用すればいいと思います。 baseの背景は、bodyの背景ではダメなのですか？
関連するQ&A
- 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
- 画像を横並びに2つと、その右側に文字入りのボックス
画像を横並びに2つと、その右側に文字入りのボックスを横並びに2(よこ）×3段（たて）で配置したいのですが、IE7だけ２つの画像の下に、文字入りボックスが3(よこ）×2段（たて）で並んでしまいます。 IE8やそれ以外のブラウザは画像右側に文字入りボックスが2(よこ）×3段（たて）で並びます。 どのようにすれば、IE7も他と同じようになりますか。 よろしくお願い致します。 <div class="imagebox"> <p class="image"><img src="1.jpg" width="145" height="120" alt=""/></p> </div> <div class="imagebox" style="margin:0 20px 0 10px"> <p class="image"><img src="2.jpg" width="145" height="120" alt=""/> </div> <ul class="box"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> <div style="clear: left;"></div> div.imagebox { background-color: #383838; width: 145px; float: left; margin: 0px; } p.image { text-align: center; margin: 0px; } ul.box { list-style:none; width:100%; margin: 0 0 5px 0; padding: 0; } ul.box li { width: 180px; height: 14px; padding: 4px 5px 4px; border-color: #000033; border-style: double; background: #373737; color: #7e7763; text-align: center; float: left; display: inline; list-style: none; margin: 2px; }
- ベストアンサー
- HTML
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
- 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
- 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> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- ＣＳＳレイアウト positionについて
下記のタグにてpositionタグを使って指定した場合 ＩＥの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか？ お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body { margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
- jCarouselLiteでwidth: 100%
jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。
- 締切済み
- JavaScript
- firefoxだと２列で表示されてしまう。
よろしくお願いします。 div.base {width:100%;} .base ul { margin: 0px; padding: 0px 0px 3px 0px; list-style-type:none; } .base li { margin: 0px; padding: 2px 0px 5px 23px; width: 33%; float: left; } 上記のCSSを <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> のように書き込んでいるのですが、IEなどではうまく３列で表示されますがfirefoxの場合はなぜか２列に表示されてしまいます。 お分かりになる方、是非ご教授お願いします。
- 締切済み
- HTML
- Liで背景画像が表示されない
よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>
- 締切済み
- 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
お礼
ご回答ありがとうございました。 ＜追記＞２段組している右コンテンツ内の子boxなので、bodyの背景は無理なんです。baseの背景は枠線の両端部分の画像なのでベースは白です。 box3はテキストの背景だけにグレー色をつけたいのですが、base（基本色）は白背景なので、box2の縦点線両端はパディングでbox3と間隔をあけたいのです。box2（縦点線）の中にbox3（テキスト）を入れてたほうがうまくいくでしょうか？いろいろ試してみます。