- ベストアンサー
IE以外は色が付かない なぜ？
<html> <head> <title>test</title> <style type="text/css"> } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test <div> </body> </html> このコードを実行するとＩＥだと、色が赤くなるのですが スレイプニルやグーグルのブラウザだと何も色が付きません。 なぜでしょうか？
- GRIDKWBKMYD
- お礼率98% (59/60)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<style type="text/css"> } 最初の「 ｝ 」が邪魔してます。 それから、htmlでは、divが閉じられていません。 ケアレスミスに注意しましょう。 タグ補完してくれるようなお助けツールをしよすると、ミスが減るような気がします。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
間違っているから(^^) ⇒W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 2 文法解析エラーが発生しました } グーグルのブラウザ(Google Chrome)は兎も角、スレイプニルはIEと同じTrident、およびWebkitがレンダリングエンジンですから、テスト用には？？ Gekoを使用するFirefoxも必要です。特にFirefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この問題も気がつくはず・・
お礼
難しいので勉強します ありがとうございます。
関連するQ&A
- IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが ＩＥ９だと横画面いっぱいに広がってしまいます。 ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
- ＩＥだと左側に赤い中のテーブルが寄ってしまう
http://oshiete.coneco.net/qa8437703.html こちらで質問してご回答いただいてタグを修正したのですが、 なぜかIE以外のブラウザなら、中のテーブルが中央に表示されるのに ＩＥは左側に赤い中のテーブルが寄ってしまいます。 対応方法を教えてください。 コードは <html> <head> <title>test</title> <style type="text/css"> #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test </div> </body> </html> です。
- ベストアンサー
- HTML
- divで囲った外側に色を付けるには？
<html> <head> <title>test</title> <style type="text/css"> #main{ width: 200px; background-color: red; } </style> </head> <body> <div id="main"> test </div> </body> </html> 今のコードだとdivで囲った内側に色がついてしまいます。 divで囲った内側には色を付けずに 外側につけるにはどうすればいいでしょうか？
- ベストアンサー
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- <div id="main">の外に色をつけるには
画像の白い部分に色を付けるにはどうすればいいでしょうか？ <div id="main">の中には、赤、線には青の色を付けることはできたのですが、 <div id="main">の外側に色を付けるにはどうすればいいですか？ コードは、 <style type="text/css"> #main{width: 70%; margin: 0 auto; text-align: left; background-color:red; border:30px solid blue;} </style> </head> <div id="main"> test </div> としています。 よろしくお願いします。
- ベストアンサー
- HTML
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- ブラウザの横幅イコール100％ではない？
以下のコーディングで、各色、1行になる筈なのですが、上手くいかず困っています。根本的に何かを間違えているようで、思ったようになりません。何を勘違いしているのか、どうすればいいのかを教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>無題ドキュメント</title> <style type="text/css"> body{margin:0;padding:0;width:600px;} h1{margin:0 1%;width:98%;background:#ffbbbb;} div{float:left;padding:2em;margin:0 1%;} .test2{width:48%;background:#ffdddd;} .test3{width:31.3%;background:#ddffdd;} .test4{width:23%;background:#ddddff;} .test1{width:98%;background:#ffffcc;} </style> </head> <body> <p>body{margin:0;padding:0;width:100%;}</p> <h1>見出し1 h1{margin:0 1%;width:98%;}</h1> <div style="margin:0;width:100%;background:#eeeeee;height:30px;padding:1em;">div 共通{float:left;padding:2em;margin:0 1%;}</div> <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2（左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり</div> <div class="test3">div.test3{width:31.3%;緑}</div> <div class="test3">.test3（左右1％のマージンと31.3％のコンテンツで33.3％）が3個で99.9％のつもり</div> <div class="test3">.test3</div> <div class="test4">div.test4{width:23%;青}</div> <div class="test4">.test4（左右1％のマージンと23％のコンテンツで25％）が4個で100％のつもり</div> <div class="test4">.test4</div> <div class="test4">.test4</div> <div class="test1">.test1{width:98%;黄}（左右1％のマージンと98％のコンテンツで100％）のつもり</div> </body> </html>
- ベストアンサー
- CSS
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- div配置のことで質問です。
div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 （下の方に画像をつけているので参照しながらお願いします。） 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です） 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
お礼
おっしゃるところを直したら治りました！ ありがとうございます。