- 締切済み
レイアウトの実現が出来ずにこまっています。
レイアウトの実現が出来ずにこまっています。 実現させたいレイアウトは添付の画像の通りで、 Firefoxでは各要素をposition:absolute;で指定して、うまくいきました。 しかしIEでは、添付画像でいうところの白いtableに指定したposition(高さ)が反映されません。 幅はwidth:100%;でFF,IEともに問題なしです。 各要素にheight:100%;としてしまうと、 当然FFでもIEでもhtml,bodyのheight:100%;を継承してしまい tableがピンクの部分からはみ出てしまいます。 なんとかこのピンクの要素の中でテーブルの高さをめいっぱいに表示させたいのですがむりなのでしょうか。
- haruru0331
- お礼率56% (18/32)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- kuzumiHK
- ベストアンサー率72% (132/183)
もし、table内のコンテンツを天地センターにする必要がないのであれば、 下記のような書き方も、現状のブラウザの実装状況のなかで、positionを使った場合のサンプルになると思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- *{ margin:0; padding:0; border-top:1px solid #f00; border-bottom:1px solid #f00; } body{ width:100%; } div#all{ position:relative; float:left; width:100%; border-top:1px solid #000; border-bottom:1px solid #000; } div#main{ float:left; width:80%; } div#header{ position:absolute; top:0; left:0; width:80%; height:60px; } div#contents{ padding:60px 0 70px; width:100%; } div#footer{ position:absolute; bottom:0; left:0; width:80%; height:70px; } div#side{ float:right; width:20%; } --> </style> </head> <body> <div id="all"> <div id="main"> <div id="header">ヘッダ</div> <div id="contents">コンテンツ</div> <div id="footer">フッタ</div> </div> <div id="side">サイド</div> </div> </body> </html> 質問の内容を実現しようとしたときに、以下のような矛盾が発生します。 tableのheightを100%にしたときに高さが画面いっぱいになるには、互換モードを使用する必要があります。 しかし、positionを安定性の高い状態で使用するには標準準拠モードにする必要があります。 （doctype宣言の書き方で、ブラウザやバージョンごとに、互換モードになったり、標準準拠モードになったりします） 互換モードは、標準準拠モードと違い、スタイルが正しく効かないことが多いです。 フルcssを目指すのであれば、標準準拠モードで書けるようにならなければなりません。 問題は、IE6とIE7が消えるまではtableと同じようなレイアウトをJSなしを行うことができない点です。 質問者様はtableとフルcssの混在で妥協点を見出したいと思われているのではないかと思いますが、混在させると多くのバグが発生する恐れもありますので、ご注意ください。。
- nekomikekamo
- ベストアンサー率73% (71/97)
テーブルを含む要素の高さと横幅をどのように定義しているかは不明ですが。 (sideの高さが100%なので左側の要素の高さも合計100%になるんでしょうか？) [css] html{height:100%} body{height:100%;margin:0;padding:0;} div#container{position:relative;height:100%;min-height:100%;background:#FFD5AA;} div#side{position:absolute;left:100%;width:200px;height:100%;min-height:100%;background:#FFFFAA;} div#main_cont{position:relative;left:0;width:100%;height:100%;min-height:100%;background:#EAFFAA;} div#main{position:relative;height:100%;min-height:100%;background:#AAFFBF;} div#header{height:60px;background:#AAFFEA;} div#footer{height:70px;background:#C1AAFF;} div#main table{height:100%;min-height:100%;width:100%;} [html body部] <div id="container"> <div id="side">side</div> <div id="main_cont"> <div id="header">header</div> <div id="main" style=""> <table id="main_t" border="1"> <tr><th>aaaa</th><th>bbbb</th></tr> <tr><td>1111</td><td>2222</td></tr> </table> </div> <div id="footer">footer</div> </div> </div> <script> (function(){ var clienth = function(){ if (window.innerHeight){ return id("side").clientHeight; } else { if (document.documentElement && document.documentElement.clientHeight) { return document.documentElement.clientHeight; } else { if (document.body.clientHeight) { return document.body.clientHeight; } } } return 0; }; var id = function(selector){ var el=null; if (document.getElementById) { el = document.getElementById(selector); }else{ if (document.all){ el = document.all[selector]; } } return el; }; var calc_height=function(){ var ids = ["main","main_t"]; var h= clienth()-130; if(h>0){ for(var i=0;i<ids.length;i+=1){ id(ids[i]).style.height =h+"px"; id(ids[i]).style.minHeight =h+"px"; } } }; calc_height(); window.onresize = calc_height; })(); </script>
- nine999
- ベストアンサー率44% (512/1140)
position:absoluteということは、ウィンドウや他のオブジェクトとは独立したオブジェクトなので、上下のオブジェクトに自然に合わせることはできないという状況ですね。 また、ウィンドウのサイズが変わったときにも対応する必要があるので、JavaScriptを使ってウィンドウサイズを取得（ブラウザによって若干異なる）して、ピンクの要素の大きさを計算してから適用（随時変更）する方が良いでしょう。 それ以外だと、根本的に組み替える必要が出てくるかと思います。
関連するQ&A
- Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- ベストアンサー
- HTML
- 掲載画像のレイアウトはテーブルレイアウトで実現？
掲載した画像のようなホームページのレイアウトはテーブルを何重にも組み合わせて （テーブルを何重にも入れ子にして）実現するのが最近の一般的な手法なのでしょうか このようなホームページのレイアウトのコーディング方法の概略を教えてください。 webデザイン素人のためなるべく詳しく丁寧に教えていただけると助かります。
- 締切済み
- CSS
- CSSレイアウト
CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか？ またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- CSSでレイアウト
3つのブロック要素div1,div2,div3があった場合に添付のような レイアウトにするにはどうすればよいでしょうか？ div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、 今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように なっておきたいと思っています。 できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。 全部Staticにする方法はわかっておりますので全箇所Staticではなく、 「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば そちらのやり方でも教えていただけると助かります。 特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境 での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で 特に指定はございません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- css固定したフッターが本文と重なってしまいます
#all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。
- ベストアンサー
- HTML
- floatした画像の下揃えについて
こんにちは。 HTMLとCSSで添付した画像のようなレイアウトを組みたいと考えているのですが、 CSSでfloat:rightを指定した画像を下揃えにする方法が分からず、詰まっています。 position:absolute;等で画像を絶対位置指定する方法なども試みてみたのですが、 文章が上手く回りこまないため、何か良い方法など知っておりましたら教えてください。
- ベストアンサー
- HTML
- positionについて
positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？ また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }
- ベストアンサー
- CSS
- ホームページ レイアウトについて
ホームページ作成について質問です。 複数ページのホームページの内、全ページ共通の罫線や画像（ヘッダー部、フッター部など）のレイアウト微調整を スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか？ 上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、 位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。 全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、 そうするとひとつのHTMLファイルだけのスタイルシートになってしまうし、スタイルシートはそういう使い方するものではないんじゃないか、と思ってます。。 （そもそも共通設定ファイルにポジションの固定値を記述する事自体、 間違ってる気がしてます） スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の レイアウト調整って可能なのでしょうか？ また、ホームページの完全な任意レイアウトの際のセオリー等が ありましたら教えていただきたいです。 以上、宜しくお願い致します。
- 締切済み
- HTML
- スタイルシートのpositionプロパティを使ってレイアウトすると…
スタイルシートのpositionプロパティを使って、テーブルでレイアウトされたように左にメニュー、右に内容という感じに区切られたページを制作しようと思いました。 実際には下記のような感じでかきました。 --------------------------------- DIV.menu { position: absolute; margin: 0; padding: 0; left: 5px; } DIV.main { position: absolute; margin: 0; padding: 0; left:150px } --------------------------------- 表示については問題ないようなのですが、テキスト部分をドラッグして選択しようとしたとき、うまく選択できない現象が出てしまいました。 WindowsIE6.0、NN7.0で確認しましたが、問題の現象が起こるのはIE6.0の方でNN7.0は問題ありませんでした。 仕様と思って諦めるしかないのでしょうか？ 解決方法などありましたらご教授ください。
- ベストアンサー
- HTML
- レイアウト
スタイルシートで BODY { text-align:center; } を入れ、本文のところで <div style="border:1px solid #8B4513;width:650;padding:5px;"> 内容 </div> としていますが、センタリングされないで表示されてしまいます。 また内容部分に <span style="border:1px solid #000000;width:300;height:75;text-align:left;"> ～～～ </span> と言った感じのものを入れており、 横においた画像でalign="left"を指定しているにもかかわらず、画像の横に表示されず、ぐちゃぐちゃになってしまいこれもうまく表示されていません。 IE5.5や6ではきちんと表示されるおり、このまま行こうと思っていたにもかかわらずNetscape7ではかなり崩れてしまい、びっくりしています。 テーブルで同じようにすることも出来ると思いますが、テーブルレイアウトはあまり好ましくないと聞きます。 そもそも上の方法が間違っていますか？ 上のように枠線の中にコンテンツを入れる、という形はどうしても使いたいのですが…。 文中、分かりにくいところが多くて申し訳ありません。 アドバイスよろしくお願いします。
- 締切済み
- CSS
