CSSフレームワークの問題

Question

私は簡単なWebサイトを開発しなければなりません。Web開発はあまり良くありませんが、試してみました。結果はhttp://www.pes.herobo.comです。

このページはあまり良くありませんが、サイズを変更しようとすると結果がひどいです。また、スマートフォンやタブレットなどのモバイルデバイスからアクセスできるウェブサイトが必要です。

これらの問題の原因私はCSSフレームワークを使用することに決めました。私は非常に興味深いブートストラップを見つけました（私がよく理解すれば、それはTwitterによって開発されるだろう）ので、私は多かれ少なかれ、それとそのシステムを使用して私のすべてのウェブサイトを書き直しました。結果は、ウェブサイトが正しい方法でサイズ変更されている方がはるかに優れており、携帯電話で見ると完璧です。

しかし、私は正しい方法でイメージをどのように使うべきか、私はウェブページ内のすべての要素としてサイズを変更したいので、このソリューションを採用しました。正しい。

CSSクラスimagineは次のとおりです。

.imagine { 
    width:100%; 
    height:auto; 
} 

コードは次のとおりです。

<div class="row"> 
      <div class="span8" style="position:relative"> 
      <img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 
      <img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 
      <img src="img/blue_strap.png" class="imagine" ">  
      </div> 
      <div class="span4"> 
      <div id="main_paragraph"> 
      </div> 
    </div> 

Answer 1

あなたのHTMLがひどく無効です。無効なHTMLは、予期しない結果とブラウザ間での一貫性のないレンダリングにつながります。他の問題を解決する前に、有効なHTMLから始めてください。

---

これは間違っている...

<img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 

あなたはブラウザがid="img_oxfがstyle内ことになっていると思わせることがstyleに終了引用符を逃しています。 ...

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 

あなたはHTML属性の間にセミコロンを持っていることは...

<img src="img/image.jpg" class="imagine" style="z-index:0;" id="img_oxf"> 

---

すべきであり、これは間違っています。あなたはブラウザがあなたのクラスが呼び出されると思うすることがあり、余分な引用"を持っていることは...

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1;" id="img_under_constr"> 

---

すべきであり、これは間違っている...

<img src="img/blue_strap.png" class="imagine" "> 

imagine"の代わりに、 imagine。それはする必要があります...

<img src="img/blue_strap.png" class="imagine"> 

---

そして、あなたは終了</div>タグどこかが欠落しているように見えます。