Hallo,
eine kleine Frage zu der Navigation (der ersten der Beispiele). Wieso werden mir die Listenelemente nicht dargestellt? Ich habe den Code (Euren Code) zuerst einmal 1:1 übernommen.
html {
background: #9D9E9E;
}
svg {
background: #9D9E9E;
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
height: 208px;
margin: 0;
}
#logo {
background-image: url(images/Logo.png);
z-index: 2;
width: 1437px;
height: 208px;
position: absolute;
top: 0;
left: 0;
margin: 0;
border: 0;
}
/* Navigation Listenelemente */
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
margin: 0;
padding: 0;
}
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="description">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Geänderte Darstellung für mobile Endgeräte -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>TITEL DER WEBSITE</title>
</head>
<body>
<main>
<svg viewbox="0 0 100% 208">
<defs>
<linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5C5C5C" />
<stop offset="41%" stop-color="#5C5C5C" />
<stop offset="67%" stop-color="#767776" />
<stop offset="100%" stop-color="#5C5C5C" />
</linearGradient>
</defs>
<rect id="eins" x="0" y="0" width="100%" height="208" fill="url(#verlauf)" />
<div id="logo"></div>
</svg>
</main>
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</nav>
</body>
</html>
Der Markup die Navigation betreffend ist absolut identisch. Außer, ich habe einen Fehler eingebaut und selbigen selbst nach dem zehnten Mal lesen überlesen. Ich hoffe, mir kann jemand auf die Sprünge helfen. Danke schon mal im voraus.