CSS wirkt nur auf eine von zwei Überschriften auf der gleichen Seite

Eiblein · 05.03.2024

Hallo zusammen,

ich habe folgendes Problem (und vermute CSS dahinter):

Es wird eine Überschrift nicht korrekt formatiert und zwar handelt es sich um den Eintrag "user_table_title" dort greift der H2 Tag nicht.
Aber bei der Überschrift "add_new_user" wird das richtige Layout (wie im CSS hinterlegt) angezeigt.

Die CSS Datei für die Schriftarten arbeitet korrekt und ist auch eingebunden (auf die 2. Überschrift und den Text wirkt diese ja).

HTML:

<body>
    <?php
    // Navigation einfügen
    include "nav.php";
    ?>

    <h2><?php echo $translations['user_table_title']; ?></h2>

    <table class="table">
      
    </table>

    <h2><?php echo $translations['add_new_user']; ?></h2>

    <form>
        <table class="table">
        </table>
    </form>
    
</body>

Das Problem besteht erst, seit dem ich die nav.php mit einem Dropdown Menü erweitert habe und dieses mit CSS gestyled habe, der CSS Code dafür sieht wie folgt aus (nav.css):

CSS:

/* Allgemeine Navigation */
nav {
    background-color: #333;
    padding: 10px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
}

nav a.active,
nav a:hover {
    background-color: #555;
}

/* Stil für das Dropdown-Menü */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0c0c0c;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.user-dropdown:hover .user-dropdown-content {
    display: block;
}

Die nav.php sieht wie folgt aus:

PHP:

<!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="style/nav.css">
</head>
<body>

<?php // Aktive Seite herausfinden
    function isCurrentPage($page)
        {$currentPage = basename($_SERVER['PHP_SELF']);
        return ($currentPage == $page);}

// Session-Variable auslesen
$loggedInUsername = $_SESSION['username'];
?>

<!-- Navigation -->
<nav>
    <a href="dashboard.php" <?php echo isCurrentPage('dashboard.php') ? 'class="active"' : ''; ?>><?php echo $translations['dashboard']; ?></a>
    <a href="users_management.php" <?php echo isCurrentPage('users_management.php') ? 'class="active"' : ''; ?>><?php echo $translations['user_management']; ?></a>

    <!-- Nutzerinformation und Dropdown-Menü -->
    <div class="user-dropdown">
        <a href="#" class="user-dropdown-button"><?php echo $loggedInUsername; ?></a>
        <div class="user-dropdown-content">
            <a href="#">Einstellungen</a>
            <a href="change_password.php">Passwort ändern</a>
            <a href="#">Daten anpassen</a>
            <a href="#">Ausloggen</a>
        </div>
    </div>
</nav>

</body>
</html

Habe ich irgendwo einen Fehler im Code den ich einfach nicht finde oder einen grundsätzlichen Denkfehler?

Viele Grüße!

Sempervivum · 05.03.2024

Hallo Eiblein,
einen Fehler sehe ich da schon: Da Du die nav.php mit PHP-Include einbindest, darf diese kein HTML-Grundgerüst mit Doctype, Head, Body etc. enthalten sondern nur die reine Navigation.
Allerdings sehr fraglich ob dadurch der Fehler verursacht wird. Um den zu finden, wäre es hilfreich, wenn man den Code aus der Quelltextansicht des Browsers sehen würde, also diesen posten und das, was nicht relevant ist, heraus lassen. Oder, besser noch, die URL der fraglichen Seite, damit man es mit dem Seiteninspektor untersuchen kann.

Eiblein · 15.03.2024

Hey Sempervivum,

vielen Dank für diesen Hinweis - das habe ich dann auch in einigen anderen Dokumenten mal "repariert" ist ja auch logisch...

Damit war der Fehler dann auch tatsächlich nicht mehr vorhanden.

Danke nochmal und viele Grüße!