Header mit vollem Screen (Bild) hinter bestehende Navigation legen

Emess · 16. Juli 2023

Ich habe hier 1900x800 großes Bild mit schwarzen Hintergrund welches ich Bildschirmfüllend hinter die Navigation legen würde.

In meinem Code liegt die Navigation ja schon im Header

Code

<body>
    <header>
      <nav>
          <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span></a>
          <div class="brand">Michael Schlegel</div>
          <div class="list-container">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Fischen</a></li>
          <li><a href="#">Kulinarisches</a></li>
          <li><a href="#">Galerie</a></li>
          <li><a href="#">Datenschutz</a></li>
        </ul>
        </div>
     </nav>     
    </header>
    <main></main>
    <footer></footer>
    <script type="text/javascript" src="js/script.js" ></script>
  </body>

Alles anzeigen

Jetzt bin ich mir nicht sicher ob das eine gute Idee war

ich habe mal etwas probiert

Code

.header {
    background-image: url("img/header.png");
    background-size: auto;
    display: flex;
    align-items: center;
}

dann habe ich dem Header die class .header geben. nix passier

Dann habe ich den Header unter das <nav> gesetzt . nix passier

Dann habe ich den Header in ein div gesetzt. das halbiert mir die navigation aber ohne Bild.

Ich hoffe das Problem gut genug beschrieben zu haben.

was wäre die richtige vorgehensweise?

Sempervivum · 16. Juli 2023

Deine Vorgehensweise ist richtig, aber deine nav hat einen schwarzen Hintergrund und überdeckt das Hintergrundbild des header. Wenn Du das löschst wird sofort das Hintergrundbild sichtbar, jedenfalls wenn ich es im Seiteninspektor hinzu füge:

Code

header {
    background-image: url(img/header.png);
    background-size: auto;
    display: flex;
    align-items: center;
    background-size: contain;
}

Also keine Klasse nötig, ich musste aber background-size: contain; nehmen, damit das Bild sichtbar wird, denn das meiste dieses Bildes ist ja schwarz

nextuser · 16. Juli 2023

Sofern das Bild auch auf die volle Seitenbreite gedehnt werden darf, wäre auch folgendes möglich:

CSS

background: url(/img/header.png) no-repeat center;
background-size: cover;

Emess · 16. Juli 2023

Auch da passiert garnix

Stand lokal

Code

<body>
    <header class="header">
      <nav>
          <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span></a>
          <div class="brand">Michael Schlegel</div>
          <div class="list-container">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Fischen</a></li>
          <li><a href="#">Kulinarisches</a></li>
          <li><a href="#">Galerie</a></li>
          <li><a href="#">Datenschutz</a></li>
        </ul>
        </div>
     </nav>     
    </header>
    <main></main>
    <footer></footer>
    <script type="text/javascript" src="js/script.js" ></script>
  </body>

Alles anzeigen

Code

.header{
background: url(/img/header.png) no-repeat center;
background-size: cover;
}

Aber auch hier passiert absolut nix

Emess · 16. Juli 2023

Zitat von Sempervivum
Deine Vorgehensweise ist richtig, aber deine nav hat einen schwarzen Hintergrund und überdeckt das Hintergrundbild des header. Wenn Du das löschst wird sofort das Hintergrundbild sichtbar, jedenfalls wenn ich es im Seiteninspektor hinzu füge:
Code
header {
    background-image: url(img/header.png);
    background-size: auto;
    display: flex;
    align-items: center;
    background-size: contain;
}
Also keine Klasse nötig, ich musste aber background-size: contain; nehmen, damit das Bild sichtbar wird, denn das meiste dieses Bildes ist ja schwarz

das seh ich auch gleich an

nextuser · 16. Juli 2023

Zitat von Emess

Aber auch hier passiert absolut nix

Was genau passiert nicht? Wird kein Bild angezeigt?

Ich muss auf deiner Seite die Bild-Url mit einem Schrägstrich beginnen (/img/header.png), um ein Bild zu erhalten.

Ohne versucht er das Bild in deinem css-Ordner zu finden.

Hier:

Bildschirmfoto vom 2023-07-16 15-00-17.png

Emess · 16. Juli 2023

Ich geh noch mal mein Html durch

@Netuser mit deinem css ändert sich nichts

