HTML #9: Header zentrieren

Auf meinem Tisch klebt ein kleiner gelber Post-it, der in einem riesigen Umschlag zu mir gekommen ist, und hat eine Botschaft für mich "HTML: Header mittig". So weit so klar, aber ich habe leider komplett vergessen wer mich das gefragt hat. Was bin ich nur wieder für ein Schusseln. Trotzdem soll die Frage hier und jetzt beantwortet werden und es ist so einfach.



Für mich habe ich dieses Problem bisher so gelöst, dass ich den Header in der passenden Größe erstellt habe, also genau so breit wie der Blog ist. Um zu probieren wie es klappt habe ich ihn nun kleiner gemacht. Für euch einmal im Vergleich. Die Kästchen sieht man später natürlich nicht. Mein Header hat nämlich einen durchsichtigen Hintergrund und der wird in Photoshop eben so dargestellt.


Wie mein Blog normaler weise aussieht wisst ihr ja, so sieht er nun aus, wenn ich nun den kleineren Header einfüge, dann sieht es so aus.


Nicht wirklich schön, darum muss dringend eine Lösung her und die ist viel einfacher als ich zunächst dachte.


Im Menü klicken wir auf "Vorlage" und dann auf den orangen "Anpassen"-Button.


Zunächst wählen wir hier "Erweitert" und dann "CSS hinzufügen". Bisher sieht es also nicht wirklich gut aus. Nun fügen wir aber einfach folgenden Text ein:

#Header1_headerimg {
  margin: auto;
}


Und schon ist der Header mittig. Bei mir sieht es ein bisschen schief aus, da der Untertitel breiter ist als die Rahmen. Optisch ist es sicher am schönsten, wenn der rote Rahmen in der Mitte ist. So habe ich es auch gelöst. Durch das verkleinern ist dies nun aber verrutscht. Wenn euer Header aber nicht so asymmetrisch ist, müsste es klappen.

Wie immer freue ich mich, wenn ihr mir berichtet ob es geklappt und natürlich dürft ihr mir auch weiterhin gerne Fragen stellen.

