• ベストアンサー

XHTML+CSSの段組についてです。

XHTML+CSSでサイト構築をしようとしております。 段組を中央に配置しようとしているのですが、「<?xml version="1.0" encoding="utf-8"?>」を最初に記入すると段組の配置も左側寄せになってしまいます。 <?xml~>を記入しないで、CSSマージンのLeft/Rrightをautoにすればきちんと中央に配置されます。 そこで、<?xml~>を記入して段組を中央に配置するにはどのようにすれば良いのでしょうか?

  • HTML
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

「IE6」の場合doctypeで「標準モード」と「互換モード」にレンダリング動作を分けています。 しかし、文書先頭に「xml宣言」があるとdoctypeがないとみなして互換モードで動作してしまうバグがあります。 一応、uft-8で記述されている場合に限りxml宣言を省略してもよいという事らしいので現状ではxml宣言を省略するのが妥協策のようです。 「」でくくったキーワードで検索してみると色々情報がみつかると思います。

ryoryu2002
質問者

お礼

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

ryoryu2002
質問者

補足

さっそくのご回答にお礼申し上げます。 IE6ではそのような理由だったのですね。 現状でXHTML+CSSのIEでご確認すると、センター配置でレイアウトしているサイトをちらほら見かけるのですが、 どのように設定しているのでしょうか?

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

IEの互換モードも加味してセンタリングをするには text-alignでブロック要素がセンタリングされるIEのバグを利用します。 詳しくは参考URLを。

参考URL:
http://www.mozilla.gr.jp/standards/webtips0004.html
ryoryu2002
質問者

お礼

おかげさまで助かりました。有難う御座います。

