marctrix: HTML Hintergrundbild verkleinern und positionieren

Beitrag lesen

Hej hmm,

dein HTML ist viel zu aufgebläht. Wenn du Bootstrap weiter nutzen möchtes, brauchst du das alles, wenn nicht reicht folgendes:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>Kaffee</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <header>
         <h1>Kaffee Game</h1>
    </header
    <nav>
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li><a>Willkommen</a></a></li>
          <li><a href="#">Über uns</a></li>
          <li><a href="#">Partner</a></li>
          <li><a href="#">Kontakt</a></li>
          <li><a href="#">Registrieren</a></li>
          <li class="login"><a href="anmelden.html">Anmelden</a></li>
        </ul>
      </div>
    </nav>
    
    <p class="help-block text-center"><small>Kaffee Game</small></p> <!-- Was ist das? -->
    <main> 
         <article>
                    <header> 
                      <h1>Herzlich Willkommen liebe Kaffee Freunde!</h1> 
                    </header> 
                    <p>Wir freuen uns Ihnen auf dieser Seite unser Lieblingsspiel zu präsentieren 
                    und hoffen das Sie genausoviel Spass daran haben werden wie wir.</p>
                  </article>
                </main> 
                
                <iframe width="560" height="315"
                src="https://www.youtube.com/embed/zxmED9JTPaA" frameborder="0" allowfullscreen>
                </iframe>

                <h1 class="margin-base-vertical">Kaffee-Shoppen und Game-Zocken</h1>
                <p>
                    Registriert euch einfach auf dieser Seite und erfreut euch an unserem Kaffee-Online Game.    
                </p>
                <p>
                    Wenn ihr die Weiterentwicklung des games unterstützen wollt, wo kauft über die angegebenen Links
                    bei unseren Partnern ein.
                </p>
                <p>
                    Wollt ihr stets auf dem laufenden bleiben über alle Updates auf dieser Seite? Dann tragt euch hier für unsere Newsletter ein:
                </p>
                <form>
                        <input type="text" class="form-control input-large" name="email" placeholder="jonsnow@knowsnothi.ng" />
                    <p class="help-block">Wir senden Ihnen keinen Spam und geben Ihre E-Mail nicht weiter.</p>
                        <button type="submit" class="btn btn-success btn-large">Anmelden für Newsletter</button>
                </form>
                    <footer> Hier finden Sie unsere <a href="#">AGB's</a> und unser <a href="#">Impressum</a>.</footer>
</body>
</html>

Habe das hier im Forums-Editor bearbeitet, also nicht getestet - nur um dir eine Idee zu geben, was du sparst, wenn du nicht auf Bootstrap setzt...

Vielleicht lässt sich sogar noch mehr sparen, vielleicht ist der eine oder andere div noch nötig, hängt dann von deinem Layout ab...

Marc