@Sempervivium dein css rückt meine navigation nach links und wenn ich die Hintergrundfarbe von nav wegnehme ist die natürlich weg

zb so hab ich mir das gedacht ohne den schnickschnack

exaple.png

nextuser · 16. Juli 2023

Zitat von Emess

@Netuser mit deinem css ändert sich nichts

Wird kein Bild angezeigt oder was meinst du damit? In der Entwicklerkonsole, wenn du mit dem Mauszeiger über das "background: url..." fährst, erhälst du dann die Info, das die Grafik nicht geladen werden konnte?

Zitat von Emess

zb so hab ich mir das gedacht ohne den schnickschnack

Also meinst du ein Flächenfüllendes Hintergrundbild?

Zitat von Emess

@Sempervivium dein css rückt meine navigation nach links...

Ja, dein header-Tag hat im CSS ja kein "display:flex".

Wenn du es jetzt mit dem Code von Sempervivum einfügst, müsstest du dann noch der nav "width:100%" geben.

Emess · 16. Juli 2023

Zitat von nextuser

Also meinst du ein Flächenfüllendes Hintergrundbild?

Ja, dein header-Tag hat im CSS ja kein "display:flex".
Wenn du es jetzt mit dem Code von Sempervivum einfügst, müsstest du dann noch der nav "width:100%" geben.

Flächenfüllend genau

Ich lade es mal hoch

my2.emess62.de

nextuser · 16. Juli 2023

Zitat von Emess

Flächenfüllend genau

Also dann müsste das Bild ja nicht in den header. Oder meintest du nur, wie bereits geschehen, flächenfüllend IM header?

nextuser · 16. Juli 2023

Zitat von Emess

Ich lade es mal hoch
my2.emess62.de

Ja, wie ich gesagt habe. Du musst die Bild-Url mit einem Schrägstrich beginnen, sonst sucht er das Bild, wegen relativem Pfad, in deinem css-Ordner.

Emess · 16. Juli 2023

Ich versuch das nochmal genau zu beschreiben.

Wenn ich die Index.html aufrufen soll ein lustige Bild von mir Flächenfüllend erscheinen auf dem Bild ober nicht über dem Bild oben soll die navigation sein.

Ich habe dazu ein Youtube tutorial gefunden. Will die Sache aber selbst mit euch hier lösen

Ich hoffe ihr versteht was ich meine

nextuser · 16. Juli 2023

Zitat von Emess

Wenn ich die Index.html aufrufen soll ein lustige Bild von mir Flächenfüllend erscheinen auf dem Bild ober nicht über dem Bild oben soll die navigation sein.

Ja, dann gehört das Bild aber nicht in den header, sondern in den body.

Soll dass das header-Bild sein? Ist von dem Seitenverhältnis dann nicht so optimal...

Also so?

Bildschirmfoto vom 2023-07-16 16-03-03.png

Emess · 16. Juli 2023

so soll es sein. ich habe dafür Stunden investiert schwamm drüber.

Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?

Aber erst muss das bei der mobil ansicht in die mitte rücken.

Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden und dann den Body schwarz hinterlegen und das in den Header einzufügen.

Doch dazu müsste der Header aus dem Body raus. Oder

Achso es läuf auf einen Onepager raus

nextuser · 16. Juli 2023

Zitat von Emess

Doch wenn als nächstes darunter einen content anlegen will sollte ich das doch am besten mit <sections> machen oder?

Den eigentlichen Content-Bereich würde ich in den main-Tag setzen.

Für die weitere Gliederung dann entsprechend mit article, section, aside, header, footer ect... arbeiten.

Zitat von Emess

Aber erst muss das bei der mobil ansicht in die mitte rücken.

Du könntest z.B. noch folgendes setzen:

CSS

background-position: right;

So würde man zumindest auf bei der mobilen Ansicht das eigentliche Bild und nicht nur die schwarze Fläche sehen.

Wäre aber auch nicht optimal.

Zitat von Emess

Meine Idee wäre das Bild (bzw das sichtare) mittel Gimp auf kleinste Breite zuschneiden...

Das wäre deutlich besser.

Zitat von Emess

... und dann den Body schwarz hinterlegen und das in den Header einzufügen.
Doch dazu müsste der Haeder aus dem Body raus. Oder

Warum jetzt wieder in den header? Ich dachte, du willst das Bild flächenfüllend haben?

