• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

nav bar

JanHu

Neues Mitglied
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
 
Werbung:
Hierfür musst du eine CSS datei mit deinen Vorgaben und Einstellungen erstellen ,einbiden in deine HTML datei kannst du diese dann mit
<link rel="stylesheet" type="text/css" href="Von JanHu Ausgewählter Dateiname.css" media="screen" />
Natürlich schreibst du bei "Von JanHu Ausgewählter Dateiname" den Dateinamen deiner CSS Datei rein!
 
Werbung:
Zurück
Oben