締切済み

ＩＥ８でのＣＳＳについて

2013/08/29 22:15

formの領域内に可変のdivと固定のdivの領域を指定したいのですがうまくいきません。 ※formの領域が1000pxだとした場合に下のdivが300のため上のdivは残りの700の50%で350pxにしたいです。２つのdivは異なる親タグにしなければならないのでしょか？ <html> <body> <form method="POST" action="" style="height:100%"> <div style="height:50%;background-color:red"></div> <div style="height:300px;background-color:blue"></div> </form> </body> </html>

questionHuman
お礼率1% (1/53)

CSS
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2013/08/31 16:26 回答No.3

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/08/30 10:01 回答No.2

そのHTMLは間違ってますよ。スタイルシートを期待通りに動作させるためには・・【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからメモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator )］より　スタイルシートを書き始めるより先に、まず「Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )」などで文法チェックをして置きましょう. ※formはinline要素ですから、bodyに直接置くことはできません。　またIEは、過去の誤った解釈で作られたIE向けのサイトを表示するために「互換モード」があります。特にwidthやheightの解釈は間違っていますから、他の標準ブラウザと同様に動作するようにDOCTYPEを記述する必要があります。　HTML4.01strictでしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 　になります。　その上で・・・。　ブロック要素は、staticでない直近の親であるコンテナブロックのサイズを参照します。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <body> 　<div class="article"> 　　<form action="./"> 　　　<div class="header"> 　　　</div> 　　　<div class="section"> 　　　　<p>A:<input type="text" name="ABC" value="" tabindex="1" accesskey="A"></p> 　　　　<p><input type="submit" value=" 送信 "></p> 　　　</div> 　　　<div class="footer"> 　　　</div> 　　</form> 　</div> </body> [HTML5] <body> 　<article> 　　<form action="./"> 　　　<header> 　　　</header> 　　　<section> 　　　　<p>A:<input type="text" name="ABC" value="" tabindex="1" accesskey="A"></p> 　　　　<p><input type="submit" value=" 送信 "></p> 　　　</section> 　　　<footer> 　　　</footer> 　　</form> 　</article> </body> html,body{margin:0;padding:0;height:100%;position:relative;} div.article{height:100%;} div.article div.footer{position:fixed;height:300px;bottom:0;} div.article div.section{padding-bottom:300px;}

startingover_04
ベストアンサー率25% (2/8)

2013/08/29 22:45 回答No.1

html,body の高さを 100%に指定されて思い通りに動きませんか？

関連するQ&A

このcssをIEで見ると？
お世話になります。下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
ｃｓｓで中央よせ
CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />  <style type="text/css">  </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>
- ベストアンサー
- CSS
CSS：区画のレイアウト1
現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }
- ベストアンサー
- HTML
シンプルなコードなのにテーブルにCSSが適用されない・・・
今回思い悩んで質問させて頂く事となりました。すごい単純に書いてるつもりなのですがテーブルに着色　（青）　（赤）　が適用されません。当方、本一冊の独学でやっているので大ポカと思うのでご指摘頂ければと思います。　以下コードです。 ------------------------------------------------ <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <table width="200" border="1"> <div id="blue"> <tr><td> </td></tr> </div> <div id="red"> <tr><td> </td></tr> </div> </table> </body> Dreamweaver上では着色されるのですが・・・どなたかご教授お願い致します。
- ベストアンサー
- HTML
ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF }  </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
CSS：全体の画面の中央ぞろえ
全体的にレイアウトを中央にそろえたいのですが、それをするのにあるサイトに、「margin:0 auto」または「margin-left:auto ; margin-right:auto」を指定すると書いてあったのですが、そのようにしても中央ぞろえにはなっていませんでした。どのようにすればよいのでしょうか？ div { float: left; margin-left: auto; margin-right: auto } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ソースは以下のとおりです。 <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
cssでの幅の分割（固定・可変混合）がうまくできません
画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした． <div style="width:200px; height:600px; background-color:#ccf; float:right"> メニュー </div> <div style="width:auto; height:600px; background-color:#fcc;"> <div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div> <div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div> </div> ２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．
- ベストアンサー
- HTML
テキストエリアの設定
質問１以下のように設定しました。現在、横長のボックスの右下に４cm×４cm大の送信用テキストエリアが配置されていますが、両者を横一列に並べることはできるでしょうか。テキストエリアを横長ボックスの前に配置してもかまいません。 <html> <head> <title>MISC</title></head> <body bgcolor="#FFFF99"> <div align=center class="MsoNormal">－－－省略－－－－</div> <div style="background-color:#0ff;width:730px;height:200px;overflow:auto;"> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8">見出し</FONT> <h3><FONT COLOR="#0000ff">小見出し</FONT></h3> <FONT STYLE="font-size:5mm">テキスト</FONT></DIV> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> 質問２あるいは以下の設定で、テキストエリア右側の空白部分にも見出し、小見出し、テキストを配置することができるでしょうか。 <div style="background-color:#0ff;width:950px;height:200px;overflow:auto;"> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8">見出し</FONT> <h3><FONT COLOR="#0000ff">小見出し</FONT></h3> <FONT STYLE="font-size:5mm"SIZE="5">テキスト</FONT></DIV>
- ベストアンサー
- ホームページ作成ソフト
css box　ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css">  </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？　IE迷惑ですｗ
- ベストアンサー
- CSS

ＩＥ８でのＣＳＳについて

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

ＩＥ８でのＣＳＳについて

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録