- 締切済み
xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に さらにfloatさせてleft、lightの２つ横並びのボックスを 配置することは可能でしょうか？ また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- n31792
- ベストアンサー率31% (5/16)
『xhtml+cssでのプログラミング』とおっしゃっていますが、確かで申し訳ないのですがXHTMLやCSSはプログラムではないと思います。 …自信ないですが。
- SAYKA
- ベストアンサー率34% (944/2776)
>ページ全体をセンタリング表示したいです どっちのセンタリングの事を言ってるのかな？ -------------------(元 ■■■■□□□□□□ ■■■■■■□□□□ ■■□□□□□□□□ ■■■■■■□□□□ -------------------(A □□□■■■■□□□ □□■■■■■■□□ □□□□■■□□□□ □□■■■■■■□□ -------------------(B □□■■■■□□□□ □□■■■■■■□□ □□■■□□□□□□ □□■■■■■■□□ (A <div style="text-align:center"></div> (B <div style="width:75%;margin-left:auto;margin-right:auto"></div> ※Bのwidthは100%以外の全体より狭い値 >floatして右側に表示しているボックスの中に >さらにfloatさせてleft、lightの２つ横並び 「さらに」の内容を甲乙として こうしたいの？ ------------------- □□□□■■■■■■ □□□□■甲□□乙■ □□□□■■■■■■ ------------------- ※「■」は仮想的なブロック枠 これは「■」のブロックのwidthが固定されていればできるよ。(width指定が要るという意味) widthが不定のまま実現は無理だよ。
補足
いつもご回答ありがとうございます。 説明不足ですみません。 >>ページ全体をセンタリング表示したいです >どっちのセンタリングの事を言ってるのかな？ Bの事を言っています。 <div style="width:75%;margin-left:auto;margin-right:auto"></div> はどこに付ければ良いでしょうか？ bodyの下、warp内につけても反映されません。。。 >これは「■」のブロックのwidthが固定されていればできるよ。(width指定が要るという意味) ブロックのwidthは固定されています。 ですが、上記ソースですと、#footerが#mainからはみ出してしまいます。 他に原因があるのでしょうか？ よろしくお願いします。