Dass sich Elemente überdecken ist eine typische Begleiterscheinung wenn Du float verwendest. Mache dich besser mit Flex vertraut, da treten solche Effekte nicht auf:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Um dir eine Vorstellung zu geben, wie man so etwas aufziehen kann, habe ich mal das HTML ein wenig umgestellt und das CSS ergänzt:
<body>
<div id="left-wrapper">
<nav>
<ul>
<li>
<a class="german" href="index.html">HOME</a>
<a class="japanese" href="index.html">ホームホーム</a>
</li>
<li>
<a class="german" href="ueber_uns.html">ÜBER UNS</a>
<a class="japanese" href="ueber_uns.html">私について</a>
</li>
<li>
<a class="german" href="kontakt.html">KONTAKT</a>
<a class="japanese" href="kontakt.html">連絡先の詳細</a>
</li>
<li>
<a class="german" href="impressum.html">IMPRESSUM</a>
<a class="japanese" href="impressum.html">インプリント</a>
</li>
</ul>
</nav>
<main>
<div>Willkommen / <span style=" color: #f70cca;">こんにちは </span> </div>
<div>Wähle deinen Automaten und habe Spaß !!! </div>
<div id="auto-wrapper">
<div id="ani-wrap">
<a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild1.jpg" alt="Game3"></a>
<a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild2.jpg" alt="Game3"></a>
<a href="HighScoreSite.html"><img width="348" height="628,5" src="images/bild3.jpg" alt="Game3"></a>
</div>
<div>
<a href="Build_2D_Racer/Index.html"> <img width="348" height="628,5" src="images/burgtor_01.jpg"
alt="Game2"></a>
</div>
<div>
<a href="HighScoreSite.html"><img width="348" height="628,5" src="images/burgtor_02.jpg"
alt="Game3"></a>
</div>
</div>
</main>
</div>
<div class="sideTitle">
アーケード
</div>
</body>
Alles anzeigen
html, body {
/* Sollen das Browserfenster vertikal mindestens ausfüllen: */
min-height: 100%;
}
body {
/* #left-wrapper und .sideTitle sollen nebeneinander angeordnet werden: */
display: flex;
}
nav, ul {
/* Element darin zentrieren: */
text-align: center;
justify-content: center;
}
#left-wrapper {
/* soll den gesamten freien Raum ausfüllen */
flex: 1;
/* Dass die Elemente darin untereinander angeordnet werden
ist Standard, das es sich um Blockelemente handelt. */
}
#auto-wrapper {
/* Die Elemente darin sollen nebeneinander angeordnet werden: */
display: flex;
justify-content: center;
}
Alles anzeigen
Dein CSS habe ich dabei beibehalten und dieses nur unten angehängt. Allerdings das float: right; gelöscht.
Noch zu tun: Die drei Bilder nebeneinander sind nicht responsiv, daher taucht bei schmalem Browserfenster die horizontale Scrollbar auf. Muss ich mal überlegen, wie man diese Animation am besten responsiv macht.
Du hattest davon geschrieben, dass es drei Animationen sein sollen, heißt das, dass die Bilder in der Mitte und rechts auch noch Animationen werden sollen?
