Header responsive machen

Madeleine

Hey:)
Ich habe eine Frage.
Mein header ist mir nicht möglich responsive einzufügen und hoffe auf Hilfe.
Habe viel probiert aber es klappt leider alles nicht

Die Breite und die Höhe des Headers soll je nach Bildschirm automatisch wachsen/verkleinern.
So, dass die weiße transparente Grafik und die untere Website immer sich mitverändert.

Geht das?!

LG
Madeleine

MrMurphy

Hallo

Zitat

Geht das?!

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

Gruss

MrMurphy

Madeleine

Das ist schonmal super:)
Ich füge die Seite mal hinzu, hoffe das es hilft...hm das geht nicht, dann der Kopfbereich und CSS dazu.
Es würde mir echt helfen, wenn ich wüßte, wie es endlich klappt...Danke:o

LG
Madeleine

HTML

<body>


<div id="gesamtseite">
<!-- Beginn Kopf -->
<div id="kopfbereich" class="clearfix">
<div id="kopfgrafik"><img src="images/kopf.png" alt="" height="314" border="0" width="964"></div>

Code

html, body{
background-color: #787878;
font-size: 101.01%;
height: 100.1%;
background-image:url(../images/header2.jpg);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}

Hintergrundbild
header2.jpg (1920x314)

Transparentes Bild
kopf.png (964x314)

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:

Code

<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.

Code

<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:

Code

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;
      }

Alles anzeigen

Angaben wie

Code

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

sind heutzutage nicht mehr erforderlich und sinnvoll. Also weglassen.

Angaben wie

Code

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.

Code

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

voucher

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.

Tags