- ベストアンサー
テーブルレイアウトの外側
こんにちは。 現在テーブルレイアウトでホームページを作成しています。 http://www.shoshinsha.com/hp/ のようにテーブルレイアウト内側を白にして、何もないことがわかる様にテーブルレイアウトの外側を黒とか色を変えたいのです。 何かアドバイスをお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#2～#4です。確認させていただきました。 まずCSS（スタイルシート）の記述に間違いがあります。 * {margin:0;padding:0;} body{ background-color:#000000;/*外枠の黒の背景*/ margin:0px; } #my_body{ margin:0 auto; width:780px;/*白くしたい部分の横幅*/ background-color:#ffffff;/*内側の白の背景*/ }/*←この記述が抜けているためうまく表示されません*/ a { font-size:9pt; color:#0000ff; text-decoration:underline } a:hover { font-size:9pt; color:#ff0000; text-decoration:underline } h4{ border-left:solid 10px #00ff00; border-bottom:solid 1px #00ff00; padding-top:3px; padding-left:3px; width:180px; } また最後に </table></div> <div></div> <script type="text/javascript"> ・ ・ </script></body> </html> とありましたが正しくは </table> </div> <script type="text/javascript"> ・ ・ </script> </body> </html> です。これでFirefoxでも正しく表示されます。
その他の回答 (4)
#2、#3です。 × <div align="center"><div align="left"><h4>文字</h4></div></div> ○ <div align="left"><h4>文字</h4></div>または<div align="center"><h4>文字</h4></div> です。申し訳ありません。
お礼
度々ありがとうございます。 現在、左寄りでもいいので、Firefoxで見出しが正しく表示されるように、調べています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を入れていないのにFirefoxでは中央表示になっていて、そして見出しが消えるのです。 http://gyokuro2000.web.fc2.com/ ですので、何か分かればアドバイスをお願いします。 もう少し調べてダメのようなら、見出しを画像に変更して締め切ります。
> で中央になりますが、見出しがおかしくなってしまいます。 とのことですがどのようにおかしくなっているのでしょうか？ <div align="center"><div align="left"><h4>文字</h4></div></div> と明記するのが正しいようですが…。 テキストを左寄せにしたい場合は h4{ border-left:solid 10px #00ff00; border-bottom:solid 1px #00ff00; padding-top:3px; padding-left:3px; width:180px; text-align:left;/*ここを追加しています*/ } と明記されるといいですよ。 "http://www.w3.org/TR/html4/loose.dtd"については http://www.shoshinsha.com/hp/ref/html/dtd.htmlを参考にしてください。 下記の厳密型やXHTMLへ移行中ですという意味だそうです。 Firefoxでは入っていなくてもセンターになりますが、IEの場合は指定しないと左寄りになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> <!-- * {margin:0;padding:0;} body{ background-color:#000000;/*外枠の黒の背景*/ margin:0px; } #my_body{ margin:0 auto; width:700px;/*白くしたい部分の横幅・任意で変更してください*/ background-color:#ffffff;/*内側の白の背景*/ } --> </style> </head> <body> <div id="my_body"> テーブルを含んだHP内容 </div> </body> </html> これでどうでしょうか？ 「margin:0 auto;」を入れていますので、DTD宣言（"http://www.w3.org/TR/html4/loose.dtd"）を 書き忘れると左寄りになってしまいますのでご注意ください。 また、<body>の直下に<div id="my_body">を入れて、最後は必ず</body>の直前で</div>で終わって下さい。
お礼
ありがとうござました。解決しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> で中央になりますが、見出しがおかしくなってしまいます。 私のホームページの中に<head>の中に h4 { border-left:solid 10px #00ff00; border-bottom:solid 1px #00ff00; padding-top:3px; padding-left:3px; width:180px; } を見出しで使っていて 、<div align="center"> <h4><div align="left">文字</div> </h4></div>をテーブル内に入れています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> もしよろしければ上記の意味を教えてもらえないでしょうか？
補足
上記の現象はブラウザをIEにすると普通ですが、Firefoxで見ると <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> が入ってなくても、見出しが解除されます。
- pbforce
- ベストアンサー率22% (379/1719)
背景色を黒にするか、テーブルを2重にして大きい方のテーブルを黒くするか、って感じでしょうか。
お礼
回答ありがとうございます。 背景色を設定すればよかったのですね。
お礼
本当にありがとうございました。 NymphLunaさんのおかげでイメージ通りに作れました。 助かりました。