Be KreaTief

[BLOGGER] Bilder unter Posttitel ✤✤

Hallöchen alle zusammen. :D
So, mal wieder ein Tutorialchen ^^
Ich wurde von einer Bloggerin gefragt, wie man denn ein Bild unter dem Posttitel platzieren könne. Ich hab die CSS für sie geschrieben und weil ich denke, dass es ganz interessant werden kann, hab ich gedacht ich schreib ein Tutorial darüber.

Das Endergebnis schaut zum Beispiel so aus:


Als erstes braucht ihr ein Bild, das ihr platzieren möchtet, das kann ein Pattern sein, oder ein einzelnes Bild, das euren Vorstellungen entspricht, das ladet ihr dann hoch und dann geht es in den HTML-Bereich.



Um den Titel anzusprechen benutzen wir .post h3, das Hintergrundbild wird mit einem pseudoelement platziert.

Als erstes müssen wir allerdigns nur das h3-Element vorbereiten, das machen wir mit einer relativen Platzierung.

.post h3{
 position: relative;
}
Haben wir das, können wir schon das pseudoelement beschreiben. Der Content muss wie so gut wie immer leer sein, die Position absoulute und 100% von oben, also direkt unterhalb des Posttitels. left muss 0 sein und dann noch Höhe und Breite des Bildelements. Und das Bild wird durch den Bildlink verlinkt.


.post h3:after{
 content:'';
 position: absolute;
 top: 100%;
 left: 0px; 
 background: url(BILDLINK);
 width: 900px; /* Bildbreite */
 height: 30px; /* Bildhöhe */
}

Das wär's eigentlich, allerdings kann es dann vorkommen, dass das Bild in den Text reicht, also müsst ihr im ersten Teil noch eine margin einfügen, die der Höhe eures Bildes entspricht in meinem Fall sehe die obere CSS also so aus:


.post h3{
        position: relative;
        margin-bottom: 30px; 
}

Und dann seid ihr fertig. :D
edit

3 comments:

  1. Ohh, das hab ich mich schon öfter gefragt, wie das wohl funktioniert. Danke für das Tutorial. Und ich glaube, dass sogar ich das hinkriegen werde...

    ReplyDelete
  2. Oh nein, warum habe ich deine Seite hier gefunden? Jetzt habe ich so viele tolle neue Sachen entdeckt, dass mein Layout ernsthaft in Gefahr ist, dabei ist es gerade erst neu :D
    Also ich werde definitiv einige Sachen ausprobieren, vielen Dank :)

    Liebe Grüße ♥

    ReplyDelete
    Replies
    1. Oh nein, das wollte ich nicht :D
      Dennoch freut es mich natürlich, dass du Sachen gefunden hast, die du anweden willst ^^

      Delete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered