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

[GELOEST] Anzeigeproblem im Menü

Nahuta

Nahuta

Neues Mitglied
Hi zusammen,

dies ist mein erstes Posting. Ich freue mich, dass ich ein Forum gefunden habe. Foren sind in Zeiten von FB ja echt weniger geworden.

Zu meinem Thema:
Ich habe eine Website ursprünglich in Wordpress umgesetzt. Das ging mir aber so sehr auf den Senkel, dass ich es nun doch einfach händisch umsetze.
Nun aber mein aktuelles Problem:

Ich habe mein Menü oben und möchte, dass der aktuelle Menüpunkt (hier home/index) anders dargestellt wird, damit man erkennt, wo man ist. Das soll über CSS geschehen und dafür setze ich eine ID.
Auf die ID wird auch mit diversen Eigenschaften reagiert (padding, background-color, ...), aber auf color wird nicht reagiert. Ich sitze jetzt 2h über dem Problem und finde nix. Interessanterweise kann ich den Menüpunkt als durchgestrichen anzeigen lassen und für den Strich nimmt er dann die neue Farbe, nicht aber für die Schrift selber.

Folgender Teil in der CSS funktioniert also aktuell nur halb - die Farbe eben nicht:
#nav_aktiv {
background-color: #050505;
color: #f8f8f8;
text-decoration: line-through;
}
Zum Vergrößern anklicken....


Index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/fonts.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/media.css">
<title>Beratung-Buyken | Coaching & Beratung - professionell und individuell</title>
</head>
<body>
<header>
<nav class="navbar" >
<div class="logo">
<img class="logobild" src="./bilder/Icons/phoenix1-96.png" alt="Phönix"></div>
<p class="logo">Beratung <br>Buyken</p>
</div>
<ul class="navi flex75">
<li id="nav_aktiv"><a href="./index.html">HOME</a></li>
<li><a href="./beratung.html">BERATUNG</a></li>
<li><a href="./coaching.html">COACHING</a></li>
<li><a href="./profil.html">PROFIL</a></li>
<li><a href="./prozess.html">PROZESS</a></li>
<li><a href="./kontakt.html">KONTAKT</a></li>
</ul>
</nav>
</header> ...
Zum Vergrößern anklicken....

style.css:
/* Reset */
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

/* Variablen */
:root {
--hg_hell: #fff0d3;
--hg_dunkel: #303030;
--schriftfarbe_dunkel: #050505;
--schriftfarbe_hell: #7A7A7A;
}

/* --- Navigation --- */
.logo {
align-items: center;
justify-content: center;
padding: 10px;
}
.logobild {
/* background-color: #666; */
width: 3vw;
border-radius: 1rem;
}
nav {
height: 70px;
}
.navbar {
display: flex;
background-color: var(--hg_dunkel);
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
}
.navbar ul li {
list-style: none;
width: 10vw;
border: 5px, solid, rgb(155, 4, 4);
}
/* Navigation - Links */
.navbar ul li a {
text-decoration: none;
color: #666;
padding: 10px;
}
#nav_aktiv {
background-color: #050505;
color: #f8f8f8;
text-decoration: line-through;
}

