Hallo Leute,
bin noch ziemlich neu was das Webseiten programmieren angeht, aber wollte mich mal mit der Materie auseinandersetzen, da ich diese ganzen "Webseitenbaukasten" langsam langweilig finde. 
Bin jetzt schon einige male an meine "Programmierkünste" verzweifelt, hab es dann aber doch noch irgendwie hinbekommen, bis jetzt...
Versuche eine Nintendo Fanseite zu erstellen und wollte bei meiner Webseite ein kleines Bildschen oben Rechts anzeigen lassen. Das Problem ist, sobald ich das Bild per "float" Befehl nach rechts bewege, verschiebt sich auch der Rahmen meiner Navigation, hab schon einiges Probiert aber ohne Erfolg, vielleicht findet einer von euch ja den Fehler, schonmal Danke im Voraus!
HTML:
<!doctype html>
<html>
<head>
<title>Koopa-Troopa</title>
<link rel="stylesheet" href=main.css>
</head>
<body class="home">
<header>
<div class="top">
<h1>KOOPA-TROOPA</h1>
<img id="koopa" src="media/site/koopa_troopa_4.png" alt="koopa">
<div/>
<div class="nav">
<ul>
<li id="home" class="home"><a class="active" href="index.html">Home</a></li>
<li class="n64"><a href="n64.html">N64</a></li>
<li class="gc"><a href="gc.html">GC</a></li>
<li class="wii"><a href="wii.html">Wii</a></li>
<li class="wiiu"><a href="wiiu.html">Wii U</a></li>
<li class="switch"><a href="switch.html">Switch</a></li>
</ul>
</div>
</header>
<p>
Welcome to Koopa-Troopa. The goal of this site is to provide Nintendo fans an overview of games that run in 60FPS.
<p>Some rules:</p>
<ul class="rules">
<li>Must be available in physical form. (no digital only games)</li>
<li>Must run in 60FPS MOST of the time. (no games like Goldeneye 64 or Resident Evil: Revelations)</li>
<li>Must run in 60FPS in handheld on the Switch. (no games like Dragon Quest: Builders)</li>
<li>The year refers to the physical release.</li>
<li>All information is supplied without guarantee.</li>
</ul>
</p>
<article class="news">
<h2>News</h2>
<article>
<h3>Mobile devices<h3>
<h5>2018-08-31</h5>
<p>Fixed the rendering for mobile devices.<p>
</article>
<article>
<h3>GameCube games<h3>
<h5>2018-08-30</h5>
<p>Created a list for GameCube games.<p>
</article>
<article>
<h3>Wii games<h3>
<h5>2018-08-30</h5>
<p>Created a list for Wii games.<p>
</article>
<article>
<h3>N64 games<h3>
<h5>2018-08-30</h5>
<p>Created a list for N64 games.<p>
</article>
<article>
</body>
</html>
Alles anzeigen
CSS:
/*Inhalt der Webseite*/
body {
margin: 0; /*Rand des Körpers*/
padding: 0; /*Polster des Körpers*/
background: #ccc; /*Hintergrundfarbe des Körpers*/
font-family: Tahoma, Geneva, sans-serif; /*Ändert die Schriftart*/
font-size: 1.0em; /*Schriftgröße*/
}
.top img, h1{
display:inline-flex;
}
#koopa {
float:right;
}
/*Navigationsliste bearbeiten*/
.nav ul {
width:100%; /*Die Navigation nimmt den ganzen Bildschirm ein*/
display:flex; /*Sorgt dafür, dass die Navigationsleiste nicht in zwei Zeilen springt*/
justify-content:center; /*Setzt die Navigationsleiste in die Mitte*/
background-color: #59b300; /*Hintergrundfarbe der Aufzählung*/
padding: 0px; /*Polster der Navigation*/
margin: 0px; /*Rand der Navigation*/
}
/*Inhalt der Navigationsleiste*/
.nav li {
width: 100px; /*Versetzt die Navigation Horizontal*/
border-bottom:none; /*Entfernt die Linien zwischen den Navigationspunkten*/
height: 60px; /*Macht die Navigation nach unten hin breiter*/
line-height: 60px; /*Versetzt die Navigation in der Vertikalen*/
font-size: 1.3em; /*Schriftgröße*/
display:inline-flex; /*Die Navigation wird in einer Reihe angezeigt*/
justify-content:flex-start; /*Stellt ein wo die Navigation anfängt*/
margin-right: -1px; /*Macht die Navigation enger*/
margin-left: 20px; /*Versetzt die Navigationselemente weiter nach rechts*/
}
/*Die gesamte Navigation*/
.nav {
border:2px outset #196619; /*Gibt die Navigationsleiste einen Rahmen*/
}
#home {
margin-right:90px; /*Zwischen "Home" und den anderen Navigationselemente wird etwas platz geschaffen*/
padding:0; /*Überschreibt den Puffer von oben*/
}
/*Hyperlinks der Navigation bearbeiten*/
.nav a {
text-decoration: none; /*Entfernt die Linien zwischen den Menüpunkten*/
color: #fff; /*Ändert die Schriftfarbe der Hyperlinks*/
transition: 0.3s background-color; /*Anzahl der Sekunden bis der Menüpunkt beim drüberbewegen farbig markiert wird*/
}
/*Ändert die Hintergrundfarbe wenn die Maus drüberfährt*/
.nav a:hover {
background-color: #264d00; /*Hintergrundfarbe bestimmen*/
}
/*Der Aktive Link wird farbig markiert*/
.nav a.active {
background-color: #fff; /*Hintergrundfarbe*/
color: #444; /*Schriftfarbe*/
cursor: default; /*Cursorart*/
}
/*Webseitenüberschrift*/
h1 {
color:#639e69; /*Farbe der Überschrift h1*/
font-size:40px; /*Größe der Überschrift h1*/
margin-left:25px; /*Verschiebt die Überschrift nach Rechts*/
margin-top:50px;
}
/*Text der Webseite*/
p {
margin:25px; /*Erstellt ein Rand damit der Text nicht direkt am Bildschirmand anfängt*/
}
Alles anzeigen
Und noch zwei Beispielbilder:
[Blockierte Grafik: http://fs1.directupload.net/images/180831/z53dblvk.png]
[Blockierte Grafik: http://fs5.directupload.net/images/180831/c8sair2x.png]
