Wie füge ich eine verlinkte Grafik im Headerbereich ein?

Headergrafik

Weihnachten steht bevor und ich verspürte das Bedürfnis, meine Blogs zur Adventszeit durch eine Grafik ein wenig aufzupeppen. Auf meiner bunten Blogwelt sollte es eine Weihnachtsmütze sein. Zuerst hatte ich sie über dem “S” des Blognamens platziert.
Das Problem war allerdings, da mein Header-Board mit dem Zitat auf den Folgeseiten nicht anzeigt wird, schob sich die Mütze nach unten und verdeckte das “S” fast komplett.

Nun gut, dann lasse ich sie eben über der Navigationsleiste anzeigen. Mit ein bisschen CSS ist das ja leicht umsetzbar. Problem bei dieser Anzeige war allerdings, der Link zur Startseite (Home) war nicht mehr erreichbar, da die Grafik diesen Menülink überlagert.

Bei der Recherche darüber, wie eine Grafik am einfachsten im Headerbereich verlinkt werden kann, stieß ich auf viele Gleichgesinnte, die sich mit dieser Frage beschäftigten. Eines funktioniert schon einmal nicht: Die Verlinkung per CSS. Ebenso erfolglos war die Variante, die für das ausschließliche Einfügen per html vorgeschlagen wurde. Die Grafik wurde damit schlichtweg nicht so dargestellt, wie ich es mir wünschte.

Nachdem ich nicht wirklich eine funktionierende Lösung im Internet fand, probierte ich selber eine Lösung mittels CSS und html. Mit ihr wird die Weihnachtsmütze, sowohl auf der Startseite als auch Folge- und Beitragsseite einwandfrei platziert und verlinkt.

  • Grafik im Header auf StartseiteGrafik im Header auf Startseite
  • Grafik im Header auf FolgeseitenGrafik im Header auf Folgeseiten

 

Html-Code für die Verlinkung und Festlegen der Grafikgröße

Diesen füge ich in die header.php meines Themes “Orangy” ein.

<div class="weihnacht"><a href="http://www.bunte-blogwelt.de"><img src="http://www.extern.bunte-blogwelt.de/images/weihnachtsmuetze.png" alt="Weihnachtsmütze" title="Frohe Weihnachten!" border="0" width="140" height="95" style="float:left;margin:-49px 0px 212px 10px" />	</a></div>

Ich denke, ich muss nicht groß erklären, dass ihr die vorgenannten Pfade gegen den Eures WordPress-Themes und Eurer Grafik austauscht. ;-)

CSS-Code für die Platzierung und Rotation der Grafik

Dieser gehört in die style.css meines Themes.

.weihnacht{position:absolute;margin-top:10px;z-index:9999;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-20deg);-o-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg);}

Ich wünsche Euch eine wunderschöne Vorweihnachtszeit! :-)

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

2 Kommentare

  • Hallo Sylvi,

    vielen dank für die gute Anleitung.
    Besonders für Anfänger ist das super Verständlich.

    Liebe Grüse aus dem Norden

    Marc

    • Hallo Marc,

      ach das freut mich aber jetzt – zumal ich mir für die Zukunft fest vorgenommen habe, Dokumentationen auch für Newbies leicht verständlich zu formulieren.

      Danke für Dein nettes Feedback.

      Lieben Gruß aus dem Sauerland,
      Sylvi