関連するQ&A

  • xhtmlについて

    xhtmlについて2点質問があります。 1.xmlの先頭1行のような記述は必要ですか? xmlは<?xml version="1.0" encoding="UTF-8" ?>のような宣言を1行目に必ず記述する必要がありますが、xhtmlもそうなのでしょうか?W3CのValidatorを使ってみましたが、あってもなくても違いが無かったようです。厳密には在った方が良いのですかね? 2.エンコードはUTF-8にするべき? xmlは基本的にencoding="UTF-8"ですが、UTF-8だと日本語表示が出来ません。しかしshift-jisはあまり推奨されないという話も聞いたことがあります。質問1の記述が必要になった場合、encoding="UTF-8"にするべきなのでしょうか?UTF-8がどれだけ普及しているのかも気になります。

    • ベストアンサー
    • HTML
  • CSSで横の段組-センタリングするには?

    CSSで横の段組をし、センタリングしたいのですが、 横の段組のために「float: left;」を使うと、 「margin:0px auto;」と指定しても左寄りになってしまいます。 「float: left;」を消せばセンタリングできるのですが、 そうすると横の段組ができなくなって困っています。 何か単純な間違いをしているのだと思うのですが、ご助言ください。

    • ベストアンサー
    • HTML
  • CSSで可変3段組を作りたいのですが、

    CSSとXHTMLを使い、可変3段組を作りたいのですが、うまくいきません。 条件は以下のとおりです。 #container:100% #wrapper:100% #center:100% #left:width:200px #right:width:200px leftとcenterを並べ、wrapperとrightで2組にしようと思っています。 なんどもやっているのですが、うまくいきません。 なかなかしんどい構成なのですが、ご存じな方いらっしゃいましたら、よろしくお願いします。

  • xhtmlにxml宣言を行うと表示が崩れます。。。

    現在xhtmlでページを作成しているのですが、xhtmlにはxml宣言が必要ということで、<?xml version="1.0" encoding="UTF-8"?>を挿入しました。 しかし、この宣言を入れると表示が崩れてしまいます。左右autoのセンター表示が左に寄ったり、boxのサイズが変わったりと・・・。 何が原因かもわからずに困っています。 何方かアドバイスいただけたら幸いです。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでの中央揃え

    CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体(云わばbody)が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります(しかも右側はピッタリレイアウト面がウインドウ端についている) 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします

    • 締切済み
    • CSS
  • xhtml2.0をhtmlに変換したい

    xhtml2.0をhtmlに変換したいと考えています。 ---------------- [ 共通 essay.xsl ] <?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" encoding="UTF-8" /> <xsl:template match="/"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title><xsl:value-of select="html/head/title" /></title> </head> <body> <xsl:value-of select="html/head/title" /> </body> </html> </xsl:template> 15 </xsl:stylesheet> ----------------- <例1> [偽物xhtml2.xml] <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="essay.xsl" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xml:lang="ja"> <head> <title>偽xhtml2.0</title> <meta property="keywords" xml:lang="ja">xhtml2.0</meta> <meta property="dc:dreated" content="2008-01-06" /> </head> <body> <h>テスト</h> <p>偽xhtml2.0</p> </body> </html> --------------------------- <結果> 「偽xhtml2.0」と表示される ------------------------ 上記のように、xmlns無しで書いた、偽物xml2.0は変換できるのですが、下記の ------------------------------ <正式xhtml2.xml> <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="essay.xsl" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> <html xmlns="http://www.w3.org/2002/06/xhtml2/" xml:lang="en" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2/ http://www.w3.org/MarkUp/SCHEMA/xhtml2.xsd" > <head> <title>正式xhtml2.0</title> <meta property="keywords" xml:lang="ja">xhtml2.0</meta> <meta property="dc:dreated" content="2008-01-06" /> </head> <body> <h>テスト</h> <p>正式xhtml2.0</p> </body> </html> ------ 正式な形のxhtml2.0を共通xsltで変換しようとすると、うまくいきません。名前空間あたりが怪しいと思うのですが、どうすればうまく変換できるでしょうか?

    • 締切済み
    • XML
  • XHTML+CSSレイアウトについて

    段組レイアウトで画像を配置しているのですが、画像の上側部分に空白が出来て しまいます。(IE6で確認すると) 他のブラウザ(Opera+mozila+News)ではきちんと空白が詰めております。 現状で空白を詰めるにはどのようにしたら良いでしょうか? 「具体的なソース」 http://www.geocities.jp/travelxstory/test/test.html http://www.geocities.jp/travelxstory/test/css001.css 真中のabout画像と上の赤い線の間に空白が出来てしまいます。 勿論、マージン等も設定してIE以外のブラウザではきちんと詰まって表示されます。なぜか上部のaboutだけは正常に空白なしで詰まっております。 現状のXTHML+CSSで画像の空白を詰めるにはどのようにしたら良いでしょうか?

  • XHTML1.1でのXML宣言とDTD宣言の書き方

    XML宣言によるレイアウトの崩れ等の質問はありましたが今回の質問と同じ内容は私には見当たらなかったため質問させて頂きます。 XHTMLでのXML宣言を <?xml version="1.0" encoding="utf-8"?> と記述しています。 上記の記述と <?xml version="1.0" encoding="UTF-8"?> とで、文字コードの大文字か小文字かの違いだけなのですがどちらの方が良いのでしょうか。 同じくDTD宣言を <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> と記述しています。 XMLでは大文字と小文字を区別して扱うため必ず半角で書かなければならないとされていますが、XHTMLでマークアップされているサイトのソースを見るとどこもXML宣言での文字コードとDTD宣言では大文字が使用されています。 細か過ぎるというのは分かっているのですが厳密にはどのような記載が正しいのでしょうか。 ※今回投稿カテゴリーの小カテゴリーにて”XML”を選択致しましたがXHTMLについての質問の場合”XML”と”HTML”どちらにするべきでしょうか。 合わせてご返答、又はご意見を頂戴できれば幸いです。

    • 締切済み
    • XML
  • 教えてください。ホームページを作っているのですが、宣言文を入れると、中

    教えてください。ホームページを作っているのですが、宣言文を入れると、中央に配置できなくなります。 これはどうすればよいのでしょうか?? <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head>

  • CSS:floatを使っての段組で困っています

    図のような段組をしたいのですが、ソースはあっているでしょうか? サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }

    • ベストアンサー
    • HTML

専門家に質問してみよう