.navbar ul li a:hover {
border-bottom: #8f5d14 solid 2px;
border-top: #8F5D14 solid 2px;
/* Hoveranimation */
animation: HoverAni 0.75s;
animation-fill-mode: forwards;
}
@keyframes HoverAni {
0% { padding: 10px ; color:#666; border-color: rgba(143, 93, 20,0);}
100% { padding: 5px ; color: #ddd; border-color: rgba(143, 93, 20,1);}
}

/* --- generelle Tags --- */
body {
background-color: var(--hg_hell);
color: var(--schriftfarbe_hell);
font-family: Merienda;
line-height: 1.5;
}
section {
margin: 0px 0px;
padding: 1vw 5vw;
}
/* --- Footer --- */
footer {
background-color: #111;
padding: 2vw 5vw;
}
footer a {
text-decoration: none;
color: var(--schriftfarbe_hell)
}
/* --- Überschriften --- */
h1, h2, h3, h4 {
color: #8F5D14;
font-family: Libre Baskerville;
}
h1 {
padding: 10px;
}
h2 {
padding: 5px;
}
.padfree {
padding: 0;
margin: 0;
}
/* --- HG-Farben --- */
.hglight {
background-color: var(--hg_hell);
}
.hgmiddle {
background-color: #444;
}
.hgdark {
background-color: #333;
}

/* --- Texte --- */
/* Primär: Libre Baskerville - Sekundär: Libre Bodoni - Text: Merienda - Nothing You Could Do V2 */
p {
padding: 5px 0px;
}
/* normaler Fließtext */
.text {
font-family: Merienda;
line-height: 1.5;
padding: 10px 20px;
}
.text_dunkel {
color: var(--schriftfarbe_dunkel);
}
/* horizentale Zentrierung */
.text_c {
text-align: center;
}
.text_flex_start {
align-items: self-start;
}
/* Zitat */
.zitat {
font-family: Nothing You Could Do V2;
transform: rotate(-3deg);
}
/* Text mit Fade-in-Animation */
.fade-in-text {
animation: fadeIn 5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* --- nur Home --- */
.homebox {
}
/* .homebox::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
background: rgba(0,0,0,0.7);
} */
.welcome {
margin: 10px;
display: block;
}
#welcome1 {
padding-left: 10%;
}
#welcome2 {
text-align: center;
left: 50vw;

}
#welcome3 {
text-align: right;
padding-right: 10%;
}
.empfangsbild {
height:25vw;
width: 100%;
padding: 0 0;
margin: 0;
object-fit: cover;
vertical-align: middle;
}
/* --- Weitere --- */
.eyecatcher1 {padding-left: 10vw; padding-bottom: 1vw;}
.eyecatcher2 {padding-left: 20vw;padding-bottom: 1vw;}
.eyecatcher3 {padding-left: 15vw;padding-bottom: 1vw;}
.eyecatcher4 {padding-left: 25vw;padding-bottom: 1vw;}

/* --- Flex Spaltenboxen horizontal und vertikal --- */
.spalten {
display: flex;
justify-content: space-around;
align-items: center;
}
.spalten-v {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 1vw;
padding: 1vw;
margin: 1vw;
}
.v-center {
align-items: center;
}
.justy_c {
justify-content: center;
align-items: center;
text-align: center;
}
.flex25 {
width: 25vw;
flex: 1;
}
.flex75 {
width: 75vw;
flex: 3;
}
.halbhalb {
width: 40vw;
}
/* --- Grid --- */
.gridbox_Tabelle {
display: grid;
grid-template-columns: 1fr 5fr;
}
.gridbox_halbhalb {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 8rem;
padding-left: 20vw;
padding-right: 20vw;
}
.gridbox_halbhalb div {
text-align: center;
}

/* --- Foto --- */
.foto {
border-radius: 1vw;
}
.bild25 {
width: 25vw;
border-radius: 1vw;
}
.box30 {
background-color: #666;
width: 30vw;
height: 30vh;
border-radius: 1rem;
}
.box10 {
background-color: #666;
width: 10vw;
height: 10vh;
border-radius: 1rem;
}
.icon {
background-color: #666;
width: 5vw;
border-radius: 1rem;
}
.icon_mini {
height: 2vw;
}

/* --- Akkordeon --- */
.akk {
}
/* Akkordeon - Erklärungsbox */
details {
}
/* Akkordeon - Überschriftbox */
summary {
/* background: rgb(145, 109, 42);
color: #fff; */
cursor: pointer;
padding: 1rem;
border: dashed 1px;
border-radius: 0.3vw;
margin: 0;
}
.akk_content {
padding: 0rem 1rem 0.5rem 1rem;
border-left: dashed 1px;
border-right: dashed 1px;
}
/* Akkordeon - verzögerungseffekt */
/* details[open] summary ~ * {animation: sweep .7s ease-in-out;}
@keyframes sweep {
0% {opacity: 0; margin-left: -20px}
100% {opacity: 1; margin-left: 0px} */
/* Akkordeon - Animation mit JS */
details > div {
overflow: hidden;
display: grid;
/* intentionally independent from .animation as Safari 16
would otherwise ignore the expansion animation. */
animation-duration: 0.2s;
}

