✔ Looklike Foto

[MadCrusher]

Hallo...
Also ich wollte für meine Gallerie meine Bilder wie ein Foto mit schlagschatten aussehen lassen, ohne images für den rand zu nutzen.... das klappt bis auf wenige Sachen super...

Erstmal hier der aufbau:

<div class="picture_frame">
  <div class="picture_frame_padding">
    <img>
    <div class="picture_frame_text">Text</div>
  </div>
</div>

und hier das Stylesheet:

DIV.picture_frame{
  border-left: 2px solid white;
  border-top: 2px solid white;
  border-right: 2px solid lightgrey;
  border-bottom: 2px solid lightgrey;
}
DIV.picture_frame_padding{
  width: 200px;
  border: 1px solid grey;
  padding: 4px;
}
DIV.picture_frame_text{
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
}

Das ganze sieht dann z.B. so aus
http://img220.imageshack.us/img220/3939/fotoup1.jpg

Was mich stört:

• wie krieg ich es hin, das der Frame sich an die größe des bildes anpasst
• der Text unter dem Bild zentriert ist (eig. hab ich doch text-align auf center)

Danke für eure Hilfe
Crusher

 

[Maik]

Hi,

Was mich stört:

• wie krieg ich es hin, das der Frame sich an die größe des bildes anpasst
• der Text unter dem Bild zentriert ist (eig. hab ich doch text-align auf center)

schau dir mal Stu Nicholls' Methode Simple fluid drop shadows näher an.

Wenn der Text unterhalb des Bildes nicht horizontal zentriert wird, liegt es an der Grafikbreite, die nicht mit der Breite des umschliessenden DIVs picture_frame_padding korrespondiert.

mfg Maik

 

[MadCrusher]

Hat mich schon einen Schritt weitergebracht.. nur die dynamische Breite, die sich an das Bild anpasst fehlt noch

 

[Maik]

Stu Nicholls löst dies in der Variante "Can be applied to images" mit der Klasse .image, die eine entsprechende Breitenangabe besitzt.

Wenn du aber ohne Breitenangaben arbeiten möchtest, solltest du vielleicht besser auf eine grafische Umsetzung des Schattens umsteigen, und die Technik Onion Skinned Drop Shadows anwenden.

mfg Maik

 

[MadCrusher]

merk schon, das ich da wohl nicht drum rum komme, wenn ich die breite dynamisch haben will... aber danke schonmal =)