Und header aus dem body raus geht nicht. Der header-Tag ist != der head-Tag.

Emess · 16. Juli 2023

Ich glaub wir haben ein verständigungs problem.

Ich mach aber jetzt jetzt mal Sonntag und melde mich später wieder.

Vielen Dank für eure Unterstüzung

nextuser · 16. Juli 2023

Zitat von Emess

Ich glaub wir haben ein verständigungs problem.

Du meinst sicherlich beim OnePager, dass das Bild nur im ersten "Part" füllend ist. Wenn man dann weiter runter scrollt, kommt dann der nächste Part, ohne das Bild. Das meinst du wohl mit "header".

Dann gehört das Bild aber weder in den body, noch in der header, sondern als Hintergrundbild in den ersten Part.

Emess · 16. Juli 2023

Zitat von nextuser

Du meinst sicherlich beim OnePager, dass das Bild nur im ersten "Part" füllend ist. Wenn man dann weiter runter scrollt, kommt dann der nächste Part, ohne das Bild. Das meinst du wohl mit "header".
Dann gehört das Bild aber weder in den body, noch in der header, sondern als Hintergrundbild in den ersten Part.

ich glaube es genau so zu meinen. Hast du dazu eine Idee?

Wobei ich immer Dachte Nav oder Header wäre der erste Part?

nextuser · 16. Juli 2023

Zitat von Emess

Wobei ich immer Dachte Nav oder Header wäre der erste Part?

nav ist eher für die Navigation / das Menü einer Seite. Der header-Tag ist für Header-Bereiche, z.B. wenn man in einem "article" oder "section" neben einer Überschrift noch andere Elemente als "Kopf" zusammenfassen möchte.

Die Tags header & footer sind selbstbezeichnend und können auch mehrfach in einer Seite, z.B. jeweils in entsprechenden Abschnitten auftauchen.

Ich würde es ganz simpel mit "main >section > ..." machen, wobei die section jeweils ein Abschnitt darstellt.

Edit:

Wobei du es durchaus auch mit dem header machen kannst, wenn dein erster Part wie in deinem Beispiel-Screenshot nur aus wenigen, einleitenden Elementen wie einer Überschrift & einem Button besteht.

Ein simpler Aufbau wäre z.B.:

HTML

<main>
    <header>
        <h1></h1>
        <!-- Globaler Seiten-Header -->
    </header>
    <section>
        <h2></h2>
        <!-- Abschnitt 1 -->
    </section>
    <section>
        <h2></h2>
        <!-- Abschnitt 2 -->
    </section>
    <!-- ... -->
</main>

Alles anzeigen

Je nachdem, wie groß & "eigenständig" deine Parts sind, wäre hier durchaus auch der article-Tag anstatt section angebracht...

Emess · 17. Juli 2023

Dann hatte ich da wohl eine falsche Vorstellung ist noch von html4

Code

<head></head>
<body>
    <div id="header">meist eine grafik</header>
        <div id="nav"></nav>
            <div id="content"></conten>
                <div id="footer"><footer<
</body<

Davon muss ich mich wohl verabschieden.

Eigentlich wusste ich das schon deshalb habe ich angefangen mittel Bootstrap snippets und copy & paste was zusammen zu basteln.

Merke aber gerade jetzt, dass ich vieles lesen kann aber nicht unbedingt die Hirachie versteh.

Da komm ich mir ziemlich blöd vor.

Was ich vorhabe

start mit bildschirmfüllende Grafik (welches vielleicht auch durch ein Slider (Carousel) umgebaut werden kann).

Die Navigation soll oben angesiedelt sein und z-index mäßig überdem Bild fixiert sein.

Wenn mann runterscrollt kommt etwas info und blabla.

darauf folgen einige Galerien

Dann Impressum Datenschutz und letztendlich footer mit einigen Infos.

Das soll die Hierachie sein.

Wie das bei html4 aussah habe ich ja mal kurz als Sources gezeigt

Wie würde das bei meinem Vorhaben mit Html5 aussehen?

Ein schema würde reichen.

Jetzt hab ich mich schon wieder vergaloppiert

Step by Step

Erst das Nav/Header (oder wie man es nennt) zum Erfolg bringen.

Header mit vollem Screen (Bild) hinter bestehende Navigation legen

Jetzt mitmachen!

Teilen

Tags