- 締切済み
[CSS] 入れ子DIVの、親・子 両方でFloatする方法
ベテランの皆様で、もしこの問題の解決策をお持ちの方がいらっしゃったらぜひよろしくお願いいたします。 入れ子になっているDIVを、CSSで配置しようとしています。 <DIV> <Div>左上のロゴ画像（Float: Left）</Div> <Div>右側のメニュー（Float: Left）2段にする <div>1段目 text-align: right</div> <div>2段目 この中にも入れ子でFloat leftのDIVと画像を並べる</div> </Div> </DIV> という構造を作りたいのですが、 <div>2段目 この中にも入れ子でFloat leftのDIVと画像を並べる</div> ↑の中、及び <Div>右側のメニュー（Float: Left）2段にする の部分が、IE6、Opera6でうまくfloatされません。 文章で書くとわかりづらいため、図にしたものをアップしてみました。 http://sakuratan.ddo.jp/imgboard/img-box/img20071027012919.gif ソースコードを以下にコピペしますので、それぞれ 「test.html」「testcss.css」 といった名前をつけて同階層に保存していただけると、現象見えると思います。 この問題でずっと頑張っているのですが・・何か解決策お持ちの方、どうぞよろしくお願いいたします。 以下、ソースコード -------------------------test.html-------HTML部------------------ <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta name="robots" content="index,follow" /> <title>トップページ</title> <link href="./testcss.css" media="all" rel="stylesheet" type="text/css" /> </head> <body> <form name="fmMain" id="fmMain" method="POST" action="" enctype="multipart/form-data"> <div id="wrap"> <div id="header"> <div id="navi"> <div class="logo" style="border:0;"> <a href="./"><img src="./img/index/navi_home.jpg" alt="ホーム" border="0" /></a></div> <div class="left"> <div id="navi_favor"> このページをお気に入りに登録できます <input type="submit" name="brSrch" value="登録" /> </div> <div id="navi_items" style="padding-left:20px;"> <div class="navi_item_tsushin"> <a href="#"><img src="./img/index/navi1.jpg" alt="" border="0" /></a></div> <div class="navi_item_campain"> <a href="#"><img src="./img/index/navi2.jpg" alt="" border="0" /></a></div> <div class="navi_item_shop"> <a href="#"><img src="./img/index/navi3.jpg" alt="" border="0" /></a></div> <div class="navi_item_link" style="border: 0;"> <a href="#"><img src="./img/index/navi4.jpg" alt="オススメリンク" border="0" /></a> </div><br clear="left" /> </div> </div> </div> </div> </div> </form> </body> </html> -------------------------testcss.css------CSS部------------------ @charset "euc-jp"; * { margin: 0px; padding: 0px; } body { background-color: #FFFFFF; font-size:10px; line-height: 12px; font-family: "MS P ゴシック", Osaka; } #wrap { width: 610px; } #header { width: 610px; } #navi { clear: left; } #navi_favor { padding:10px 3px 20px; text-align: right; color: #436921; } #navi_items { pading-left: 30px; width: 450px; } #navi .navi_item_tsushin{ float: left; border-right: 2px solid #335914; width: 99px; } #navi .navi_item_campain{ float: left; border-right: 2px solid #335914; width: 132px; } #navi .navi_item_shop{ float: left; border-right: 2px solid #335914; width: 90px; } #navi .navi_item_link{ float: left; border-right: 2px solid #335914; width: 116px; } .logo { /* position:relative; */ float: left; width: 136px; margin-right: 3px; } .left { /* position:relative; */ float: left; width: 470px; }
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- divの入れ子が上手くいきません。
.line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか？
- ベストアンサー
- HTML
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
