人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在 XHTML+CSS によるHP作成を勉強中です。
以下URLに有るデータがIE基準で作ったのですが、FireFoxやOperaで形が崩れてしまいます。特に全体のセンタリングがどうやっても出来ません。
そのほかの崩れは文字サイズに関係しているのかとも思うのですがピクセル指定のポジションが微妙にずれてしまいます。
技術的な問題についてのみ可能な限り教えていただけるとありがたいです。どうぞよろしくお願いします。

http://www.the.cside.com/test/

CSSデータは
http://www.the.cside.com/test/c/001.css
です。

●質問者: tosiki
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox opera XHTML サイズ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● mizunoto
●80ポイント

中央揃えに関しては・・・

body{ text-align:center;}

と併せて、中央揃えにしたいブロック要素に

div#○○{

margin : 0px auto;

text-align : left; /*内容のテキストが中央揃えになるのを回避*/

}

を加えてあげれば出来ると思います。

◎質問者からの返答

早速の回答ありがとうございます。

タイプミスも含めて確認しましたが仰るとおりになっていると思います。

この場合marginはあまり関係ないですよね、念のためその部分も含めてやってみましたが…

以後お手数ですがソースを確認の上ご回答いただけるとありがたいです。


2 ● komorebi
●150ポイント

IEは、一番CSSのレンダリングが正しくありません。

FireFoxなどのレンダリングのほぼ正しい方で、優先的にCSS設計をまずすることをオススメします。

完成後に、IEでレイアウトの崩れてしまう部分を、<!--[if IE]>をつかって上書きすれば、ハックを最小限で済むと思います。

中央寄せは、CSSテクニックの基本なので、海外サイトや最近のWEB雑誌を見たほうが詳しくのっています。

position: relative; は、此処に設定するのではなく、ブロック要素に「基準」として使用することをオススメします。

それと、Paddingを使ったら必ず調子をしなと、IEのバー所によってレンダリングが違うので崩れますよ。くれてる原因はそれだと思います。

◎質問者からの返答

いやはや調べながらやっているつもりなんですが…

改めて調べてみるとmargin: 0 auto;も必要なんですね、それも言うことを聞いてくれなかったんですが。

横幅固定で両サイドautoの方を試してみます。

Paddingの調整は一つ一つBoxModel Hackを適用している積もりなのですが、1〜2px程度ずつずれて行くように感じるのですが気のせいかな、ボックスモデルについてはIE6とFireFoxは同じ挙動だったのではないでしょうか。

冷静に考えると、設計が甘くてpositionを多用しすぎているようにも思えますが、同じHTMLをCSSで使い回す腹だったので。

少し無謀だったかもしれません。

拝見するところお忙しい中チェックしていただいたようで感謝します。

もう少し回答を待たせていただきます。


3 ● sandaler
●100ポイント

スタイルシートのbodyに

margin-right:auto;

margin-left:auto;

を追加してみてください。

◎質問者からの返答

センタリング出来ました、あっさりと

どうもありがとうございます。

komorebiさんご指摘のようにFireFoxにてやったところ、きちんとつじつまが合う数値で配置が出来ました。それを影響の無い範囲でIEでも妥協線を探す形で何とか思うような配置に成りました、どうもありがとうございました。

しかし、MacのIEでみたときは…みなかったことにします。

どうも稚拙な質問だったようですみませんでした、しかしおかげさまで突破口が出来、勉強になりました。

重ねてありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