Lies dir mal dies durch, das dürfte dieses Geheimnis ein wenig erhellen:
Wenn Du schreibst "Versuch, Bootstrap zu verstehen" empfehle ich, da gar nicht einzusteigen, siehe hier:
Mit Flex- und Gridlayout bist Du wesentlich besser beraten.
Den Webdeveloper kenne ich jetzt wiederum nicht, wahrscheinlich ist das dieses:
Der HTML-Inspektor ist nicht für Android sondern ein Bestandteil der Entwicklerwerkzeuge und die sind in jedem gängigen Desktop-Browser integriert. Mach mal einen Rechtsklick auf ein Element auf deiner Webseite und wähle "(Element) untersuchen", dann öffnet sich ein neues Fenster und Du siehst das HTML und CSS. Gibt noch mehr nützliche Werkzeuge in den einzelnen Tabs.
Hallo Ben,
in deinem HTML fehlt der Doctype. Außerdem kannst Du mit Vorteil semantische Tags verwenden: Die Überschriften, h1, h2, usw. und Absatz p gibt es schon ewig aber in letzter Zeit sind Dinge wie header, main, nav, figure, figcaption etc. hinzu gekommen.
Ich habe zunächst eine Testseite mit deinem HTML gemacht, jedoch sah diese ziemlich zerlegt aus. Aus deinem HTML kann man jedoch ablesen, was Du vorhast: Das Browserfenster soll vollständig ausgefüllt sein, ohne dass man scrollen muss. Der Header (dafür bietet sich das Tag <header>an) soll 25% der Höhe ausfüllen und der Hauptinhalt (Tag <main>) die restlichen 75%.
Ein Problem dabei, mit dem Du wahrscheinlich konfrontiert wirst: Diese Prozentangabe bezieht sich auf das Element ohne Border, Padding und Margin. Sind diese vorhanden, beansprucht das Element mehr als 100% der Breite.
Eine Lösung besteht darin, Flexlayout zu verwenden, das passt die Elemente ein ohne diese Probleme.
Du kannst dich hier auf html-seminar über die Grundlagen von Flexlayout informieren:
CSS Flexbox Layout - Design einfach umsetzen
Noch ein Hinweis: Damit die Elemente das Browserfenster vertikal vollständig ausfüllen musst Du html und body zunächst auf dessen Höhe einstellen:
html, body {
height: 100%;
}Ich auch nicht aber der HTML-Inspektor hat mir das präzise angezeigt. Kennst Du den schon?
Nein, nix kaputt gecodet. Es sind zwei Ursachen warum es nicht funktioniert:
1. Der Selektor, den ich dir gegeben habe, ist zu spezifisch. Ändere ab Zeile 300 so:
.custom-navbar {
background-color: #e0aa15;
}2. Die Farbe wird ab Zeile 949 durch weiß überschrieben. Deaktiviere das:
@media only screen and (max-width: 767px)
.custom-navbar {
/* background: #ffffff; */
-webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
padding: 10px 0;
text-align: center;
}OK, Zentrierung ist natürlich auch kein Problem:
img.ovl {
position: absolute;
/* Wir setzen zunächst die linke obere Ecke
des Bildes in die Mitte */
top: 50%;
left: 50%;
/* Jetzt verschieben wir es um 50% seiner Größe
nach links oben */
transform: translate(-50%, -50%);
z-index: 999;
}Du musst zunächst für die mobile Ansicht die gewünschte Farbe setzen und dann in der Mediaquery für breiten Bildschirm wieder transparent machen:
/* Außerhalb der Mediaquery setzen wir die gewünschte Farbe*/
section.navbar.custom-navbar.navbar-fixed-top {
background-color: lightblue;
}
/* Und schalten wieder auf transparent wenn das Browserfenster
breit ist */
@media(min-width:768px) {
.custom-navbar {
border-bottom: 0;
background-color: transparent;
}
/* usw. */Was heißt denn genau, dass es suboptimal ist? Weil das aufgeklappte Menü den Slider und das zusätzliche Bild überdeckt?
Es gibt eine Standardfarbe "transparent", damit kannst Du den Hintergrund transparent machen:
@media(min-width:768px) {
.custom-navbar {
border-bottom: 0;
background-color: transparent;
}Natürlich kann man die Farbe auch noch flexibler fest legen, siehe hier:
Da gibt es schon diverse Mediaqueries mit "min-width: 767". Gib dem Menü die Farbe, die Du dir wünschst und in der Mediaquery setze sie wieder auf transparent.
Lege das Bild in den Container div.row unterhalb von section#home:
<section id="home" class="slider" data-stellar-background-ratio="0.5" style="background-position: 0% 0px;">
<div class="row">
<img class="ovl" src="das-bild.jpg">Und gib ihm dieses CSS:
img.ovl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
object-fit: cover;
}Das Erscheinungsbild gefällt mir sehr, auch durch das was nicht da ist: Keine übertriebenen Effekte, kein Gezappel und kein Geschiebe. Das Layout ist übersichtlich und der Schwerpunkt liegt auf den Inhalten. Gut gemacht!
Die Sache mit der Hierarchie ist hier auch sehr gut erklärt:
CSS/Tutorials/Einstieg/Kaskade – SELFHTML-Wiki
Und um einen Einblick in das CSS zu bekommen, ist der HTML-Inspektor in den Entwicklerwerkzeugen deines Browser sehr nützlich: Rechtsklick auf ein Element und dann "(Element) untersuchen". Kann sich je nach Browser ein wenig unterscheiden.
Auch das sollte funktionieren, wenn Du den selben Selektor wie Bootstrap verwendest:
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.navbar-dark .navbar-nav .nav-link {
color: rgba(0,0,0,.8);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
color: #350c0c;
}
<style>Gern. Du brauchst nur das CSS, das ich gepostet habe, unter den Code setzen, wo Bootstrap eingebunden wird:
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.navbar-dark .navbar-nav .nav-link {
color: rgba(0,0,0,.8);
}
<style>Ein Link ist immer am besten.
Das CSS, das ich im Verdacht hatte, wird durch eines überschrieben, das höher spezifisch ist:
.navbar-dark .navbar-nav .nav-link {
color: rgba(0,0,0,.8);
}Wenn Du das so änderst wie oben, müsste es besser aussehen.
Das dürfte "color" in diesem CSS sein:
.navbar a {
color: #a4a4a4;
margin: 0 16px;
text-align: center;
}Dort kannst Du die Farbe deiner Wahl einsetzen.
Hundertprozentig sicher bin ich mir nicht ob das das Problem behebt, aber versuche zunächst Mal alles float heraus zu werfen und durch Flexlayout zu ersetzen, siehe hier:
D. h. die Container nebeneinander anordnen mit display: flex; und die Größen auf ein und zwei Drittel setzen mit flex: 1; oder flex: 2;.
Bei schmalem Anzeigebereich dann die Elemente untereinander anzeigen durch flex-direction: column;
Dann sind wir ja einen ganzen Schritt weiter. In meiner Testdatei ist der Abstand links und rechts jedoch genau gleich. Auf deinem Screenshot sehe ich, dass diese Abstände, die Du markiert hast, keinen Hintergrund haben. Es muss irgend wie an dem Umfeld des HTML liegen. Ich dachte daran, dass Du einen Screenshot des HTML-Inspektors postest, bin aber skeptisch ob wir damit zum Ziel kommen. Kannst Du die URL einer solchen Seite posten?