Header responsive machen

Hallo

Zitat

Geht das?!

Ja. Ich weiß nur nicht wie wir dir konkret helfen können.

Gruss

MrMurphy

Hallo

Dein Infos sind leider immer noch sehr vage. Ein einzelnes Bild kann zudem nicht responsive sein, es kann sich nur der Breite des Fensters anpassen. Der html-Quelltext will eher folgendermaßen aussehen:

<header class="pageheader">
      <figure>
         <img src="images/kopf.png" alt="Hier gehört immer ein Text rein der das Bild beschreibt">
      </figure>
   </header>

Aktuelle Seiten sollten grundsätzlich mit HTML5 und CSS3 erstellt werden. Dazu gehört dann auch das passende Elemente wie header und figure benutzt werden.

id sollten nur verwendet werden wenn sie sachlich erforderlich sind, ansonsten ist class besser geeignet. Wenn weder id noch class erforderlich sind sollten beide gleich wegbleiben. In deinem Beispiel reicht eine class für header und ist auch sinnvoll, da das header-Element mehrmals auf einer Seite erscheinen darf.

Da weder für figure noch für img spezielle Angaben erforderlich sind die class oder gar id erfordern bekommen die beiden Elemente auch keine. Die notwendigen speziellen Angaben können problemlos über die class vom header zugewiesen werden oder allgemein erstellt werden wie in meinem Beispiel.

Zudem sollte der html-Quelltext nur die wirklich notwendigen Angaben enthalten, also möglichst schlank und damit übersichtlich sein.

Grafiken sollten keine Attribute wie width, height oder border enthalten. Das wird mit CSS geregelt.

Grafiken sollten so bearbeitet werden, dass sie nur so groß sind wie sie maximal erscheinen sollen, auch um unnötigen Traffic zu vemeiden.

<div id="gesamtseite">

So ein Container ist (und war) in der Regel überflüssig und stört nur - also weglassen.

Zum CSS

Das könnte folgendermaßen aussehen:

figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .pageheader {
         background-color: #787878;
         background-image: url(../images/header2.jpg);
         background-repeat: no-repeat;
         background-position: center;
         display: flex;
         justify-content: center;
      }

Angaben wie

html,
      body {
         font-size: 101.01%;
         height: 100.1%;
      }

sind heutzutage nicht mehr erforderlich und sinnvoll. Also weglassen.

Angaben wie

html,
      body {
         text-align: center;
      }

sind an dieser Stelle nicht sinnvoll. So sollten mit text-align immer nur einzelne Elemente zentriert werden, niemals eine gesame Webseite oder ein größerer Container. Und, wie die Bezeichnung bereits hergibt, sollte es sich nur um Text-Elemente wie p, h1 bis h6, li und so weiter handeln.

background-image: url(../images/header2.jpg);
         background-repeat: no-repeat;
         background-position: center top;

Diese Angaben sollten dem betroffenen Container (in meinem Beispiel dem header) direkt zugewiesen werden, falls sie überhaupt erforderlich sind.

Deine Grafik lässt vermuten, dass deine Webseite mehr Inhalt und mehr CSS enthält. Ich kann nur das berücksichtigen was du hier zeigst.

Gruss

MrMurphy

Hast du es schon mal mit dem Befehl background-size probiert? background-size: cover gibt zum Beispiel an, dass der header über den ganzen Bildschirm angezeigt wird. Mit einer Prozentangabe kannst du angeben, zu wie viel Prozent der Header den Bildschirm bedecken soll.