Bernd: Header gestalten

Hallo,

ich bin etwas am verzweifeln. Wie bekomme ich so ein Header hin? Das Hintergrundbild soll über die ganze Bildschirmbreite gehen, der Inhalt Zentriert auf 1200px Breite.

Links davon das Logo, rechts die Navigation, wie auf meinem Bild zu sehen ist.

  1. @@Bernd

    ich bin etwas am verzweifeln. Wie bekomme ich so ein Header hin? Das Hintergrundbild soll über die ganze Bildschirmbreite gehen, der Inhalt Zentriert auf 1200px Breite.

    Da hätte ich eine Rückfrage: Wie soll’s aussehen, wenn die Bildschirmbreite weniger ist als 1200px?

    (Mal ganz abgesehen davon, dass px im Stylesheet nicht auftauchen sollte.)

    Hintergrundbild fürs html-Element, background-size: cover bzw. contain [MDN]

    max-width für body; Zentrierung mit margin: auto.

    Oder mit Grid.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo Gunnar,

      Da hätte ich eine Rückfrage: Wie soll’s aussehen, wenn die Bildschirmbreite weniger ist als 1200px?

      also auf einem Handy sollte die Navigation hinter einem Hamburger-Icon versteckt werden, das Hintergrundbild komplett verschwinden und der Sloagen, der über dem Bild liegt, kann ebenfalls komplett verschwinden.

      1. @@Bernd

        also auf einem Handy sollte die Navigation hinter einem Hamburger-Icon versteckt werden

        Welches hoffentlich mit „Menü“ beschriftet ist.

        Auch so ein responsives Menü hab ich mal gebaut. Erklärung in diesem Posting, Korrektur in jenem Thread.

        das Hintergrundbild komplett verschwinden und der Sloagen, der über dem Bild liegt, kann ebenfalls komplett verschwinden.

        Mit media query kein Problem. Aber wenn der Slogan nicht so wichtig ist, warum soll er dann größere Bildschirme zumüllen?

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@Bernd

    Links davon das Logo, rechts die Navigation, wie auf meinem Bild zu sehen ist.

    Auch da hätte ich eine Rückfrage: Wie soll’s aussehen, wenn Logo und Navigation gar nicht nebeneinanderpassen?

    Flexbox to the rescue. justify-content: space-between, damit das Logo am Anfang (links) und Navigation am Ende (rechts) sitzt. wrap, damit beides bei wenig Platz untereinander statt nebeneinander sitzt.

    Zusammen mit dem in meiner anderen Antwort Gesagtem sieht’s dann so aus: Codepen

    (Der Skip-Link ist für Tastaturbedienung – als Abkürzung, dass man nicht durchs ganze Menü tabben muss.)

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. Hallo,

    ich habe eine Beispiel Seite gefunden wo schön gezeigt wird was ich vor habe:
    https://candis.io/

    Meine Frage dazu, wie sollte der Aufbau sein? Meine Gedanken sind:

    Version 1

    <header>
    		<nav>
    			<h1>LOGO</h1>
    			<ul>
    				<li></li>
    			</ul>
    		</nav>
    
    		<section>
    			<h2>Slogen 1</h2>
    			<h3>Slogen 2</h3>
    		</section>
    	</header>
    

    Version 2

    	<nav>
    		<h1>LOGO</h1>
    		<ul>
    			<li></li>
    		</ul>
    	</nav>
    
    	<header>
    		<section>
    			<h1>Slogen 1</h1>
    			<h2>Slogen 2</h2>
    		</section>
    	</header>
    

    Das Hintergrundbild könnte man in den <header> als background-image einbinden?

    1. @@Bernd

      Meine Frage dazu, wie sollte der Aufbau sein? Meine Gedanken sind:

      nav in header ist schon mal nicht verkehrt.

      Aber „LOGO“ ist nicht h1 – ebenso wenig wie „Slogen 1“ und „Slogen 2“ [sic!] Überschriften sind. Verwende dafür p oder div oder span o.ä.

      h1 ist dann die jeweilige Seitenüberschrift.

      Das Hintergrundbild könnte man in den <header> als background-image einbinden?

      Ja.

      Und das mit dem Skip-Link hatte ich dir auch schon gezeigt.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. @@Gunnar Bittersmann

        Und das mit dem Skip-Link hatte ich dir auch schon gezeigt.

        Und wozu soll das gut sein? ☞ „Navigation überspringen“-Links

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  4. Hallo,

    ich komme an einer Stelle gerade nicht wirklich weiter. Mein Ergebnis bis jetzt:
    http://example-website.bplaced.net/

    Folgende Fragen habe ich dazu:

    1. Kann ich den Hintergrund abdunkeln ohne einem Zusätzlichem DIV und ohne dass ich das Bild mit einem Grafikprogramm bearbeiten muss?
    2. Wie bekomme ich unterhalb der Navigation ein Unterstrich über die ganze Seite? So wie ich das sehe, ist dieses mit diesem aktuellen Aufbau nicht möglich? Doch lieber <nav> aus dem <header> nehmen? Hmm dann habe ich aber keine Transparente Navigation mehr?

    Dank für eure Hilfe.

    1. Hallo

      ich komme an einer Stelle gerade nicht wirklich weiter. Mein Ergebnis bis jetzt:
      http://example-website.bplaced.net/

      Folgende Fragen habe ich dazu:

      1. Kann ich den Hintergrund abdunkeln ohne einem Zusätzlichem DIV und ohne dass ich das Bild mit einem Grafikprogramm bearbeiten muss?

      Du kannst mehrere Hintergrundbilder festlegen. Auch Gradienten gelten in CSS als Hintergrundbilder. Mit (teil-)transparenten Farbangaben im rgba- oder hsla-Format für den Gradienten kannst du das dahinterliegende Bild durchscheinen lassen.

      #bla { background: linear-gradient(), url(); }
      

      Tschö, Auge

      --
      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
      Toller Dampf voraus von Terry Pratchett
      1. Hallo,

        Du kannst mehrere Hintergrundbilder festlegen. Auch Gradienten gelten in CSS als Hintergrundbilder. Mit (teil-)transparenten Farbangaben im rgba- oder hsla-Format für den Gradienten kannst du das dahinterliegende Bild durchscheinen lassen.

        #bla { background: linear-gradient(), url(); }
        

        vielen Dank! Hat mir ein weiteres DIV gespart, ich finde das schaut recht gut aus?
        http://example-website.bplaced.net/

        1. Hallo Bernd,

          weiß nicht, ich find's zu finster. Aber das ist deine Sache 😀

          Vergiss jedenfalls mein :before Overlay, das war wohl Technik von 2008…

          Falls Du die Start- und Stopfarbe des Gradienten unterschiedlich haben willst, musst Du bei der background-position Angabe übrigens auch zwei Werte verwenden, ansonsten gilt deine Verschiebung für beide Hintergründe und Du hast einen Helligkeitssprung im Overlay. Also so:

          background-position: 0%, 0% -56px;
          

          Rolf

          --
          sumpsi - posui - clusi
      2. @@Auge

        1. Kann ich den Hintergrund abdunkeln ohne einem Zusätzlichem DIV und ohne dass ich das Bild mit einem Grafikprogramm bearbeiten muss?

        Du kannst mehrere Hintergrundbilder festlegen. Auch Gradienten gelten in CSS als Hintergrundbilder. Mit (teil-)transparenten Farbangaben im rgba- oder hsla-Format für den Gradienten kannst du das dahinterliegende Bild durchscheinen lassen.

        Da kocht dann die GPU. Sinnvoller ist es, das Bild doch eben im Grafikprogramm entsprechend zu bearbeiten. Insbesondere für mobile Geräte mit nicht so viel Rechenleistung.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo

          Du kannst mehrere Hintergrundbilder festlegen. Auch Gradienten gelten in CSS als Hintergrundbilder. Mit (teil-)transparenten Farbangaben im rgba- oder hsla-Format für den Gradienten kannst du das dahinterliegende Bild durchscheinen lassen.

          Da kocht dann die GPU.

          Mal unabhängig von Bernds Beispielseite, die momentan eine einfarbige, vollflächige Abdeckung zeigt, hieß es nicht immer, auch von dir, man solle so viel wie möglich an CSS delegieren?

          Sinnvoller ist es, das Bild doch eben im Grafikprogramm entsprechend zu bearbeiten. Insbesondere für mobile Geräte mit nicht so viel Rechenleistung.

          Für die mittlerweile eingefügte vollflächige Abdunklung trifft das wohl zu. Bei der Abdunklung des Hintergrunds eines im fraglichen bereich liegenden Elements (hier z.B. der navigation) würde ich dennoch auf CSS-Gradient setzen. Der passt halt immer zur abzudeckenden Fläche.

          Übrigens, wie sähe der Rechenaufwand mit einer teiltransparenten Pixelgrafik statt eines CSS-Gradienten aus?

          Tschö, Auge

          --
          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
          Toller Dampf voraus von Terry Pratchett
          1. @@Auge

            hieß es nicht immer, auch von dir, man solle so viel wie möglich an CSS delegieren?

            Von mir heißt es immer: Kommt drauf an. 😜

            Eine Animation will man vielleicht an CSS delegieren (anstatt an JavaScript). Die Abdunklung eines Bildes nicht unbedingt.

            Übrigens, wie sähe der Rechenaufwand mit einer teiltransparenten Pixelgrafik statt eines CSS-Gradienten aus?

            Was wäre ein teiltransparenter CSS-Gradient anderes als eine teiltransparente Pixelgrafik? Generieren Browser aus dem CSS-Einzeiler nicht auch eine Grafik-Bitmap?

            Damit lass ich dich mal im Nebel stehen. Was da so gespenstisch heult, ist nicht der Wind … (wie ich damals im Nachtrag noch sagte)

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Hallo

              Übrigens, wie sähe der Rechenaufwand mit einer teiltransparenten Pixelgrafik statt eines CSS-Gradienten aus?

              Was wäre ein teiltransparenter CSS-Gradient anderes als eine teiltransparente Pixelgrafik? Generieren Browser aus dem CSS-Einzeiler nicht auch eine Grafik-Bitmap?

              Das Zauberwort an der Stelle ist „generieren“. Eine Pixelgrafik als Datei ist schon da und muss nicht generiert werden. Die Berechnung des Anteils des anzuzeigenden Inhalts des hinter der teiltransparenten Grafik (welcher Herkunft auch immer) liegenden Hintergrunds bleibt natürlich. Vermutlich ist die Einsparung nicht gerade erheblich.

              Tschö, Auge

              --
              Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
              Toller Dampf voraus von Terry Pratchett
    2. Hallo Bernd,

      Das Abdunkeln klingt mal wieder nach einem A/B Problem: Willst Du wirklich das Bild dunkler haben, oder geht es Dir um eine bessere Lesbarkeit deiner weißen Schrift? Für die Lesbarkeit könntest Du bei .container noch text-shadow: 0 0 3px black; hinzufügen. D.h. jeder Text bekommt einen schwarzen Schatten, der DIREKT dahinter liegt, und mit einem Radius von 3px verschmiert wird. Dadurch bekommt jeder Buchstabe einen leichten grauen Rahmen und ist auf hellem Hintergrund deutlicher zu erkennen.

      Zum Abdunkeln: siehe linear gradient von oben...

      Rolf

      --
      sumpsi - posui - clusi
      1. Hallo

        Statt opacity kannst Du auch einen RGBA-Wert für die Hintergrundfarbe angeben (z.B. mit #00000020 oder rgba(0,0,0,0.1), das wird aber bei Microsoft schlechter unterstützt.

        Abgesehen vom Umstand, mit mehreren gestapelten Hintergründen für ein Element das Ergebnis ohne zusätzliches (Pseudo)-Element erreichen zu können, würde ich die Unterstützung von RGBA und HSLA selbst bei Microsoft-Produkten nicht als „schlechter“ bezeichnen wollen.

        Tschö, Auge

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
      2. Hallo,

        auch dir vielen Dank für deine Hilfe. Habe ich getestet und es funktioniert:
        http://example-website.bplaced.net/index-2.html

        Was ist jetzt der Vorteil / Nachteil deiner Variante gegenüber der von Auge?
        http://example-website.bplaced.net/

        .pageheader {
        	background: linear-gradient(rgba(30,30,30,0.75), rgba(30,30,30,0.75), rgba(30,30,30,0.75)), 
                      url(../img/bg-notebook.jpg);
        	min-height: 26em;
          background-size: cover;
          background-position: 0% -56.0058px;
        }
        

        EDIT - 15:01 Uhr: OK, du hast meine Frage bereits in deinem weiteren Beitrag beantwortet:
        https://forum.selfhtml.org/self/2017/dec/30/header-gestalten/1711778#m1711778

    3. Hallo,

      1. Wie bekomme ich unterhalb der Navigation ein Unterstrich über die ganze Seite? So wie ich das sehe, ist dieses mit diesem aktuellen Aufbau nicht möglich? Doch lieber <nav> aus dem <header> nehmen? Hmm dann habe ich aber keine Transparente Navigation mehr?

      darf es so eine Verschachtelung geben?

      <nav class="mainnav">
      				<div class="container">
      				<h1>Example-Website</h1>
      				<ul>
      					<li><a>Startseite</a></li>
      					<li><a href="#">Magazin</a></li>
      					<li><a href="#">Wir über uns</a></li>
      					<li><a href="#">Leistungen</a></li>
      					<li><a href="#">Kontakt</a></li>
      				</ul>
      				</div>
      			</nav>
      

      Dann würde es auch mit dem Unterstrich klappen:
      http://example-website.bplaced.net/

      1. @@Bernd

        darf es so eine Verschachtelung geben?

        Was heißt „darf“?

        Es ist syntaktisch korrektes HTML. Was nicht heißt, dass es gut wäre.

        <nav class="mainnav">
        				<div class="container">
        

        Wozu das div? Mit nav ist bereits ein Container-Element da; das div ist überflüssig.

        				<h1>Example-Website</h1>
        

        Ist das die Überschrift für die Navigation? Wenn nein, gehört die Überschrift nicht ins nav-Element.

        Überhaupt sollte die Website-Kennung eher nicht h1 sein. h1 ist die jeweilige Seitenüberschrift, also auf den jeweiligen Seiten „Magazin“ bzw. „Wir über uns“ usw.

        					<li><a>Startseite</a></li>
        

        Für den nicht verlinkten Menüpunkt der aktuellen Seite wäre angebracht:

        			<li><a tabindex="0" aria-current="page">Startseite</a></li>
        

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. @@Bernd

        Dann würde es auch mit dem Unterstrich klappen:

        Das klappt auch bei dem von mir gezeigtem Beispiel mit kleinen Änderungen am Stylesheet:

        • Nicht der body wird in der Breite beschränkt, sondern dessen Kinder header und main.
        • Die Linie wird durch ein body::before-Pseudoelement erzeugt.
        • Der header wird mit order: -1 vor (über) diese Linie gesetzt. Dazu wird body auch zu einer Flexbox gemacht.

        So sieht’s aus.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory