CSSテクニックコミュのCSSで中央にhtmlをもっていくには

CSSで中央にhtmlをもっていくには

url:http://deaiweb.xoop.jp/quoqloan.html

コンテンツの下にお申し込みはここをクリックと書いてある

部分を真ん中にもっていきたいのですが、

ＩＥ６でみると真ん中にきません。

どうしたら真ん中にくるのでしょうか？
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

ボタンに指定したＣＳＳ

/*申し込みボタン3*/
.mousikomibotan3 {
padding-top:5px;
padding-bottom:5px;
border:3px outset #ff9933;
background-color:#FF9900;
color:#ffffff;
font-family:"HGS創英角ﾎﾟｯﾌﾟ体";
width:250px;
text-align:center;
margin-left:auto;
margin-right:auto;

}
ボタンを書いたhtml
<div class="mousikomibotan3" >お申し込みはここをクリック</div>

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

コメント(29)

最初
全て
最新の40件

[1] mixiユーザー 10月14日 12:45

http://www.res-system.com/item/567

[2] mixiユーザー 10月14日 13:02

「#navibar a」のheight指定が1pxになっていますが、これって必要なんでしょうか？
Macで見るとli要素に収まりきらず、ナビゲーションの文字が全部はみ出ています。

[3] mixiユーザー 10月14日 13:05

IEでのみ正常に動作すればいい
ボタンを置くエリアの横幅は固定
という条件だったら
margin-left:100;
margin-right:100;
にすれば一応中央にきます。
そうでないなら、ＨＴＭＬから見直した方が良いと思いますよ。
よく見るとヘッダ部分もやや右によってますし

[4] mixiユーザー 10月14日 13:09

<div class="box">
<div class="mousikomibotan3">

</div>
</div>

みたいにして

.box{
text-align:center;
}

じゃだめでしたっけ？

[5] mixiユーザー 10月14日 13:25

2のバカオルさまの件について。
念のため、
MacOSXのver.10.4.8＋Firefox1.5.0.7で見た結果を添付しておきます。
左ナビゲーションの不具合だけではなく、右サイドが落ちてしまってますのでご注意あれ。

そして。トピ主のb-style-tkさまの疑問に関しては。
1の船長さまが引用された内容で間違いないと思いますが、
この場合、「申し込みボタン3」の親に当たる「.contents」の幅が固定になっていますから、
　(460px-250px)/2=105px
これをmargin-left、margin-rightにまんま放り込む……という手を、
私はよく使っています。

[7] mixiユーザー 10月14日 13:48

皆さん回答有難うございます。

>船長さん
参考データ有難うございます。

>バカオルさん
height指定を1%をいれているのは、
ナビバーのアンカー部分がブロックとして認識されないので
仕方なくいれています。

heightを入れた場合と入れなかった場合

ＵＲＬ：http://deaiweb.xoop.jp/height.jpg
> 偽＝蘇芳さん
margin-left:100;
margin-right:100;
でできました。

ちゃんと勉強したいのでhtmlから見直してみたいと思います。
ヘッダ部分が何故右によってしまうのかはわからないです。
> にゃむ＠スタッフ募集さん

<div class="box">
<div class="mousikomibotan3">

</div>
</div>
にゃむさんのやり方でもできました。

[9] mixiユーザー 10月14日 14:01

＞かのかの＠庚さん
回答有難うございます。
macでみるとこんなに崩れているとは思いませんでした。

(460px-250px)/2=105px

この計算式なのですが、

この250pxという数字はどこからでてくるのでしょうか。

[10] mixiユーザー 10月14日 14:31

＞9: b-style- tkさん
＞250px
横レスになってしまいますが、
申込ボタンのwidthではないでしょうか？

それと、WinでもFirefoxで閲覧すると崩れますよ。
(添付画像…環境はWinXP+Firefox1.5.0.7です)
私は「HGS創英角ﾎﾟｯﾌﾟ体」を持っているので、
フォントは再現されますが…。

それと、右サイドに「float:left;」とすると
フッターも影響されちゃいません？

[11] mixiユーザー 10月14日 16:02

>さいさん
申し込みボタンのwidthでした。
ご指摘有難うございます。

ファイヤーフォックスでみると崩れちゃいますね。
自分がIEの環境なのでＩＥのみで考えてました。

いろいろな環境で閲覧しても崩れないように書かないと
だめですね。

フッターは回り込み解除しないといけないですね。
気づきませんでした。

[12] mixiユーザー 10月14日 16:13

XHTMLの後方互換モードで記述してるみたいなので
その状態で対策せずに書くとFireFoxとかで微妙なずれがでそうですね
全てを確認したわけじゃないんですけど汗

中央寄せに関しては、margin:autoとtext-align:centerの両方をやっておけばたいてい問題なく表示できるはずです

[14] mixiユーザー 10月14日 17:59

私も火狐を使用してます。

レイアウトが崩れますね。
特に右メニュー自体が、オチてます。。。

で、今回のサイトはXML宣言されてないと思いますので、
センタリングに関しては
margin-left:auto;
margin-right:auto;
で中央寄せしてもらって、

フッターが右寄せの上段に来ちゃってるのは
クリアレフト

クラス　.right-side　に
幅指定　（他も幅指定しちゃってるので）
width:107px;
フロートを、逆の
float:right;　に

クラス　all　が意味を成していないので
div閉じタグをフッタまで囲んで閉じる。。。

でIEと狐とオペラで閲覧は問題ない？と思いますが。。

極力「原本」をいじくらずに、
無理やり修正しました。
その他細かい修正や指定、追加は必須ですが、
とりあえず。。パット見は。

.ρ(｡｡､)ヾ(^-^;)
そもそも原本のコーディング自体と
カラムの組み方が…
△かなと…。^^;

以上、
どなたか、追加修正宜しくお願いします。

※つ～か、全ブラウザが、統一しちゃえば
一番いいんですけどね＾＾。

[15] mixiユーザー 10月14日 18:07

>JimmYさん
激しく同感です
ブラウザ競争は一向に構わないんですがレンダリングは統一して欲しいですね・・
バグ対策が当たり前でなかなかお金にし辛いのが職業柄辛いです

[16] mixiユーザー 10月14日 22:01

＞JimmY☆彡さん？
XML宣言されてますよ？
トピ主さんが修正されたんでしょうか？

[17] mixiユーザー 10月14日 22:19

>jimmyYさん
allをfooterまでくくるのを忘れてました
ご指摘有難うございます。
勉強になります。
>パンダさん
XML宣言ははじめからしていました。

[18] mixiユーザー 10月14日 22:22

パンダさん

あらま(^^)；
本当だ。。。
ご指摘有難うございます！！♪

