Hallo geschätztes Forum, bin neu hier und auch relativ neu beim Thema WebEngineering.
Ich habe ein konkretes Problem und hoffe, dass jemand hier bestimmt Rat dazu weiß.
Ich formatiere mir gerade "nen Wolf" bei der Konzeption eines Projektes und die geplante Kopfzeile/Navbar will nicht wie sie soll. Bevor ich zum Code komme: In der Kopfzeile sind 3 Bilder. eins links, eins in der mitte, eins rechts, soweit so gut.
Ich arbeite mit Bootstrap5 sollte ich vielleicht auch noch sagen....
Ich würde mir wünschen, dass die Bilder in Ihrer skalierung nur auf ihren <div> Rahmen beschränken und ansonsten responsiv sind. außßerdem möchte ich die "NavBar" näher an der Bilderleiste haben. Und ich hätte gerne die "leerzeilen" über und unter den Bildern weg. weil sonst der halbe Bildschirm mit der Kopfzeile vollgemüllt wäre....
Code? ja klar:
HTML-Code:
<body class="override bg-light">
<div id="header" class="bg-primary sticky-top text-center">
<div class="row">
<img src="{% static "klinikXdatabase/images/logo_bwk.svg" %}"
class="col-2 img-fluid mx-auto my-auto p-5" alt="logo">
<img src="{% static "klinikXdatabase/images/title.png" %}"
class="col-8 img-fluid mx-auto my-auto d-block" alt="Titel">
<img src="{% static "klinikXdatabase/images/logo_bwzk.svg" %}"
class="col-2 img-fluid mx-auto my-auto p-5" alt="logo">
</div>
<nav class="navbar navbar-inverse navbar-light bg-primary translate-middle-y " role="navigation">
<div class="container justify-content-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed bg-warning border-dark btn flex-wrap" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar fs-4 m-3"><b>eingeben</b></span>
<span class="icon-bar fs-4 m-3"><b>ändern</b></span>
<span class="icon-bar fs-4 m-3"><b>ansehen</b></span>
<span class="icon-bar fs-4 m-3 text-danger"><b>löschen</b></span>
<span class="icon-bar fs-4 m-3"><b>Komplexsuche</b></span>
</button>
<a href="{% url 'logout' %}" class="btn btn-danger btn-block border-dark fs-4 m-3"><b>Abmelden</b></a>
</div>
<div id="navbar" class="collapse navbar-collapse justify-content-center">
<ul class="nav navbar-nav navbar-right">
<li><a href="/templates/login">Anmelden</a></li>
</ul>
</div>
</div>
</nav>
</div>
Ich schick auch noch ein Bild mit, die ROTEN Striche zeigen, welche abstände ich verkürzen möchte, der Grüne, welchen ich verringern möchte....