- ベストアンサー
CSSでのレイアウトについて
現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。
- MindScream
- お礼率95% (23/24)
- CSS
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
IEには、無視しなければいけない空白文字(スペースや改行など)がレンダリングに影響を与えてしまうというバグがあります。 とりあえずdivとimgの間の空白文字を無くしておくと解決しそうです。 <img ～></div> とか <img～><!-- --></div> その他CSSでのトラブルの時に参考になりそうなページ http://www.mozilla.gr.jp/standards/webtips/ http://members.at.infoseek.co.jp/cssbug/
その他の回答 (4)
- exists
- ベストアンサー率62% (27/43)
>誰にも聞けず、途方に暮れています。どうかご教授願います 大変ですね。直接の回答ではありませんが、ほっておけない気分なので、必要なければ、忘れてください。 テーブルレイアウトを廃し、htmlの見た目をCSSで制御する。私も、その考えを支持しますが、陥りやすい問題も含んでいて、気をつけたほうがいいです。 心配その1 div タグ使った複雑な表現は、ブラウザによって表現が変わりやすい。 もし、あなたが、IE6とか使って、htmlの表示をチェックしているなら、firefox ってブラウザダウンロードして、同じドキュメント見てみてみましょう。 心配その2 ブラウザには、表示モードっていうのがあります。 どのモードになるかは、htmlソースのドキュメントタイプ宣言の記述の仕方などにより、変化します。 ブラウザを変更して、現状のちょっと余白の発生しているページを、見てみることを強くお勧めします。 ※私の環境では、2への補足ソースは、ブラウザを変更すると、違う表示になります。 clear:both; 等の指定は、バリデーションチェックなどでは、ここに入れないとダメなどと検出できないので、その辺も要注意です。
お礼
参考になりました☆ 無事、boxがくっつきました(>ｖ<) 回答していただき、本当にありがとうございました！
補足
ご親切にありがとうございます！ firefoxで確認してみた所、まさに、望んでいた通りに表示されました！ うれしかった反面、なぜIEでは。。と残念でなりません。。。 表示モードは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> で記述しております。"http://www.w3.org/TR/html4/loose.dtd"部を外しても、やはりIEでは隙間が出てしまいます。。 どうすればIEでもうまく表示させることができるでしょうか・・・ やはりソースに問題があるのでしょうか・・？ また、 >clear:both; 等の指定は、バリデーションチェックなどでは、ここに入れないとダメなどと検出できないので、その辺も要注意です。 と回答を頂きましたが、「ここに入れないとダメなどと検出できない」の部分がいまいち何を言っているのか理解できません。。初心者なものでして、お手数ですが、もう少し噛み砕いて説明頂けると助かります。。 どうかよろしくお願いします。。m(__;)m
- s_hukami
- ベストアンサー率66% (98/148)
<div class="clear"></div>などのクラス指定がどうなっているのかが判らないのですが、以下のようなコードでレイアウトできるのでは、と思います。 ちなみにご質問に記述されているソースではcenter-free1、main、free1、clear、free2、underなどのクラスがCSSで指定されておらず、ID名outlineが指定されていません。 なお、下記のソースは判りやすいように各パーツを色分けしてあります。 また、各パーツをどのように並べたいのかが、上記のソースでは判らないため、下記のサンプルではmainとfree1を左右に並べ、その下にfree2を配置し、更にその下にunderを配置しています。 参考URLはとほほのWWW入門です。 ----------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <style> body { margin:0 auto; padding:0; border:0; backgound: #FFFFFF; } #outline { width:800px; margin-left: auto; margin-right: auto; padding:0; border:1px #CCCCCC solid; } .main { background-color: #99CCFF; width: 600px; float: left; } .free1 { background-color: #FFCCCC; width: 200px; float: left; } .free2 { background-color: #CCCCCC; } .under { background-color: #9999FF; } </style> </head> <body> <div id="outline"> <div class="main"> メインスペース </div> <div class="free1"> Free1 </div> <br clear="all"> <div class="free2"> Free2灰色back </div> <div class="under"> under </div> </div> </body> </html>
お礼
参考になりました☆ 無事、boxがくっつきました(>ｖ<) 回答していただき、本当にありがとうございました！
補足
詳しい回答をありがとうございます。。 質問のソースはこちらの貼り付けミスで、大変申し訳ありません。。 No2.さんの補足内容にソースは貼り付けさせていただきました。。 わかりにくいことをしてしまい、すみませんでした。 レイアウトの説明ですが、上から順に、 まずtitle1のboxがあって、その右のboxをさらに上下にわけ、上のboxにtitle2、下のboxにhome、blog、e-mailの３つのboxを入れます。 段が変わりまして、横幅800pxのtitle3のboxを入れ、その下の段に、今度は左から順に、free1、main、free2のboxを入れ、 最下部にunderのboxを入れたいんですが。。（伝わりにくくて、すみません。。） 現在、困っているのが、title1とtitle3の間に隙間ができてしまうこと、また、同様に、title2とその下の3つのboxの間に隙間ができてしまうことなんです。 左右の幅はつめれたのですが。。。
- xxshinchixx
- ベストアンサー率62% (15/24)
画像はどこに入るのでしょう・・・ できれば、ページ全体のソースを見せて頂けませんか？
お礼
無事、boxがくっつきました(>ｖ<) 回答していただき、本当にありがとうございました！
補足
申し訳ございません。。 ソースがくちゃくちゃですね・・・貼り付けに失敗してしまっていたようです。。ごめんなさい↓ 以下CSSです。 <style type="text/css"> * { border:0; margin:0; padding:0; } body { margin:0 auto; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } .title1 { float:left; width:550px; } .title2 { float:right; width:250px; } .home-blog { float:left; width:160px; } .e-mail { float:right; width:90px; } .home { float:left; width:75px; } .blog { float:right; width:85px; } .clear { clear: both; } .center-free1 { float:left; width:659px; } .free2 { float:right; width:141px; } .free1 { background-color:#000000; float: left; width: 80px; } .main { float:right; width:579px; } .free2 { float: right; width: 141px; } .under { clear: both; background-color:#000000; } 以下htmlのbody部です。 <BODY> <div id="outline"> <div class="title1"> <IMG SRC="images/title1.gif"> </div> <div class="title2"> <IMG SRC="images/title2.gif"> </div> <div class="home-blog"> <div class="home"> <IMG SRC="images/home.gif"> </div> <div class="blog"> <IMG SRC="images/blog.gif"> </div> </div> <div class="e-mail"> <IMG SRC="images/e-mail.gif"> </div> <br class="clear"> <IMG SRC="images/title3.gif"> <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> よろしくお願いしますm(__)m
すみません、意味がよく分からないのですが <div>に画像を入れて縦に並べたいという事でしょうか？
お礼
無事、boxがくっつきました(>ｖ<) 回答していただき、本当にありがとうございました！
補足
申し訳ございません。。 ソースがくちゃくちゃですね・・・貼り付けに失敗してしまっていたようです。。ごめんなさい↓ そうです！！<div>に画像をいれてるんですが、それが縦に並べるとき、どうしても隙間ができるんです。。。横はぴったりくっつくんですが・・・ よく見るとボックスの底辺から下に向けて余白ができているように見えるんですが・・・どうしてでしょう(>へ<；)説明が足らなければまたご指摘下さいm(＿＿;)m
お礼
・・・！？ か、解決しました！！ くっつきました！！(ノv；) 本当にありがとうございました！！ 参考URLも今後、非常にためになりそうです。。 助かりましたm(__*)m 何時間も何日も悩んで、、その分いろいろ勉強になりましたが・・ 半ば諦めかけていたので、うれしくてたまりません(笑) ありがとうございました！！