CSS Framework Probleme

Question

Ich muss eine einfache Website zu entwickeln, ich bin nicht sehr gut im Web zu entwickeln, aber ich habe versucht und das Ergebnis war das: http://www.pes.herobo.com.

Wie Sie sehen können, ist die Seite nicht sehr gut und wenn Sie versuchen, es neu zu sortieren, ist das Ergebnis schrecklich. Außerdem muss ich die Website von mobilen Geräten wie Smartphones und Tablets aus zugänglich machen.

Ursache dieser Probleme Ich habe mich entschieden, ein CSS-Framework zu verwenden. Ich habe einen sehr interessanten Bootstrap gefunden (wenn ich es gut verstanden hätte, würde es von Twitter entwickelt werden), also habe ich mehr oder weniger alle meine Webseite umgeschrieben, die es und sein System benutzt. Das Ergebnis ist viel besser, die Größe der Website ändert sich auf die richtige Art und wenn Sie es auf Handys betrachten, ist das Aussehen perfekt.

Aber ich frage mich immer noch, wie ich das Bild in der richtigen Weise verwenden sollte, ich möchte sie als alle Elemente in der Webseite Größe ändern, also habe ich diese Lösung angenommen, und ich würde gerne wissen, ob es ist richtig.

Die CSS-Klasse imagine ist:

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

Der Code ist:

<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

Ihre HTML schrecklich ungültig ist. Ungültiger HTML-Code führt zu unvorhersehbaren Ergebnissen und inkonsistentem Rendering in den Browsern. Beginnen Sie mit gültigem HTML, bevor Sie versuchen, andere Probleme zu lösen.

---

Das ist falsch ...

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

Sie einen Schlusskurs auf style fehlt, die der Browser denken machen kann id="img_oxf innerhalb style sein soll. Es sollte ...

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

---

Und das ist falsch ...

<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"> 

Sie haben ein Semikolon zwischen HTML-Attribute sein. Es sollte ...

<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"> 

---

sein Und das ist falsch ...

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

Sie haben ein zusätzliches Angebot ", die der Browser Ihre Klasse dazu führen kann, denken genannt wird imagine" statt imagine. Es sollte ...

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

---

Und Sie scheinen, eine Schließung </div> Tag irgendwo zu fehlen.