Bin kein 'er' aber euch sei verziehen
djheke Na, aber ist doch langweilig wenn ich immer nur das tue, was von mir gefordert wird. So lern ich auch nichts neues. In dem ich versuche mehr zu machen als man von mir erwartet, lern ich ja auch was zu. Vielleicht kann ich es nicht sofort selber aber durch die Antworten hier im Forum und eure Vorgehensweisen, lern ich es dann ja auch 
Also das mit dem Hovern und die Farbe ändern hab ich jetzt. Mir fehlt aber noch der Unterstrich. basti1012, von deinem ersten Versuch bin ich leider nicht ganz schlau geworden
Ich hatte gehofft, dass wenn ich .active "text-decoration: underline;" zuweise, dass es dann geht aber so leicht ist es wohl nicht. (Mir fällt gerade ein: .Active macht doch eh keinen Sinn oder? Hab ja keine Id oder class die so heißt und :active bringt mir auch nichts, da das ja nur dafür da ist, wenn man etwas gedrückthält oder?)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Citrøn dream</title>
<meta name="description" content="My template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style -->
<style>
<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 13px;
letter-spacing: 1px;
text-decoration: none solid;
text-transform: uppercase;
}
.topnav a:hover {
color: black;
}
.active {
color: white;
text-decoration: underline;
text-decoration-color: #7F0103;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.footer {
position:sticky;
text-align: right;
background: #ddd;
margin-top: 20px;
}
.footer p {
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#Zitrone">Zitrone</a>
<a href="#Café">Café</a>
<a href="Kontakt.html">Kontakt</a>
<a href="#Kochabend">Kochabend</a>
<a href="javascript:void(0);" class="icon" onClick="myFunction()"> <em class="fa fa-bars"></em> </a>
</div>
<div style="padding-left:16px">
</div>
<div class="footer">
<a href="#Impressum.html">Impressum</a>
<p>© 2018 Citrøn dream</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += "responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Alles anzeigen
Vielleicht wollt ihr auch nicht auf den Link gehen, den ich am Anfang gepostet habe. Da sieht man nämlich genau was ich meine/möchte. Deshalb zeig ich euch nochmal screens von der Seite.
Auf den Bildern seht ihr, wenn ich auf Menu klicke, dass es unterstrichen wird. Also es zeigt an, dass ich jetzt gerade auf der Seite Menu bin. Wenn ich dann auf Reservations klicke, lädt die Seite und nun ist unter Reservationen der unterstrich.
Und btw. bin ich hier falsch? Hätte meinen Thread unter Css/css3 posten müssen oder? :'D
