Header mit vollem Screen (Bild) hinter bestehende Navigation legen

nextuser · 19. Juli 2023

Ja, die "div-Container mit ID"-Zeiten um die Seite zu strukturieren sind lange vorbei!

Zitat von Emess

Wie würde das bei meinem Vorhaben mit Html5 aussehen?
Ein schema würde reichen.

Bei einer OnePage mit deinen Angaben würde ein simples

HTML

<html>
    <head></head>
    <body>
        <nav></nav>                 <!-- Falls Menü über (nicht auf) dem Bild sein soll. Oder mit z.B. "position:absolute/fixed", falls Menü fest sein soll. -->
                                    <!-- Ansonsten, falls Menü nicht fix, aber auf dem Startbild sein soll, dann die nav lieber mit in den header-Tag! -->
        <header></header>           <!-- Start / bildschirmfüllende Grafik / Slider (+ evtl. Menü...) -->
        <main>                      <!-- Eigentlicher Inhalt -->
            <section></section>
            <section></section>     <!-- Abschnitte (Je nach Inhalt der Parts kann hier auch "article" passender sein...) -->
            <section></section>     <!-- Deine Parts (Info, Gallerien, Impressum & Datenschutz) sind eher unabhängig zueinander. Da kann man auch "article" verwenden. -->
        </main>
        <footer></footer>           <!-- Footer mit deinen Infos -->
    </body>
</html>

Alles anzeigen

reichen.

Emess · 19. Juli 2023

Vielen Dank!

Genau so ein Schema hatte ich gesucht. Vor allem sind die Kommentare für mich sehr informativ.

Im augenblick habe ich noch keine lösung gefunden das hintegrundbild responsiv zumachen damit es in der Mobilansicht mittig und etwas kleiner erscheint.

Jetzt passt die Größe nicht und obwohl background-position: right;

hängt das bild übergroß nur halb links.

mobil2.png

nextuser · 19. Juli 2023

Zitat von Emess

Im augenblick habe ich noch keine lösung gefunden das hintegrundbild responsiv zumachen...

Mach es doch so, wie du es Tage zuvor schonmal erwähnt hast.

Einfach nur das sichtbare aus dem Bild ausschneiden und als Hintergrundbild mit schwarzem Hintergrund nutzen.

So kannst du das Bild dann auch wunderbar mobil skalieren...

Emess · 19. Juli 2023

Zitat von nextuser

Mach es doch so, wie du es Tage zuvor schonmal erwähnt hast.
Einfach nur das sichtbare aus dem Bild ausschneiden und als Hintergrundbild mit schwarzem Hintergrund nutzen.
So kannst du das Bild dann auch wunderbar mobil skalieren...

Ok das werde ich probieren aber Geduld habe auch noch andere Lebensbaustellen.

nextuser · 19. Juli 2023

Zitat von Emess

Ok das werde ich probieren aber Geduld habe auch noch andere Lebensbaustellen.

Jo hab doch garnichts in diese Richtung gesagt...

Ich bin hier auch nicht ständig präsent.

Emess · 20. Juli 2023

Ich habe mal heute morgen mir einige tuts und clips angeschaut..

Doch wäre es super wenn man mich hier noch mal in die richtige Richtung zu stoßen.

Es ist jetzt so, dass die Navigation auf dem Body liegt was ja ok ist .

Doch obwohl der header tag unter der Navigation angesiedelt sein Soll, scheint dieser über oder besser unter der Navigation zu liegen

zur Veranschaulichung

nav.png

header.png

Ich steh auf dem schlauch

nextuser · 20. Juli 2023

Zitat von Emess

Doch obwohl der header tag unter der Navigation angesiedelt sein Soll, scheint dieser über oder besser unter der Navigation zu liegen...

Ja, und das ist auch das normale Verhalten, wenn du nav als "position:absolute" setzt. Dann wird die nav ja aus dem normalen Fluss genommen und der header hat über sich "nichts".

Emess · 20. Juli 2023

So ich bin etwas weiter gekommen

doch wie bekomme ich das Bild in der Smartphone Ansicht eingepasst

hier neue hochgeladen

so sieht die Smartphonansicht aus.

kasper_small.png

nextuser · 20. Juli 2023

Zitat von Emess

doch wie bekomme ich das Bild in der Smartphone Ansicht eingepasst

Indem du dem Bild z.B. "min-width:200px" gibst, skaliert es automatisch mit.

Emess · 21. Juli 2023

im Augenblick sieht es so aus

Code

#header {
    height: 900px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: black;
  
}

@media(max-width:750px){

#header {
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: black;
    }

}

Alles anzeigen

das "min-width" hat in beiden fällen keine Auswirkung.

Wobei mein css nicht besonders elegant zu sein scheint

nextuser · 21. Juli 2023

Zitat von Emess

das "min-width" hat in beiden fällen keine Auswirkung.

Ich schrieb ja auch "dem Bild...", nicht dem header.

Emess · 21. Juli 2023

Zitat von nextuser

Ich schrieb ja auch "dem Bild...", nicht dem header.

Code

#header {
    height: 900px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: black;
  
}

@media(max-width:750px){

#header {
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: black;
    }
.img header {
    min-width: 200px;
}
}

Alles anzeigen

Auch das hat keine Auswirkung.

Bitte habt Geduld mit mir

Emess · 21. Juli 2023

Hab erst nicht verstanden was wie du das meinst . Hab es aber herausgefunden

Code

<header id="header">
    
      <img class="kasper" src="/img/kasper.png ">
    
    </header>




@media(max-width:750px){

#header {
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: black;
    }
.kasper {
    min-width: 200px;
    margin-bottom: 300px;
}
}

Alles anzeigen

Gibt es für mein CSS eine elegantere Möglichkeit. Stichwort "margin-bottom!?

res.png

nextuser · 21. Juli 2023

Zitat von Emess

Gibt es für mein CSS eine elegantere Möglichkeit. Stichwort "margin-bottom!?

Wozu dient denn bei dir der Abstand von 300px?

Emess · 21. Juli 2023

Zitat von nextuser

Wozu dient denn bei dir der Abstand von 300px?

Ohne diesen Abstand wird von unten her gesehen nur ein halbes Bild angezeigt. von oben her müsste ich ins minus gehen.

Es geht aber ist wohl Pfusch

nextuser · 21. Juli 2023

Gib dem header mal folgendes:

Code

height: calc(100vh - 80px);
padding-top: 80px;

Die 80px bezogen auf deine nav-Leiste.

Und dein "margin-bottom" weg.

Emess · 21. Juli 2023

So sieht es eleganter aus. Mir ist dann allerdings aufgefallen,

dass in dieser Auflösung

body.png

rechts der body hervor lugt. Und zwar nur in dieser Auflösung

nextuser · 21. Juli 2023

Zitat von Emess

Mir ist dann allerdings aufgefallen,
dass in dieser Auflösung rechts der body hervor lugt. Und zwar nur in dieser Auflösung

Bei mir ist da nichts.

Kannst du mit rechter Maustaste -> Element untersuchen mal schauen, welches Element die Breite nach rechts übersteigt?

Emess · 21. Juli 2023

Liegt wohl am Brave-Browser mit Chrome habe ich keine Probleme

Header mit vollem Screen (Bild) hinter bestehende Navigation legen

Jetzt mitmachen!

Teilen

Tags