details > .animation {
animation-name: grid-expand;
animation-timing-function: ease-out;
}

details > .collapsing {
animation-direction: reverse;
animation-timing-function: ease-in;
}

details > div > div {
min-height: 0;
}

@keyframes grid-expand {
0% {
grid-template-rows: 0fr;
}
100% {
grid-template-rows: 1fr;
}
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Für dein Problem sehe ich zwei Lösungen:

Entweder du ersetzt

Code: 
#nav_aktiv {
background-color: #050505;
color: #f8f8f8;
text-decoration: line-through;
}

durch

Code: 
#nav_aktiv a {
background-color: #050505;
color: #f8f8f8;
text-decoration: line-through;
}

Oder du läßt das CSS unberührt und ersetzt

Code: 
<li id="nav_aktiv"><a href="./index.html">HOME</a></li>

durch

Code: 
<li"><a id="nav_aktiv href="./index.html">HOME</a></li>
 
Moin!

Vielen Dank - es funktioniert so.
Aber magst Du mir noch verraten, was hier warum funktioniert? Müsste eine ID nicht auch so funktionierten, wie eine Klasse, ohne weitere spezielle Zuordnung? Und warum funktionierten ohne a die anderen CSS Werte, nur Color nicht, nun mit a aber schon?
 
Müsste eine ID nicht auch so funktionierten, wie eine Klasse, ohne weitere spezielle Zuordnung?
Zum Vergrößern anklicken....

Die Frage ist schwer zu beantworten. Denn:

Hast du das überhaupt mal ausprobiert? Also die ID durch eine Klasse ersetzt? Das Ergebnis ist nämlich das Gleiche.

Deine Behauptung ist also falsch.

Um das Verhalten vom a-Element zu verstehen, muss man sich mit den Grundlagen von HTML und CSS beschäftigen. Kurz: Dort sind die Eigenschaften vorgegeben, an die sich die Browser dann halten. Unterschiedliche Elemente haben bestimmte Eigenschaften, die sich sich wiederum unterschiedlich mit CSS beeinflussen lassen.

Das ist über die Jahre gewachsen und hat auch seinen Sinn, der sich aber nicht Jedem erschließt. Solche Eigenheiten muss man deshalb lernen und kann sie dann im Idealfall auch verstehen.

Auf solche Eigenheiten wirst du immer wieder stoßen, wenn du dich nur oberflächlich mit HTML und CSS beschäftigst.

Die Regeln für das HTML legt die WHATWG fest, die für das CSS die W3.org (= W3C). Das ist alles öffentlich einsehbar. Im Internet gibt es dazu leider viele Fehlinformationen von Anwendern, die meinen, das verstanden zu haben, was aber leider nicht stimmt.
 
@MrMurphy
Das Zuordnen zum Link und nicht zum Listenelement - manchmal sind es die Details. :)
Mit einer Klasse hatte ich es auch probiert, aber mit gleichem Ergebnis.
Also aus der IT bin ich nicht, somit würde ich meine Wissen auch als oberflächlich einordnen. Ich bin aber interessiert, mehr zu verstehen, auch wenn ich jetzt wohl keine IT-Studium einlegen werde. Ich schaue mal, was ich auf den beiden Seiten finde. Danke auf jeden Fall schon für die geduldigen Erklärungen.

@tk1234
Das klingt interessant und sinnvoll, funktioniert auch bei mir jetzt, nach etwas Ruckeln. Wenn damit die Lesbarkeit für Suchmaschinen usw. noch besser wird, um so besser. Vielen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben