Halloo, möchte eine Nav-bar machen, wie bei https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS_Menüs3.html#view_result mit Rollover-Effekt.
Habe das für mich übernommen und habe noch mit den Verlinkungen von Home bis Impressum rumprobiert. Das was im obigem Muster als Aktuelle Seite angegeben ist, habe ich drinnen gelassen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel</title>
</head>
<body>
nav ul {
margin: 0;
padding: 0;
width: 10em;
}
nav li {
list-style: none;
margin: 0.5em;
padding: 0;
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
border: 1px solid darkblue;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
color: gold;
background-color: darkblue;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="urlfürGalerie">Galerie</a>
</li>
<li> <a href="kontakt.html">Kontakt</a>
</li>
<li aria-current="page"><a href="#">aktuelle Seite</a>
<li><a
href="impressum.html">Impressum</a>
</li>
</ul>
</nav>
</body>
Wenn ich das dann kontrolliere, sind die style Befehle alle oben auf meiner homepage angegeben, und eine einfache Liste befindet sich darunter. Es werden keine Umrahmungen, Farben etc. gezeigt.
Das </li> <li aria-current="page"><a href="#">aktuelle Seite</a> werde ich ohnehin rausnehmen
Mir wird gemeldet:
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map
Wie bekomme ich das denn wie bei der Vorlage hin?
Danke
Habe das für mich übernommen und habe noch mit den Verlinkungen von Home bis Impressum rumprobiert. Das was im obigem Muster als Aktuelle Seite angegeben ist, habe ich drinnen gelassen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel</title>
</head>
<body>
nav ul {
margin: 0;
padding: 0;
width: 10em;
}
nav li {
list-style: none;
margin: 0.5em;
padding: 0;
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
border: 1px solid darkblue;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
color: gold;
background-color: darkblue;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="urlfürGalerie">Galerie</a>
</li>
<li> <a href="kontakt.html">Kontakt</a>
</li>
<li aria-current="page"><a href="#">aktuelle Seite</a>
<li><a
href="impressum.html">Impressum</a>
</li>
</ul>
</nav>
</body>
Wenn ich das dann kontrolliere, sind die style Befehle alle oben auf meiner homepage angegeben, und eine einfache Liste befindet sich darunter. Es werden keine Umrahmungen, Farben etc. gezeigt.
Das </li> <li aria-current="page"><a href="#">aktuelle Seite</a> werde ich ohnehin rausnehmen
Mir wird gemeldet:
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map
Wie bekomme ich das denn wie bei der Vorlage hin?
Danke
