CSSで高さを自動にするとレイアウトが崩れる
- dreamweaevr8でスタイルシートを使ったレイアウトにチャレンジしています。
- divタグの「高さ」の設定について悩んでいるので教えてください。
- div A（左にフロート）とdiv B（右にフロート）があります。AとBにはそれぞれテキストやイメージが入っており、内容量が違うので高さも違います。そこで、AとBを包括するＣというdivを作成しました。このとき、Ｃの高さに適当に数値が入っていれば、きれいにAとBが収まった状態になるのですが、Ｃの高さを「自動」にすると、Ｃの高さがなくなったような状態になってしまいます。この場合どうすればよいか教えてください。「自動」とは、内容量に応じて高さが都度調節されるということではないのでしょうか？どうぞよろしくお願いいたします。
- ベストアンサー
CSSで高さを自動にするとレイアウトが崩れる
dreamweaevr8でスタイルシートを使ったレイアウトにチャレンジしています。 divタグの「高さ」の設定について悩んでいるので教えてください。 div A（左にフロート）とdiv B（右にフロート）があります。AとBにはそれぞれテキストやイメージが入っており、内容量が違うので高さも違います。そこで、AとBを包括するＣというdivを作成しました。このとき、Ｃの高さに適当に数値が入っていれば、きれいにAとBが収まった状態になるのですが、Ｃの高さを「自動」にすると、Ｃの高さがなくなったような状態になってしまいます。この場合どうすればよいか教えてください。「自動」とは、内容量に応じて高さが都度調節されるということではないのでしょうか？ どうぞよろしくお願いいたします。
- soramegane
- お礼率84% (11/13)
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ABCすべてにwidthを設定して下さい。 また、ABの後には clear:both を行うタグを置いて下さい （<br style="clear:both" />など）。 あと、DOCTYPE を XHTML 1.0 Strict、 IE対策のため最初の行の <?xml... ?> を削除して下さい。 これでたぶんうまくいくと思います。
関連するQ&A
- DreamWeaver8でのフロートを使った時のレイアウト崩れについて
DreamWeaver8を使って、ホームページを作る練習をしているの ですが、たくさんの商品を並べるページで 商品写真を<div>タグでくくり フロートを使って一列に３つの商品が横並びになり 一ページに合計９つの商品を紹介するような段組を作ろうとしました。 #main div.goods { float: left; width: 160px; margin-right: 20px; margin-bottom: 20px; } というようなスタイルをDreamWeaver8を使って目的の<div>タグに 適応させてみたのですがレイアウトが崩れてしまいました。 一列目は綺麗に「商品写真」が３つ並べることができたのですが 二列目の最初に表示される「商品写真」が画面の右側によってしまい 写真が３つ並ぶはずが、２列目には一つしか表示されず それ以降のレイアウトが崩れてしまいました。 <div>タグとフロートを使って、レイアウトを崩さないように うまく商品を並べるにはどうすればいいのでしょうか？ 回答宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSによる3カラムレイアウト
CSSによる3カラムレイアウト 以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!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" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー | |ナビゲーション｜コンテンツ｜ウィジェット| |フッター | 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。 今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。 ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。 また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- cssでコーディング レイアウト重なってしまう
たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→ｂ（c1,c2）→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>
- ベストアンサー
- CSS
- IEの印刷でcssが無効になう
宜しくお願いします。 CSSを使って、DIVタグでレイアウトしています。TABLEでなくDIVだけで組むのは初チャレンジです。外部CSSを使用しています。 IE（Ver6)では、問題なくCSSが有効となって見えるのですが、印刷プレビュー及び印刷では、CSSが無効となりレイアウトが崩れてしまいます。DIV関係に限らず全てのCSSが無効です。 こんな経験は初めてで、何が悪いのかわかりません。 どこをチェックすれば良いのでしょうか？
- ベストアンサー
- HTML
- リストタグを使ったレイアウトで困っています。
リストタグを使ったレイアウトで困っています。 olタグを使い、入れ子にしたdtタグに書かれた文字列に番号を降っています。 それを下記のようなレイアウトにしたいんです。 １．左側の内容 ２．右側の内容 ３．左側の内容 ４．右側の内容 ５．左側の内容 ６．右側の内容 単純に１、３、５を１つずつdivでまとめ、CSSでfloat: leftを指定して ２、４、６のdivと交互に書いてます。 すると、Firefoxではリストの番号がちゃんと１、２、３…と表示されたのですが IEでは全て１になってしまい番号が降れていませんでした。 CSS自体はfloatの指定しかしていません。 上記のようなレイアウトをしたい場合、このような考え方ではダメなんでしょうか？ htmlのソースは下記のような感じで書いてます。 <ol> <div id="left"> <li> <dl> <dt>左側</dt> <dd>左側の内容</dd> </dl> </li> </div> <div id="right"> <li> <dl> <dt>右側</dt> <dd>右側の内容</dd> </dl> </li> </div> </ol> どなたか分かる方いらっしゃいましたらアドバイスをお願い致します…！
- 締切済み
- HTML
- HTML,CSS：文章内の文字を強調する方法
例えば、 HTML部分 <div class="a">私は、～～<? class="b">「●●」</?>～～である。</div> CSS部分 div.a {font-style: normal; font-size: 11pt; font-family: "ＭＳ 明朝"; line-height: 125% } のとき、<?>の部分を強調したいのですがどのタグを使えばいいでしょうか？レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。 ちなみに、<?>は改行しない場合です。 回答よろしくお願いします。
- ベストアンサー
- HTML
- CSSのBoxを使ってレイアウトについて
□□ 横並びのBoxレイアウトがあり、各ボックスをA、Bとします。 ↑↑ AB Aは、コンテンツの内容に従ってheightが変わります。Bもそれに従いAと同じheightになります。 Bの中には、縦並びのBoxレイアウトが入っています。上のボックスをB1、下のボックスをB2とします。 □ ←B1 □ ←B2 この時、B2のheightを100pxに固定したまま、B1のheightを「Aのheight - B2のheight」という風になるようにしたいです。（B2が全体の右下に配置されるようにしたいです。） B2のheightを100pxに指定した上で、B1のheightに100%とかautoを設定してみましたがうまく行きません。 どう記述すれば良いのか教えて下さい。 宜しくお願いいたします。
- 締切済み
- CSS
- 助けてください。。 CSSのレイアウトについて。
CSSのレイアウトについてのアドバイスをお願い出来ましたらと 思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、 何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が 画像を三段重ね）、D（画像）という様に、float: left;で配置して いき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいと いう部分で上手く行かずに悩んでいます。。 元から書かれた物を直すという作業の上で、 戸惑っています。 自分では下記の様にやってみて途中やり直しを繰り返し して混乱して頭が止まってしまいました。。 よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆ HTML <div id="header"> <!-- A--> <h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1> <!-- /A--> <p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a> </p> <ul class="s_navi"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> <!--D--> Dの部分は省略。 <!--/D--> </div> ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } ------- 以下D部分は略 －－－－－－－－－
- ベストアンサー
- CSS
- SSIを利用してCSSレイアウトを行うとソースが消える！？
以前tableレイアウトとSSIで作成されたページをCSSレイアウトに変更することになりコーディングしたのですが、ローカル環境では正しく表示されるのですが、いざ本番環境で見てみると、大幅なズレが出ました。 原因を調べるためFirefoxのアドオン"Firebug"でソースを確認したところ、本来表示されるべきソースが抜けてしまっていました。 本来であれば↓ <div id="Box"> <div class="a"> <div id="b">●●</div> <div id="c">●●</div> <div id="d"><!--#include virtual="index.html" --></div> <div id="e">●●</div> </div><!--a End--> <div class="a"> <div id="f">●●</div> <div id="g">●●</div> <div id="h"><!--#include virtual="index.html" --></div> <div id="i">●●</div> </div><!--a End--> <br class="floatcrea" /> </div><!--Box End--> と表示させたいのですが、 実際表示されるのは↓ <div id="Box"> <div class="a"> [an error occurred while processing this directive] </div><!--Box End--> <div id="e">●●</div> </div><!--a End--> <div class="a"> <div id="f">●●</div> <div id="g">●●</div> <div id="h"><!--#include virtual="index.html" --></div> <div id="i">●●</div> </div><!--a End--> <br class="floatcrea" /> と出て表示されてしまいます。 [an error occurred while processing this directive] のSSIエラーが出て”</div><!--Box End-->”が移動しています。原因はなんなんでしょうか？教えてください。 ・使用ソフトDWcs3 ・<div class="a">はfloat:left; ・サーバーはSSI利用可 ・ファイル拡張子は".shtml"を利用
- ベストアンサー
- HTML
お礼
うまくいきました！このような方法があるとは全く知りませんでしたので、 本当に助かりました。 ありがとうございました！