- 締切済み
この場合のCSSの記述を教えてください！
現在コーディング中なのですがIE6,7では問題ないのですが、Firefox,OPERA,netscapeにてずれて表示されてしまいます。 鯨飲がさっぱり分からない状態で・・どなたかお分かりになる方いましたらご教授願います（泣） ■html <div id="aaa"> <div id="bbb">コンテンツ</div> <div class="ccc">コンテンツ</div> </div> ■css #aaa { width: 640px; height: 300px; float: left; } #bbb { width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; } .ccc { width: 640px; height: 150px; } ■状況 640px×300px（aaa）の枠の中に（bbb,cccを）収めたいのに300を超えて（bbbの上部に約100px程度のが出来る）表示されてしまう。 （bbbの背景画像サイズは640px×150px） ■いじってみて bbbに「border: 1px #000000 solid;」を追加するとスペースはなくなる。 以上が状況です。よろしくお願いいたします！
- mahimahi02
- お礼率19% (9/47)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- tapping_h
- ベストアンサー率33% (5/15)
div aaaの中身、上のほうに背景と同じ色の文字とか、空白のスペースとか,<br>の改行とかありませんか？たとえばこんな。 //以下例示ソース <html> <head> <style type="text/css"><!-- （略） </style> </head> <body> <div id="aaa"> <br><br><br>【←この部分】 <div id="bbb">コンテンツ</div> <div class="ccc">コンテンツ</div> </div> </body> </html> //以上、例示ソース ・・・IE6,7で問題ないあたりは解決してない気もしますが。エディタの設定にも何かあるかもしれませんね。tabとかスペースをどう扱うかなんて項目ないでしょうか？？
- vista2446
- ベストアンサー率46% (131/279)
FirefoxとOpera、IE7で確認しましたが、#3さんと同様、問題なく表示されました。 外部cssかお示しになられてないHTMLで矛盾があるのかもしれませんね。。。
Firefoxで試してみましたが、別におかしい所は無かったですけれど。 ただし、画像だけはこちらのあり物で代用しましたが。 ここに書かれているのはコピーした物ですか？ なら間違いは無さそうですけれど。
- kyanasaki
- ベストアンサー率42% (168/396)
#bbb { width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; clear:both; } にしてみるとか。
marginとpaddingが継承になってるからじゃない？ #bbb{ width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; margin:0;padding:0; } aaaの方にも要るかも(padding)
補足
早速の回答ありがとうございます！ marginとpaddingはcssの初期設定として * { margin: 0px; padding: 0px; font-size: 12px; font-family: "ＭＳ Ｐゴシック", Osaka; } の記載をしているのですが、それとは別に個別に設定が必要という事でしょうか？
関連するQ&A
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- IE6で隙間ができてしまう
IE6でヘッダーとコンテンツの間に隙間ができてしまいます。 IE7、Firefox、Safariでは問題なく表示されています。 [HTML] <div id="top"> <div id="topcont"> <h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1> </div></div> <div id="navi"> <div id="navicont"> <ul> <li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li> <li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li> <li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li> </ul> </div> </div> [CSS] #top { background: url(img/IIIII.jpg) repeat-x; margin: 0px; padding: 0px; height: 80px; } #topcont { background: url(img/III.jpg) repeat-x; margin: 0px auto; padding: 0px; height: 80px; width: 900px; } #navi { background: url(img/NNN.gif) repeat-x; text-align: center; margin: 0px; padding: 0px; height: 35px; } #navicont { margin: 0px auto; padding: 0px; height: 35px; width: 900px; } 隙間を無くすにはどうすればよいのでしょうか。 わかる方いらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- HTML
- 全く同じソースなのに、一方で背景画像が表示されない。
現在、開発用サーバーと公開用サーバーに分けてサイトを作成しているのですが、 開発用サーバーでは表示されている画像が、公開用サーバーだと表示されません。 該当箇所は以下のコードです。 開発用のファイルを公開用にコピーしているので、同一のコードを使用しています。 <div id="aaa"> <div id="bbb"> <div id="ccc"></div> <div id="ddd">ここにメッセージ</div> </div> </div> CSSで背景を指定しています。 #ccc { background-image:url(../img/img.gif); background-repeat:no-repeat; width:600px; height:32px; } cccのbackground-imageが公開用だと表示されません。 ×となっているわけでは無く、何も表示されていません。 画像ファイルのパスも開発用と同一です。 試しに背景画像では無く背景色を指定したところ、表示されました。 画像ファイルに問題があるのか、公開用サーバーの設定等に問題あるのか、わかりかねています。 アドバイスよろしくお願いします。
- ベストアンサー
- HTML
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- 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
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- CSSについて教えて下さい
ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
補足
ご回答ありがとうございます！ 試してみたのですがやはりダメでした。 原因不明で困り果てています・・