Polaroid Effekt

Polaroid Effekt

Beitragvon cssRookie » 19.10.2011, 19:38

Hallo Leute,

habe mal wieder ein CSS Problem :-D

Hoffe auf Eure Hilfe.. habe versucht ein Art Polaroid Bild mit Untertitel zu erstellen.

Habe dazu 1 Hintergrund Grafik und natürlich das Hauptbild.

Jetzt wird das nicht richtig zusammengefasst angezeigt .. vielleicht könnt Ihr mir ja helfen:

Code: Alles auswählen
.news_bild {
position: relative;
background-image: url(tframe.png);
background-repeat: no-repeat;
width:280px;
height:252px;
}

.news_bild_image {
position: relative;
top: 20px;
left: 20px;
width:240px;
height:180px;
}

.news_bild p {
position: relative;
top: 200px;
left: 20px;
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: bold;
}


Code: Alles auswählen
<div class="news_bild_image"><img src="dnimage.jpg" class="news_bild"></div>
<div class="news_bild p"><p>TEST-TEXT</p></div>


Wenn Ihr natürlich noch eine bessere Idee habt. lasst es mich bitte wissen.. zwar gibt es im Internet noch viel mehr zu finden, aber ich wollte es ja mit meinen eigenen bescheidenen CSS Kenntnissen umsetzen.

Gruß und Danke in jedem Fall

cssRookie
cssRookie
Gelegenheitsleser
 
Beiträge: 25
Registriert: 09.08.2007, 18:56

Re: Polaroid Effekt

Beitragvon djheke » 20.10.2011, 07:59

Dies wäre eine Möglichkeit

Code: Alles auswählen
<!DOCTYPE html>
<html>
  <head>
    <title>Polaroid</title>
    <style type="text/css">

.news_bild {
  position: relative;
  border:1px solid #aaa;
  padding:10px;
  width:260px;
  height:240px;
}

.news_bild img {
  margin:0;
  padding:0;
  width:260px;
border:1px solid #aaa;
}

.news_bild p {
font-size:75%;
}

</style>
</head>
<body>
  <div class="news_bild">
   <img src="bild.jpg alt="Mein Bild" title="Bild" width="200" height="150">
   <p>Dein Bild sch&ouml;nes Bild</p>
</div>

</body>
</html>
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Polaroid Effekt

Beitragvon cssRookie » 20.10.2011, 16:29

Hallo djheke,

sieht super aus... gute Alternative....

Trotzdem habe ich mich wohl falsch ausgedrückt... :(

Ich habe für das Polaroid.. eine eigenes Bild als Hintergrund gemacht... siehe Bildanhang...

Dann habe ich auch gleich Schatten usw... (ich weiß würde auch mit CSS3 gehen)..

Wenn Du / Ihr dafür auch eine Lösung hättet.. wäre super...

Danke aber in jedem Fall auch für den aktuellen Vorschlag :-D

Gruß

cssRookie
Dateianhänge
polaroid_ansicht.JPG
Vorlage
polaroid_ansicht.JPG (16.21 KiB) 217-mal betrachtet
cssRookie
Gelegenheitsleser
 
Beiträge: 25
Registriert: 09.08.2007, 18:56

Re: Polaroid Effekt

Beitragvon djheke » 20.10.2011, 19:13

Mit position:absolute hättest du arbeiten müssen.

Hier ein Beispiel zum kopieren.
http://www.gipspferd.de/forumhilfe/polaroid/

Viel Spaß
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45

Re: Polaroid Effekt

Beitragvon cssRookie » 21.10.2011, 13:03

Hallo djheke,

DU BIST DER GRÖSSTE .. :-D :) :wink:

Ich kann endlich mit meinem Projekt weiter machen... :coffey:

Vielen tausend Dank. Das mit Absolut und relative... hatte ich mir schon gedacht.. aber da sich das Bild noch in einem anderen Frame aufhält... hat das irgendwie nicht geklappt wie gedacht.. aber dank Dir ja jetzt schon...

Vor allem auch für deine super Beispiele auf der Gipspferd Website... :)

Danke nochmals...

Melde mich dann wenn die (redesignte) Website fertig ist..

Gruß

cssRookie
cssRookie
Gelegenheitsleser
 
Beiträge: 25
Registriert: 09.08.2007, 18:56


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Polaroid Effekt"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast