XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild mit Rahmen aus einzelnen Bildern (http://xhtmlforum.de/showthread.php?t=39475)

phpfuchs 05.04.2006 14:02

Bild mit Rahmen aus einzelnen Bildern
 
Liste der Anhänge anzeigen (Anzahl: 1)
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 05.04.2006 17: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 11.04.2006 14: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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023