見落としました…。
すみません…。
(_ _(--;(_ _(--; ﾍﾟｺﾍﾟｺ

では、XML宣言を省略してもらいましょう…。

失礼しました。。。

[19] mixiユーザー 10月14日 22:26

b-style- tkさん

ごめんなさい。。^^;
見落としてました。

PS：
XML宣言部分を省略するのは『あり』と
記憶してますが、、、、

どなたか、ご指導宜しくお願いします…。

[20] mixiユーザー 10月14日 22:35

あ～僕もFierfox（WinXP/1.5.0.7）でみたらずれてますね～
これは確認していませんがMacのsafariではこのフォントを再現できるかどうか・・・っと思います。

ブラウザ別の細かいずれが気になる場合はCSSハックを使うのが現状なんでしょうかねぇ？

[21] mixiユーザー 10月15日 02:15

☆JimmY☆彡さま。
13のハマタロウさまが仰っている通り、XML宣言を省略してしまうと、一般ユーザで大勢を占めるＩＥ6.0が後方互換モードになって全うに動かないものですから、文法的に間違っていてもXML宣言を削除するのが、現状での“お約束”になっているようです。
事実、DreamweaverやflashではXML宣言削除ver.で書き出されてきますし。
個人的にはその辺がどうにも腑に落ちず、「XHTMLで」と指定された案件以外は相変わらずHTMLで書いていたりします。

☆し～ほさま。
MacだろうとWinだろーと、PCにHGS創英角ﾎﾟｯﾌﾟ体がインストールされていなければ、無理ではないかと^^;　確かこのフォント、XPのデフォルトではなく、Office付属のフォントでしたよねぇ？
個人的には、「ブラウザ表示に使えるフォント＝OSデフォルトフォント」と規定していますが、皆様のお考えは違うのでしょうか？

☆b-style-tkさま
width:210pxの件、説明不足で申し訳ありませんでした。
そして、コーディングをされる際には、ＩＥではなくFirefoxをデフォルトの検証ブラウザにされることをお勧めします。
ある程度“クセ”はあるものの、css周りは何だかんだ言って一番仕様通りに表示してくれるものですから、Firefoxできちんと表示されるようになった処でＩＥで検証し、駄目だった部分をハックで修正するようにすれば、大方の環境・ブラウザで「OK」となる筈です。
あと、左サイドの#navibar aについて。
width・height共々、きちんと実数で指定すべきかと。
その際、li共々line-heightとheightの数値を合わせれば、文字はちゃんと真ん中に配置できますので、今のような“ずれ”は起きないと思います。

[22] mixiユーザー 10月15日 10:19

かのかの＠庚さま

ありがとうございました。
勉強になりました！^^

『Firefoxできちんと表示されるようになった処でＩＥで検証し、駄目だった部分をハックで修正する』
は非常に参考になりました。

私は、未だCSSは勉強中の身分でして、、、、
狐で閲覧後にIE、ネスケという感じでしたが、
今後もその手順で徹底していこうと思います。

ありがとうございました。
人(--*)謝謝(-人-)謝謝(*--)人

[23] mixiユーザー 10月15日 10:39

＞かのかの＠庚さん
、左サイドの#navibar aについて。
width・height共々、きちんと実数で指定すべきかと。

height:1px;　のような指定はよくないですね。

勉強になりました。有難うございます。

[24] mixiユーザー 10月16日 10:16

仕様書を見る限りだと、XML宣言は文字コードがUTF-8かUTF-16のときには省略できるようですね。
仕様書では省略しないことが強く推奨となっていますが、宣言なしでeuc-jpなどのXHTMLをValidaterにかけてもエラーが出ないので、私は書いていないです（大半がそういうスタイルじゃないかな？）。

Firefoxを使うなら、以下の拡張がおすすめです。有名なのでもうお使いかもしれませんが。
http://www.infoaxia.com/tools/webdeveloper/

FirefoxとNNはエンジンが同じなので、私はFirefox1.5→IE6でチェックして終わりです。

[25] mixiユーザー 10月16日 11:03

> 仕様書を見る限りだと、XML宣言は文字コードがUTF-8かUTF-16のときには省略できるようですね。

最新の仕様では変わったようです
http://www.kanzaki.com/docs/html/xhtml1.html#xmldcl-encoding

[26] mixiユーザー 10月16日 19:19

こんにちは、はじめまして

>最新の仕様では変わったようです

あら、変わってたんだ....(いつ？ずいぶん前？）

.htaccess でHTTPヘッダのキャラクターセットを
指定するのだと問題ないってことでいいのかな？

AddType "text/html; charset=Shift_JIS" .html

とか。

最近htmlの拡張子でphpを動作させてしまうことが
多いんですけど、その場合ってphp.iniの文字コード
設定で出力するHTTPヘッダのキャラクターセットが
決められてるはずなのかな（PHPコミュで聞いたほ
うがよい内容ですね...）

ヘッダ情報がみれるFFのプラグインが
どっかにあったような...誰か知ってます？

確認しとかなきゃ

[27] mixiユーザー 10月17日 00:10

>>21
> 13のハマタロウさまが仰っている通り、XML宣言を省略してしまうと、一般ユーザで大勢を占めるＩＥ6.0が後方互換モードになって全うに動かないものですから、文法的に間違っていてもXML宣言を削除するのが、現状での“お約束”になっているようです。

IE6は、HTML 4.0以降の!DOCTYPE宣言が指定されていれば(HTML4 Transitional + URL無しを除き)W3Cの仕様に従ったCSSの解釈をします。(標準準拠モード)

http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

しかしこのモードは、!DOCTYPE宣言の前にXML宣言が置かれると(文法的には正しいにも関わらず)無効になってしまいます。

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html#hosoku-winie6

そのような事情からIE6で標準準拠モードとなるよう、XML宣言が省略されることが多いですが、XML宣言は(あることが望ましいとはされていますが)必須ではないので、XML宣言が省略されていても、それだけでは文法的には誤りとはなりません。

UTF-8, UTF-16で書かれているならば、XML宣言を省略しても文法的には正しいXML(XHTML)文書となります。

>>25
> > 仕様書を見る限りだと、XML宣言は文字コードがUTF-8かUTF-16のときには省略できるようですね。
>
> 最新の仕様では変わったようです
> http://www.kanzaki.com/docs/html/xhtml1.html#xmldcl-encoding

「UTF-8, UTF-16のときにはXML宣言を省略できる」点については以前から変わっていません。
上記リンクは、それに加えて"higher-level protocol"(HTTPヘッダなど)により文字コード情報が送られている場合でもXML宣言を省略できる、といった内容がXHTML 1.0 Second Edition仕様書に加わった、という説明です。

(実際の仕様書の記述では「～以外の場合はXML宣言は必須」というような書かれ方になっています)

[28] mixiユーザー 10月17日 00:37

☆北村曉さま

>XML宣言は(あることが望ましいとはされていますが)必須ではないので、XML宣言が省略されていても、それだけでは文法的には誤りとはなりません。

>UTF-8, UTF-16で書かれているならば、XML宣言を省略しても文法的には正しいXML(XHTML)文書となります。

そ、そうだったのですね。
マルチリンガルサイトで、これまた先方から「文字コードはユニコードで」と指定がない限り、慣れたSHIFT_JISで書いていたものですから全く知りませんでした。
大変失礼致しましたm(__)m
これで、心おきなく（？）XHTMLで書くことができますです。
b-style-tkさまには、トピの趣旨違いで“役立ち～”させて頂いて大変恐縮ですが、どうも有難うございました。

これだからコミュはこまめに見るモノですねぇ……（をいをい）。

ログインすると、残り4件のコメントが見れるよ