Bild mit Rahmen aus einzelnen Bildern

phpfuchs · #1 (**permalink**) 05.04.2006, 13:02

Ich möchte in einer Bildergalerie Bilder mit einem schönen Rahmen darstellen (siehe unten).

Bisher missbrauche ich eine Tabelle dafür:

Code:

<table cellspacing="0" cellpadding="0" border="0" align="center" width="276">
<tr>
<td>[img]border_top_left.gif[/img]</td>
<td>[img]border_top_middle.gif[/img]</td>
<td>[img]border_top_right.gif[/img]</td>
</tr>
<tr>
<td>[img]border_left.gif[/img]</td>
<td align="center" valign="middle">
<div style="position:relative; top:0px; left:0px;">[img]beispielbild.JPG[/img]</a></div></td>
<td>[img]border_right.gif[/img]</td>
</tr>
<tr>
<td>[img]border_bottom_left.gif[/img]</td>
<td>[img]border_bottom_middle.gif[/img]</td>
<td>[img]border_bottom_right.gif[/img]</td>
</tr>
</table>

Das braucht zudem jede Menge HTML-Code für ein Bild.

Gibt es eine Möglichkeit, das rein über CSS zu lösen?
Ideal wäre es, wenn damit ein IMG-Tag ausreichen würde und der Rahmen wird allein durch CSS dargestellt.

Weii jemand eine Lösung? Ich kenn mich mit den Feinheiten des CSS noch nicht so aus.

Danke und Gruß

Egon

Droelfomator · #2 (**permalink**) 05.04.2006, 16:07

Hier findest du Beispiele, um einen Schatten zu erzeugen:

http://www.alistapart.com/d/onionskin/gallery.html

Unten ist der Link zu dem Artikel, wo erklärt wird, wie es gemacht wird, Schritt für Schritt. Etwas abgewandelt funktioniert das sicher auch mit einem zusätzlichen Rahmen.

phpfuchs · #3 (**permalink**) 11.04.2006, 13:38

Ich hab das Problem mit dem Rahmen unter Verwendung mehrerer DIV's und CSS erreicht:

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
  background-color:#fff;
}

.picture {
  position:relative;
}

.picture .image {
  position:absolute;
  top:18px;
  left:18px;
  background-color:#f4f4f4;
}

.picture .n {
  position:absolute;
  left:18px;
  background:url(border_n.jpg);
  height:18px;
}

.picture .nw {
  position:absolute;
  top:0px;
  left:0px;
  background:url(border_nw.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .ne {
  position:absolute;
  top:0px;
  background:url(border_ne.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .sw {
  position:absolute;
  left:0px;
  background:url(border_sw.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .se {
  position:absolute;
  background:url(border_se.jpg) no-repeat;
  width:18px;
  height:18px;
}

.picture .w {
  position:absolute;
  top:18px;
  left:0px;
  background:url(border_w.jpg);
  width:18px;
}

.picture .s {
  position:absolute;
  left:18px;
  background:url(border_s.jpg);
  height:18px;
}

.picture .e {
  position:absolute;
  top:18px;
  background:url(border_e.jpg);
  width:18px;
}

.picture:hover .image img {
  margin-left:4px;
  margin-top:4px;
}

.picture:hover .n {
  background:url(border_n_hover.jpg);
}

.picture:hover .nw {
  background:url(border_nw_hover.jpg);
}

.picture:hover .ne {
  background:url(border_ne_hover.jpg);
}

.picture:hover .w {
  background:url(border_w_hover.jpg);
}

.picture:hover .sw {
  background:url(border_sw_hover.jpg);
}

.picture:hover .s {
  background:url(border_s_hover.jpg);
}

.picture:hover .e {
  background:url(border_e_hover.jpg);
}

.picture:hover .se {
  background:url(border_se_hover.jpg);
}
</style>
</head>
<body>
<div class="picture" style="width:276px;height:216px">
  <div class="nw"></div>
  <div class="ne" style="left:258px;"></div>
  <div class="sw" style="top:198px;"></div>
  <div class="se" style="top:198px;left:258px;"></div>
  <div class="n" style="width:240px;"></div>
  <div class="s" style="width:240px;top:198px;"></div>
  <div class="w" style="height:180px;"></div>
  <div class="e" style="left:258px;height:180px;"></div>
  <div class="image">
    [img]beispielbild.jpg[/img]
   </div>
</div>
</body>
</html>

Etwas viel Code ist dennoch nötig pro Bild, und ein paar Angaben (top,left,width,height) muss ich per PHP in Abhängigkeit von der Bildgröße einfügen.

Sogar einen Hover-Effekt habe ich erreicht, das Bild taucht nach unten, wenn man mit der Maus drüberfährt, allerdings funktioniert das nur beim Firefox und nicht beim IE. (Opera und Netscape hab ich noch nicht getestet).

Das Resulat läßt sich sehen unter http://www.phpfuchs.de/ext/xhtml/rahmen/.

Hat jemand noch irgendwelche Verbesserungsvorschläge?

mit freundlichen Grüßen

Egon Schmid

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit box-sizing: border-box bei Bildern	web334	CSS	7	03.07.2014 13:15
blauer rahmen um bild nur im ie7	jannemann	CSS	3	05.09.2009 10:03
Bild rahmen bei drüber gehen	rafa	CSS	6	20.07.2009 13:58
Boxlayout mit Bildern als Rahmen	klopfdreh	CSS	1	14.12.2005 11:33
Rahmen mit Abstand um ein Bild	butterhead	CSS	11	07.12.2005 17:48