zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild mit Rahmen aus einzelnen Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2006, 13:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2006
Beiträge: 11
phpfuchs befindet sich auf einem aufstrebenden Ast
Standard Bild mit Rahmen aus einzelnen Bildern

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
Angehängte Grafiken
Dateityp: jpg bildrahmen.jpg (22,7 KB, 139x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2006, 16:07
Neuer Benutzer
neuer user
 
Registriert seit: 27.01.2006
Beiträge: 20
Droelfomator befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.04.2006, 13:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2006
Beiträge: 11
phpfuchs befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild mit Rahmen aus Bild Holger (HMR) CSS 3 21.05.2008 12:55
IE7- & IE6-Probleme bei Bild und Rahmen... Ragnaroek CSS 2 21.04.2008 15:02
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 12:32
Rahmen mit Abstand um ein Bild butterhead CSS 11 07.12.2005 17:48
Rahmen um ein Bild (jpg, png, gif) ziehen Don Stefano CSS 8 30.07.2005 21:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:14 Uhr.