- ベストアンサー
floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- newmen
- お礼率92% (46/50)
- CSS
- 回答数7
- ありがとう数25
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#1 です。 >ところが、、、エンコードをUTF-8にするとCSSが効かなくなるのです。 IE6 は xhml と、css ファイルで文字コードが違うと、css が読込まれないことがあります。xhtml と css の文字コードを合わせてください。 ><html xmlns= の部分のhttpの前に&,#,8203とあるのですが（実際はカンマなし）、これは何かが文字化けしているので この件は、 <html xmlns="http://www.w3.org/1999/xhtml"> が正解です。コピーした際におかしなコードが入ってしまったのも知れません。 >IE7やfirefoxでは普通に表示されますが、IE６でみると、カルマ落ちしています。 >どこが悪くてこうなっているか、これでおわかりになるでしょうか？ >http://www17.plala.or.jp/malika/gooweb.html 上記のページですが、調べてみれば判ると思いますが、出来れば質問者様で確認される事をお勧めします。 まずは、なぜ検証ソースでは問題なく IE6 で段組みが出来ているのか検証される事をお勧めします。
その他の回答 (6)
- abril
- ベストアンサー率69% (388/560)
横から失礼致します。既に今の回答者様が大変詳細に検証・ご指導されていらっしゃる事ですし、私は提供されたhttp://www17.plala.or.jp/malika/gooweb.htmlのHTMLとCSSだけななめ見していて気付いた事があるので、ヒントだけに留めさせて頂きます。 いったん、<div id="main02">～</div>の中の要素をダミーテキスト（現状だったら"main02"の文字）だけにしてその他の<div id="main02">～</div>の中の要素を削除してみて下さい。 これで少なくとも現在IE6でのみ起きているコラム落ち現象は解消されます。そしてその事で、”実は”どこに原因があったのか、という事がおわかりになるかと…多分、質問者様にとっては「意外」なところではないかと思います。 ※ただ、これ”だけ”が原因だとするとIE6以外でもコラム落ちしそうなものなんですが、他の設定との継承のされ方等で解釈違いが出ているのかもしれません。そこの検討は省略させて頂きますのでご容赦下さい。
お礼
いただいたヒントで解決しました！ main02の中にあるh1タグのpadding-rightを200pxも取っていたのが原因でした。 ＜多分、質問者様にとっては「意外」なところではないかと思います。 まさに“意外”でした。ミスって書いたのでそういう認識がなかったからです。 お恥ずかしい限りです。 ご指摘本当にありがとうございました！！助かりました！
- nori_007
- ベストアンサー率35% (369/1048)
#1 です。 下記のソースを、テキストエディタに貼付け、各ブラウザにて検証してみてください。 -- ここからコピー -- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo2</title> <style type="text/css"> <!-- body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; background-color: #FFE; /*追加*/ } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; background-color: #FFF; /*追加*/ } #header { width:776px; height:65px; margin :0px auto 0px auto; background-color: #FFC; /*追加*/ } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; background-color: #FFB; /*追加*/ } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; background-color: #FFA; /*追加*/ } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } --> </style> </head> <body> <div id="container"> <div id="header"><img src="○○" /></div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href="○○"></a></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html> -- ここまで -- まず、Dreamweaver8 とのことですので、xhtml にしています。基本的には以前アップしたソースと同じになります。違いをご検証ください。
お礼
nori_007様、ありがとうございますm(__)m テキストエディタに貼り付けてアップしてみました。 おー！IE6で見てもちゃんと段組なされているではありませんか！ すぐにHPに当てはめてみました。 ところが、、、エンコードをUTF-8にするとCSSが効かなくなるのです。 わたしはデフォルトのshift_jisで作成していましたが、UTF-8で作成するべきものなのでしょうか。 それと、<html xmlns= の部分のhttpの前に&,#,8203とあるのですが（実際はカンマなし）、これは何かが文字化けしているのでしょうか。このままコピペしても、この部分を外してもやはりCSSは効きませんでした。 お手間をとらせますが、この2点を教えていただけませんか？
補足
実際に作っているものをアップしてみました。 IE7やfirefoxでは普通に表示されますが、IE６でみると、カルマ落ちしています。 どこが悪くてこうなっているか、これでおわかりになるでしょうか？ http://www17.plala.or.jp/malika/gooweb.html
- ran_2323
- ベストアンサー率43% (32/73)
＃3です。 「#main02」の中に「.content」があるということでいいでしょうか。 #main02{ float:left; width:410px; } #main02 .content{ padding: 20px 50px 20px 50px; } というかんじです。 IE6や古いIEは、どうもwidthに対するpaddingの解釈方法が他のブラウザと違うようです。IEが間違っているんですけどね。 なので、CSSで組むときも、あまりがちがちにwidth指定をして組むのはズレも元で、ブラウザチェックも大変です。 質問者さんの提示されたソースを自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので、CSS指定の仕方に混乱があるように思いました。 Dreamweaverはあまり信用せず、ブラウザでファイルを開き、全ての要素に「border:1px #ccc solid;」を入れて要素のズレが何が原因で起こっているのかを見たほうがいいと思います。 FirefoxにはCSS構造を表示してくれる便利なプラグインがたくさんあるので、それを見てみてもいいと思いますよ。
お礼
ご意見ありがとうございます。 まず、子要素にはfloat:left;は不要なのですね。 でも、やはりpaddingが効きません。 ＜あまりがちがちにwidth指定をして組むのはズレも元 パーセントで指定したほうがいいのかもしれませんね・・ ＜自分環境で検証してみたところ、全てのブラウザでレイアウトがズレてしまっていたので そうですか！？ わたしが見たところは、当初書きましたように、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 ご指摘いただいたようにボーダーを入れてみると、やはり左ボックスのmain02が指定した幅よりぐんと伸びておかしいです。 CSSって難しいですねえ(・_・;) でも、とことん追求してみたいと思います。 ありがとうございましたm(__)m
- ran_2323
- ベストアンサー率43% (32/73)
同一スタイルでwidthとpaddingを一緒に指定しているのがIE6でのレイアウト崩れの原因になると思います。 親要素でwidth、その子要素にpaddingをつけるやり方がよいかと思われます。 ブラウザによって、widthとpaddingの関係についての解釈が違うので、そこを注意して組んでいけば、大きなレイアウト崩れは起こさないと思いますよ。
お礼
投稿ありがとうございます。 同一スタイルでwidthとpaddingを一緒に指定しているのはよくない方法なのでしょうか。 この場合の親要素は、左側のボックスで言えば#main02ですか？ 子要素を例えば#main02.contentなどとしてこれにpaddingを設けるとよいのでしょうか。 試しにやってみたのですが、paddingが無視されてテキストが左端に寄って表示されてしまいました。 /*css*/ /*main02からpaddingを取って#main02.contentに入れました*/ #main02.content{ float:left; padding: 20px 50px 20px 50px; } /*html*/ -省略- <div id="main02"> <div class="content">○○</div></div> <div class="clear"></div> -省略-
- nori_007
- ベストアンサー率35% (369/1048)
#1 です。 >２．Aボックスの幅510px、Bボックスの幅230pxについて の件は了解いたしました。 所で、検証したソースは確認して頂けたでしょうか？。 また、Dreamweaver のバージョンが 2004 との事ですが、2004 はまともに CSS は解釈出来ません、８ では少しまともになりましたが、挙動は怪しいと思います。検証はブラウザ行う事をお勧めします。
お礼
ご指示いただいたとおりやってみました。 確認はまずローカルでして、そのあと必ブラウザでプレビューしています。 状況は変わっていません。 ＜2004 はまともに CSS は解釈出来ません、 そうなんですか。知りませんでした。 今回の場合は、職場で8、自宅で2004で行なっていますが、どちらも同じようにプレビューされています。
- nori_007
- ベストアンサー率35% (369/1048)
検証してみました。 まず <div id="header"><img src="○○" </div> タグの閉じ忘れがあります。 <div id="navi"><a href=○○></div> タグの閉じ忘れがあります。 >Aボックスの幅510px サンプルソースでは、410 となっています。 >Bボックスの幅230px サンプルソースでは、200 となっています。 上記を修正して下記のソースを作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>goo</title> <style type="text/css"> <!-- body { margin: 0; /*background-image:url(bg.gif); background-position:top; background-repeat:repeat-x;*/ background-color: #FFE; /*追加*/ } #container { width:776px; margin:0px auto 0px auto; /*background-image:url(main.gif); background-repeat:repeat-y;*/ background-color: #FFF; /*追加*/ } #header { width:776px; height:65px; margin :0px auto 0px auto; background-color: #FFC; /*追加*/ } #main02 { /*width:410px;*/ width:510px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; background-color: #FFB; /*追加*/ } #navcontainer{ /*width: 200px;*/ width: 230px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; background-color: #FFA; /*追加*/ } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } </style> </head> <body> <div id="container"> <div id="header"><img src="○○" /></div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></a></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html> 判りやすくする為に、background-color: を追加しました。 手直しした内容は、上記タグの閉じ忘れと、background-color: の追加です。 #container { width:776px; } ですので、単純に、510px + 230px で、740px になりますが。 #main02 { padding: 20px 50px 20px 50px; } padding で左右の合計が 100px #navcontainer{ padding: 30px 30px 0 0; } padding で右側に 30px 総合計で、130px 分あり、740px に 130px がプラスになりますので、870px になり、776px をオーバーしています。W3C に準拠したブラウザは段位落ちが発生し、IE6 では問題なく表示すると思います。 ですの検証として上記の padding で左右の値をゼロにしてみてください。 Dreamweaver のバージョンが不明な為、Dreamweaver の挙動まで考えると混乱しますので、純粋にブラウザで検証してください。 IE6 には色々バグもあります。また、DOCTYPEスイッチ の関係も有りますので、ご配慮ください。 今のソースでは IE6 で、container はセンターに寄らない事もご確認ください。 ご確認ください。
お礼
お忙しいところ、お時間を割いて検証、書き込みをいただきありがとうござました。 １．タグの閉じ忘れについて 実際のコードはロールオーバーのscript等が入って複雑ですので、必要部分のみコピー貼り付けしたのですが、その際の手落ちです(^^; 実際は閉じ忘れはありません。 ２．Aボックスの幅510px、Bボックスの幅230pxについて これは純粋なwidthではなく、paddingを足した数字です（Aはwidth410px+padding（左右で）100px=510px、Bはwidth200px+padding30px=230px)。 ３．＜検証として上記の padding で左右の値をゼロにしてみてください。 ゼロにしてみましたが、カラムは落ちたままです。 それと、ゼロにするとテキストがメインコンテンツの端までいってしまうので、これはデザインとしておかしくなります。 <補足> 「Dreamweaverの作成画面では、Aボックスの文字は定めた幅510px(widthとpaddingの合計です）で折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、…」と書きましたが、Doreamweaver8で「main02」の部分にカーソルを当てると「ID main02 幅410px（581px)」とポップアップで表示されました （自宅で書き込みしたのですが、自宅のDreamweaverはバージョンが2004で、ポップアップがないのでスケールを見て書きました）。 なぜ、実際のwidthは410pxなのに（581px)と表示され、実際の制作面もそのようになり、IE６でのプレビューはそのとおりカラム落ちし、IE7,safari,firefoxは何事もないように普通に問題なくプレビューされるのか疑問です。 headより上は下記のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
関連するQ&A
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- 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
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- 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
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- backgroundで文字がうまくおさまらない
お世話になります、CSS初心者ですので、 質問内容に不明瞭な点がございましたら、ご容赦くださいませ。 上記のように、テキストで文字を書いてバックグラウンドさせたいのですが、 文字が画像から外れた位置に配置されたりしてしまいます。 尚、作った画像は4段重ねるように配置したいです。 解決策をご教授下さいませ。 （HTMLコード） <BODY> <div id="container"> <div id="header"> </div> <DIV id="main"> </div> <div id="left"> <p>軽量鉄骨プレハブ</p> <div class="left_keitetu"> <p class="left_keitetu"><a href="/seihin/top.htm">製品詳細</a><br> <a href="/sekou/01-keitetu/top.htm">施工一覧</a></p> </div></div> <div id="footer"> </div> </BODY> （CSSコード） div#container { width : 725px; margin : auto;} div#header { width : 725px; margin : auto;} div#main { width : 725px; margin : auto;clear : both; padding : 0 10px; } div#footer { width : 725px; margin : auto;clear : both; margin-bottom : 5px; background : url(img/footer_bg.gif) repeat-x; height : 55px; padding-top : 17px; } div#left { float : left; } div.left_keitetu { height : 80px; width : 170px; } p.left_keitetu { background : url(img/menu_keitetu.gif) no-repeat; padding-top : 30px; padding-left : 15px; }
- ベストアンサー
- CSS
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
お礼
おっしゃるとおり考えてみたのですが、どうしてなのか原因を考えつきませんでした。 今日、No.7でabril様から 「<div id="main02">～</div>の中の要素を削除してみて下さい。」とヒントを下さったのでそのとおり削除してみました。 すると、そのとおりカラム落ちしません！ その中にあるのは画像のタイトルで、<h1></h1>で囲んでいました。 そこで、改めてcssでh1のスタイルを見てみると・・padding-rightが200pxにもなっていました！ それで実際はmain02の横幅がとても大きくなってしまっていたのです。 入力ミスでこんな大きな値になっていたと思います。 ここを0にするとIE6でも問題なく表示されました。 他のブラウザでは問題なく表示されていて、IE6だけカラム落ちするのは、IE6はバグが多いブラウザだからなのではと思っていました。 こんな単純ミスで何日も煩わせまして・・・本当に申し訳ありません。 「カラム落ち」を「カルマ落ち」と書いてしまったりもう少し落ち着かないと(-_-;) 丁寧な検証をいただきありがとうございました。心よりお礼申し上げます。