2012-02-18 3 views
0

私はXHTML1.1を使用しています.HTML5が期待通りに動作しないことがあります。誰かがまともなチュートリアルを提供できれば、それを見てうれしいでしょうHTML5で書いたものは他のブラウザではレンダリングされませんが、Chrome> _>; 。高さを無視したXHTML

私の問題に戻ります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
    #Content{ 
     position: relative; 
     background-color: #8CF; 
     padding: 1%; 
     border-color: black; 
     border-style: solid; 
     border-left-width: 1px; 
     border-right-width: 1px; 
     border-bottom-right-radius: 10px; 
     border-bottom-left-radius: 10px; 
     height: 100%; 
    } 


    #Announcer { 
     position: relative; 
     background-color: #6AF; 
     padding: 1%; 
     border-color: #6AFFFF; 
     border-width: 1px; 
     border-style: inset; 


    } 

    #Column_Holder { 
     position: relative; 
     background-color: #6CF; 
     padding: 1%; 
     height: 100%; 


    } 

    .Column { 
     float: left; 
     padding: 1%; 
     overflow: auto; 
     height: 100%; 
    } 

    #Col1 { 

     width: 60%; 
     border-color: black; 
     border-style: solid; 
     border-right-width: 1px; 
     border-width: 1px; 

    } 

    #Article_Image { 

     background-color: #3DE; 
     position: relative; 
     float: right; 
     width: 20%; 
     text-align: right; 
    } 

    #Col2 { 
     width: 30%; 

     padding-left: 3%; 
    } 



    </style> 
</head> 
<body> 
    <div id="Content"> 

     <div id="Announcer"> 
      <h2>Announcer Place Holder</h2> 
     </div> 
     <div id="Column_Holder"> 
      <div class="Column" id="Col1"> 
       <div id="Article_Image">Image PlaceHolder</div> 
       <h1>Lots a text</h1> 
       <p>Creating Websites since 1989. I have created lots and lots of websites. This one is with XHTML1.1 and CSS3</p> 
      </div> 
      <div class="Column" id="Col2"> 
       <h2>Another story</h2> 
       <p>Something else happened teh other day =3</p> 
      </div> 
     </div> 

    </div> 
</body> 
</html> 

私はフロートを使用しようとしましたが、このインスタンスの解決策としては適切ではありません。私は100%の高さを試しました、Xhtmlはその命令を完全に無視するようです。私がピクセルの高さを宣言しない限り、それは不思議なことに無視されます(私はHTMLとのこの違いに苦しんでいます)。誰でもヒントを提供したいですか?単なるキーワード> _ <;真剣に、すべての

+0

あなた#Contentを意味するのですか? –

答えて

0
  1. が最初読み取るための

    のおかげ? XHTML doctypeのないXHTMLと

  2. パーセントは、相対測定単位です。パーセンテージディメンションを配置しても、それは親に依存します。今では、幅は、親が相対性のために宣言された幅を持つ必要はありませんしかし、高さはありません。#Contentは身体の子供であるため、身長は100%と言います。 bodyは<html>タグの子であり、bodyの100%が動作するためにはhtmlの100%が必要です。私が何を意味するか見るために何よりもあなたのCSSで

プラグこれを:

html,body{height:100%;}​ 
+0

XHTML doctypeはそこにあります。私はちょうどコードのその部分をコピーしていない、それは... o.O興味深い、私はxhtmlが気味悪いと気付かなかった。 Lemmeはそれを試みます。 - 編集 - 十分に公正な、xhtmlは 'それは厄介です。助けてくれてありがとう。 – Ravenshade

関連する問題