Foren
Neue Beiträge
Foren durchsuchen
Was ist neu?
Neue Beiträge
Profilnachrichten
Online
Anmelden
Registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Neue Beiträge
Foren durchsuchen
Menü
Anmelden
Registrieren
App installieren
Installieren
Programmierung
CSS
Content hinter Sidebar
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Auf Thema antworten
Beitrag
[QUOTE="LuiM, post: 13053, member: 4426"] Hallo [USER=3917]@Sempervivum[/USER] ich habe den Code nun nochmal eingefügt und tatsächlich sieht es im Vollbild nun sehr gut aus. Vielen Dank :) Leider ist die Tabelle nur nicht responsive. Wenn man die Bildschirmgröße ändert, verschwindet die Tabelle leider hinter der Sidebar. Was muss ich denn noch anpassen? [ATTACH type="full"]293[/ATTACH] Mein jetziger html code: [CODE=html]<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}Sponsoring System{% endblock %}</title> {% block stylesheets %} <link rel='shortcut icon' type='image/x-icon' href="{{ asset('images/favicon.ico') }}"/> <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}"/> <link rel="stylesheet" href="{{ asset('css/bars.css') }}"/> {% endblock %} {% block javascripts %}{% endblock %} </head> <body> <header class="navbar navbar-dark bg-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand px-3" href="{{ path('app_dashboard') }}">Test</a> <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <input class="form-control form-control-dark w-100" type="text" placeholder="Test" aria-label="Search"> <div class="navbar-nav"> <div class="nav-item text-nowrap"> <a class="nav-link px-3" href="#">Logout</a> </div> </div> </header> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div class="pt-3"> <ul class="nav flex-column"> <li class="nav-item"> {% if app.request.get('_route') == 'app_dashboard' %} <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}"> <span data-feather="home"></span> Test </a> {% else %} <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}"> <span data-feather="home"></span> Test </a> {% endif %} </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file-plus"></span> Test </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="slash"></span> Test </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="users"></span> Test </a> </li> </ul> </div> </nav> <main> <section class="main-inner"> <h2>Test:</h2> <br> <table class="table table-striped"> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td> Test </td> <td> Test </td> <td> Test </td> <td> Test </td> <td> Test </td> <td> Test </td> </tr> </tbody> </table> </section> </main> <script src="{{ asset('js/jquery-3.6.0.js') }}"></script> <script src="{{ asset('js/bootstrap.bundle.js') }}"></script> <script src="{{ asset('js/main.js') }}"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script> feather.replace() </script> </body> </html>[/CODE] Meine css Datei: [CODE=css]/* * Navbar */ .navbar-brand { font-size: 1.2rem; } .navbar .form-control { padding: .75rem 1rem; border-width: 0; border-radius: 0; } .form-control-dark { color: #fff; background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); } .form-control-dark:focus { border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); } .sidebar { padding: 45px 0 0; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%); width: 220px; } .sidebar .active { border-radius: 5px; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); } @media (max-width: 767px) { .sidebar { padding: 120px 0 0; } } html, body { height: 100%; } body { display: flex; } main { flex: 1; overflow-y: auto; } .main-inner { /* Nur um den Container zum Test zu vergrößern und sichtbar zu machen: */ background-color: lightblue; height: 200vh; }[/CODE] [/QUOTE]
Zitate
Authentifizierung
Antworten
Programmierung
CSS
Content hinter Sidebar
Oben
Unten