19 liebe & nette Meinungen

  1. Woher kennst Du Dich so gut mit HTML aus? Super, Deine Serie. Danke für so viel Mühe. LG, Nadine

    AntwortenLöschen
    Antworten
    1. Hallo Nadine,

      mehr als eine Homepage, bald 5 Jahre mein Blogbaby, Informatikunterricht in der Schule, Spaß an der Sache und Talent beim lösungsorientierten Suchen im Netz ;)

      Liebe Grüße
      Rebecca

      Löschen
    2. Das ist super. Weiter so. Der Stift in meinem Kalender-Post ist tatsächlich so ein radierbarer Fineliner. Ich nutze den immer zum Nähen. Denn es ist wirlklich so, dass Du nach dem Bügeln nichts mehr siehst. Der Stift ist genial. Leider nicht ganz billig, aber sein Geld wert.
      LG
      Nadine

      Löschen
  2. Taaadaaa,
    schon Tage versuche ich, den Header in die Mitte zu bekommen,
    nachdem ich die Blogbreite vergrößert habe, passte nichts mehr.
    Und nun lese ich deinen Post. Du bist Klasse.
    Ich war das aber nicht, der dich angeschrieben hat,
    ausser du kannst Gedanken lesen, denn überlegt hatte ich es schon.
    Wenn ich es in den nächsten Tagen nicht geschafft hätte,
    wäre ich auf dich zugekommen, bevor ich verzweifelt wäre.
    Vielen Dank für deine Mühe
    und bin anscheinend nicht die Einzige, die das nicht konnte.
    Liebe Grüße
    Nähoma

    AntwortenLöschen
  3. Genauso habe ich es auch schon probiert.
    Und auch noch eine andere Variante, die es einzufügen gibt. (Beides Anleitungen aus dem Netz)
    Aber leider hat es nicht funktioniert.
    Aber Du hast mich auf eine andere Idee gebracht: Ich bastele am einem neuem Header in der passenden Größe. Kann mich im Moment nur nicht entscheiden, weil ich verschiedene Varianten in petto habe.

    Liebe Grüße
    Ina

    AntwortenLöschen
    Antworten
    1. Hallo Ina,

      gerade habe ich mir deinen Blog nochmal angesehen. Ist es möglich, dass der Text nicht auf dem Foto mit drauf ist, sondern du dein Headerbild hinter dem Text anzeigen lässt? Vielleicht klappt es dann ja hiermit, oder hast du das auch schon probiert? Mehr fällt mir dann auch nicht mehr ein.

      #header-inner {
      background-position: center !important;
      width: 100% !important;
      }

      Liebe Grüße
      Rebecca

      Löschen
    2. Perfekt, das wars!!!
      Trotzdem gibt es demnächst einen neuen Header.
      Wenn ich mich entscheiden kann... ;O)
      Dankeschön!

      Liebe Grüße
      Ina

      Löschen
  4. Ach, das ist ja mal wieder cool! Habe ich schon mal gesagt, dass ich diese Reihe liebe! Ich mag derlei Frickeleien :0).

    Liebe Grüße,
    Viktoria

    AntwortenLöschen
  5. He super Rebecca, Dankeschön!!
    Die ersten beiden Male hat es nicht geklappt, aber beim dritten Mal schon *freu*
    Danke
    Liebe Grüße
    Veronika

    AntwortenLöschen
  6. Meine liebe HTML- Heldin, du bist ein echter Goldschatz!
    Dank deiner Lektionen gelingt so vieles vorher rätselhaftes ganz plötzlich wie von Zauberhand ...
    siehe: die neue erste Position in meiner Sidebar.
    noch vor ein paar Wochen hätte ich nicht gewusst, wie ich das anstellen sollte... und nun ...
    muss ich dich mal ganz herzlich drücken.
    Gesine

    AntwortenLöschen
    Antworten
    1. Hallo Gesine,

      es ist so schön zu hören, dass es nun wirklich funktioniert. Ich bin so stolz auf dich - dabei hast du doch vorher schon ganz viel alleine hinbekommen ;)

      Liebe Grüße
      Rebecca

      Löschen
  7. Hallo Rebecca,
    das klappt richtig prima! Danke für diese tollen Tipps.
    Gerne würde ich meine Rubriken unter dem Header auch gerne mittig stellen, kannst du mir da auch einen Rat geben?
    LG Janine

    AntwortenLöschen
    Antworten
    1. Hallo Janine,

      erstmal freut es mich total, dass es bei dir geklappt hat. Wegen deiner Frage mache ich mir mal Gedanken und lasse es dich dann wissen :)

      Liebe Grüße
      Rebecca

      Löschen
  8. Liebe Rebecca
    Beim rumstöbern auf verschiedenen Blogs bin ich zu deinem gestossen und ich werde sicher noch viele Male auf deinen tollen Posts rumturnen und einiges ausprobieren. Danke für deine tollen Anleitungen.

    Liebe Grüsse
    Angy

    AntwortenLöschen
  9. Hallo Rebecca,
    wo wir gerade das zentrieren gelernt haben, noch eine Bitte, wie kann ich die Unterseitenleiste, (oben bei dir in grau) zentrieren, ich hab erst 3 und die hängen links in der Ecke, geanu so wie die Überschriften von meinen Posts.
    Wäre ganz toll, wenn du das auch erklären könntest,
    oder stehts vielleicht schon irgendwo und ich habs überblättert?
    Liebe Grüße
    Nähoma

    AntwortenLöschen
    Antworten
    1. Hallo Nähoma,

      wie das mit der Unterseitenleiste geht habe ich in Teil 10 erklärt, hatte es nur Seitenleiste genannt, vom englischen PageList eben. Ging es dir nur darum oder soll ich das mit den Überschriften auch nochmal erklären?

      Liebe Grüße
      Rebecca

      Löschen
    2. Hallo Rebecca,
      sie Seitenleiste hab ich als Sidebar angeschaut, und deshalb noch nicht gelesen.
      Aber die Überschriften (Posttitel) hängen bei mir
      immer links in der Ecke.
      Wäre schön, wenn du das auch erklären könntest.
      Ich bin so froh, dass du dir die Mühe machst und alles erklärst.
      Liebe Grüße
      Nähoma

      Löschen
    3. Hallo Nähoma,

      dann werde ich in den nächsten Tagen mal einen Post für dich schreiben und dir das mit der Überschrift erklären :)

      Liebe Grüße
      Rebecca

      Löschen
  10. Vielen Dank liebe Rebecca für diese tollen Ausführungen, es hat geklappt.

    LG

    moni

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...