Hallo
Zitat
hat da noch einer einen Tipp?
Schwierig. Zunächst reicht ein Tipp allein nicht aus. Der Quellcode (speziell das CSS) ist so verbastelt dass er nur komplett neu erstellt werden kann.
Zitat
bin leider nicht so fit mit der ganzen Sache
Und dann wirst du mit den Tipps wenig anfangen können da dir das erforderliche Grundlagenwissen fehlt.
Was sollen zum Beispiel die span-Elemente in jedem a-Element? Die sind nicht erforderlich - weglassen.
nav {
height: 37px;
...
}
Oder was soll hier das height? Die einzelnen Elemente sollen in Webseiten ihre Höhe selbst bestimmten. height-Angaben sind in der Regel nicht erforderlich.
background: -moz-linear-gradient(top, #242424 50%, #000000 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #242424), color-stop(50%, #000000));
background: -webkit-linear-gradient(top, #242424 50%, #000000 50%);
background: -o-linear-gradient(top, #242424 50%, #000000 50%);
background: -ms-linear-gradient(top, #242424 50%, #000000 50%);
background: linear-gradient(to bottom, #242424 50%, #000000 50%);
Für linear-gradient sind keine Prefix-Angaben mehr erforderlich.
nav ul li.submenu > a::after {
position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent;
}
Alles anzeigen
Wenn du Zeichen darstellen willst und die als Text eingefügt werden können solltest du das auch tun. Inhaltsleere Elemente sind dafür gänzlich ungeeignet. Sinnvoll könnte das Dreieck folgendermaßen eingefügt werden:
nav>ul>li:nth-child(n+7)>a::after {
content: 'DU'; /* UTF-Zeichen Dreieck nach unten*/
margin-left: 0.4rem;
}
Das Forum hier kann leider keine UTF-Zeichen darstellen. DU ist direkt ein Dreieck-Zeichen mit der Spitze nach unten. DO im folgenden Quelltext ein Dreieck mit der Spitze nach oben.
Zwei Anweisungen mit dem gleichen Ergebnis wie deine neun, mit dem die Browser auch noch besser zurechtkommen. Und erzähl mir nicht, das die leicht unterschiedlichen Winkel zu "deinen" Dreiecken irgendeinen Besucher interessiert oder auch nur auffällt.
Natürlich müssen für ein stabiles Layout auch noch andere CSS-Anweisungen gelöscht oder angepasst werden. Aber dafür müsstest du Schmerzensgeld zahlen.
Ich habe mal ein Beispiel erstellt. Wobei es für die Listen auch bessere Möglichkeiten gibt. Die will ich dir aber auch nicht noch wegnehmen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Navi Problem 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
/* Clearfix - Micro-Clearfix-Hack */
@media all {
nav>ul::before,
nav>ul::after,
.clearfix::before,
.clearfix::after {
content: " "; /*Leerstelle ist wichtig*/
display: table;
}
nav>ul::after,
.clearfix::after {
clear: both;
}
}
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header,
nav,
main,
aside,
footer,
section,
article,
figure,
figcaption,
audio,
video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
nav {
background-color: black;
position: relative;
border-radius: 0.4rem 0.4rem 0 0;
border-bottom: 2px solid #ff0000;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
list-style-type: none;
}
nav a {
color: white;
font-size: 0.8rem;
text-decoration: none;
outline: none;
display: block;
padding: 0.5rem 0.6rem;
}
nav>ul>li {
float: left;
}
nav>ul>li:nth-child(n+7)>a::after {
content: 'DU'; /* UTF-Zeichen Dreieck, Spitze nach unten */
margin-left: 0.4rem;
}
nav>ul>li:nth-last-child(n+3):hover>a {
position: relative;
overflow: hidden;
}
nav>ul>li:nth-last-child(n+4):hover>a::after {
content: 'DO'; /* UTF-Zeichen Dreieck, Spitze nach oben */
color: red;
font-size: 1.5rem;
position: absolute;
bottom: -0.8rem;
left: 30%;
display: block;
}
nav>ul>li>ul {
display: none;
}
nav>ul>li>ul li {
background-color: black;
border-bottom: 1px solid #555;
}
nav>ul>li:hover>ul {
display: block;
position: absolute;
top: 1.95rem;
min-width: 10rem;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
border-top: 1px solid red;
}
nav>ul>li>ul li:hover {
background-color: #4096ee;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Freie Teams</a></li>
<li><a href="#">Gefährdete Teams</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Regeln</a>
<ul>
<li><a href="#">PS4</a></li>
<li><a href="#">PC</a></li>
</ul>
</li>
<li><a href="#">Transfermarkt</a>
<ul>
<li><a href="#">PS4</a></li>
<li><a href="#">PC</a></li>
</ul>
</li>
<li><img src="/content/images/since.png"></li>
</ul>
</nav>
</body>
</html>
Alles anzeigen
Gruss
MrMurphy
