html、cssで、一部がセンタリングできない

質問

現在、試験的に作成しているホームページを、全体にセンタリングしたい場合について、お聞きしたいと思います。

(1)ものすごく、右へスクロールするようになっています。
上部のタイトル部分の絵が、原因で、かなり右へスクロールする状態です。
(2)中央あたりにある「内容」と書いてあるタイトルから下のインラインフレームの枠を含めて、右寄りになっています。
一番下の「Copyright © 2012 タイトル All Rights Reserved.」だけ、センタリングされている状態です。

全体を、最下部の「Copyright © 2012 タイトル All Rights Reserved.に合わせて」、一気にセンタリングしたいのですが、どの部分を修正すればよいでしょうか？

cssは、ここに記載できなかったため、そのままの記述で、インラインフレームの中にコピーをしてあります。

詳しい方がいましたら、よろしくお願いします。

回答No.1

Calm Trip（@CalmTrip） · ベストアンサー

cssなど、記載されなくても、http://sky.geocities.jp/thanksv0358/index.html　
をブラウザーで開き、＜名前を付けてページを保存＞すれば、自動で落ちてきます。

下記　確認されては如何ですか。
(1) <DIV id="contents" style="text-align : left;">
#contents {
clear:both;
width:767px;
margin:0 auto; padding:10px; background:#fff;}　と　Width が　767 なのに、
　　その 中にある
<IFRAME ～～　height="133" scrolling="AUTO" width="844"></IFRAME>　Width が それ以上
　　width="844">　→　width="544">　だけで、まずバランスがとれます、
(2) <DIV id="contents" style="text-align : left;">の中にある
<DIV id="main">は、右寄せになっています。
#main {
float:right;
width:547px;}

お礼

ご回答、ありがとうございます。とても参考になりました。

回答No.3

ORUKA1951

無理です。
　とりあえず、使用しているブラウザではごまかせますが、ウィンドウサイズを変更した時点でずれてしまいます。iframeのサイズを変更すればとりあえずは・・

　しかし、訪問するユーザーはあなたと同じディスプレイで見ているわけじゃありません。もっと小さなディスプレイの人も、幅広のディスプレイの人もいます。最近ではスマートフォンの人も無視できません。(幅は768,788pxだったかな)

　簡単なので、根本的に書き直そうかと思ったのですが、時間がもったいないので止めました。

あまりに酷いので
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
で大きな減点項目だけでも直しましょう。
　よい勉強になります。

　オーサリングツールを使用する場合は、手書で作成する人以上にHTMLやCSSの知識が必要です。それがないのでしたら、テンプレートをそのまま使用する程度に収めましょう。すこし手を入れようとしたり、ちょっと見栄えにこだわろうとすると悲劇的になっちゃいます。

　ちなみにテキストエディタで作成するとHTMLは半分、スタイルシートは十分の一になって、わかり易く修正も簡単にできます。

お礼

ご回答、ありがとうございます。とても参考になりました。

回答No.2

weakweak

cssでfloat:rightを削ってください。
main{
float:right;
}
padding-left: 50pxも削ったほうがいいです。
main h3{
padding-left: 50px;
}

HTMLでiframeのwidth設定を見なおしてください
<iframe frameborder="1" src="6frame.htm" width="547" height="133" scrolling="AUTO"></iframe>

お礼

ご回答、ありがとうございます。とても参考になりました。