Antworten auf deine Fragen:
Neues Thema erstellen

Sticker über ein Bild legen

lachender_engel

Aktives Mitglied

Hallo, Zusammen.
Ich hoffe auf Eure Hilfe, da mir (aus welchen Gründen gerade auch immer :-( ) ein Ansatz fehlt.
Es gibt ein Bild, das in einem Div-Container liegt (nichts aufregendes). Der Code sieht so aus:
HTML:
<div class="picFrame">
  <a href="#">
    <img class="attachment-page-img post-image" width="640" height="350" alt="Text" src="bild.jpg">
  </a>
</div>
Das CSS zur class picFrame sieht so aus:
HTML:
.picFrame {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset, 0 0 2px rgba(0, 0, 0, 0.15) inset;
    display: block;
    line-height: 0;
    overflow: hidden;
    padding: 10px;
}
Jetzt möchte ich z.B. über die linke obere Ecke einen Sticker setzen (so was wie "nur heute" oder "Sonderangebot"). Hier mal ein Muster:
sticker.jpg

Ich habe gerade keine Idee, wie ich den Sticker über das Bild lege. Meine erste Idee ist es den Div-Container des Bildes in einen weiteren Div-Container zu legen, der dann den Sticker über das Bild lagert. Doch meine Versuche scheitern, da zum Beispiel der Sticker vom Bild überlagert wird. Ich habe auch schon mit z-index rumprobiert. Kein Erfolg. Ich denke, ich mache da einen Denkfehler.
Hat hier jemand einen Tipp, wie ich den Sticker über das Bild bekomme?

Danke vorab für Eure Hilfe!

P.S.: Ich kann leider noch nichts online zeigen, da die Seite nicht online ist und das Bild bzw. die Vorgabe aus Photoshop kommt.
 

lachender_engel

Aktives Mitglied

Hallo, Zusammen.
Ich brauche in dem Teil noch mal Eure Hilfe.
Das mit dem Sticker übers Bild habe ich hinbekommen. Nur leider habe ich zwei Probleme:
1.) Da meine Seite adaptive ist (also Anpassung der Dastellung nach Auflösung des Gerätes), ich den Sticker per top in den negativen Bereich schiebe, ist er nicht da wo er hinsoll, wenn sich die Auflösung ändert. Denn in dem Fall ändert sich auch die Höhe des Bildes.
2.) der Div-Container ist zu hoch - und zwar um die Höhe des Stickers.

Hier der Code: http://jsfiddle.net/592KU/

Hat jemand eine Idee, wie ich das lösen kann?
 

cebito

undefined

Werd dir mal über die Bedeutung und Wirkung von "position" klar. Lies dich da bitte mal richtig ein! Es bringt dir nix so rumzuprobieren ohne zu wissen was du da eigentlich wirklich machst.
 

lachender_engel

Aktives Mitglied

Hallo, cebito.
Bisher war ich der Meinung die Wirkung von position zu kennen. Aufgrund Deines Hinweises habe ich mir die Beschreibung erneut durchgelesen und auch Tests damit gemacht. Beides hat mich leider nicht zu meinem Ergebnis geführt.
Anscheinend verstehe ich dann doch die Wirkung von position nicht dahin, wie Du es vermutlich meinst. Ich finde, auch nach erneuter Lektüre der Paramter für position, keine Lösung für mein Problem.
Anscheinend weißt Du aber wie es sich lösen lässt?! Würdest Du mich an Deinem Wissen teilhaben lassen?!
Danke!
 

cebito

undefined

http://www.css4you.de/position.html
relativ: Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben
Deshalb ist dein Container so hoch. Hab mein Beispiel nochmal angepasst, verschieden große Bilder, gleiche Klassen. http://jsfiddle.net/hK8x3/10/ Beachte bitte wie und welche Form von position ich für die verschiedenen Elemente verwende! Und lass dein overflow:hidden; endlich weg!
 

lachender_engel

Aktives Mitglied

Hallo, Cebito. Danke für Deine neue Antwort die mich auf den richtigen Weg gebracht hat. Ich hatte position in Bezug auf die class für den Störer betrachet und übersah position in der Class für das Bild. Nun habe ich den Zusammenhang verstanden.
Vielen Dank noch mal, dass Du Dir die Mühe gemacht hast!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben