# Runder Rahmen für Thumbnail



## Bicko (23. August 2007)

Hi,

ich habe lange überlegt in welchen Bereich meine Anfrage gehört, hoffe ich bin hier richtig.

Ich habe in PHP ein Image Upload Script geschrieben und möchte nun eine kleine Gallerie erstellen. Natürlich sollen es alles Thumbnails werden. Ich möchte aber keine schnöden Bilder anzeigen sondern hätte gerne einen abgerundetet Rahmen und unterhalb der Bilder soll ein kleiner Text stehen. Nun habe ich 2 Fragen.

1. Ich kann ja nicht alle Thumbs erstmal in PS bearbeiten, sondern es geschieht "on the fly". Wie bekomme ich dann einen solchen Rahmen darum und gibt es das irgendwo im Netz wo ich es mir mal anschauen kann? Habe es mal gesehen aber kann mich einfach nicht mehr an die URL errinnern.

2. Wie ordne ich denn am Besten die Bilder in einer Reihe und Text darunter mit CSS an? Über dt, dd etc oder einzelne divs die dann gefloatet werden... 

Würde mich freuen über ein paar Tips. Vielen dank im Voraus.

Gruss Bicko


----------



## Maik (24. August 2007)

Hi,

es gibt da unterschiedliche Ansätze, um einen runden Rahmen zu erzeugen, wie z.B.:


http://www.cssplay.co.uk/boxes/snazzy.html
http://www.html.it/articoli/niftycube/index.html

Basierend auf Stu Nicholls' "Snazzy Borders" könnte das dann so aussehen:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Snazzy Borders</title>

<style type="text/css">
#gallery {
margin:0;
padding:0;
list-style:none;
}

.xsnazzy {
background:transparent;
width:100px; /* orientiert sich an der Grafikbreite */
float:left;
margin:0 5px;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {
display:block;
background:#fff;
border:0 solid #08c;
border-width:0 1px;
}

.xboxcontent img {
display:block;
margin: 0 2px;
}
</style>
</head>

<body>

<ul id="gallery">
  <li class="xsnazzy">
      <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
      <span class="xboxcontent"><img src="..." alt=""></span>
      <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
      <br>foobar
  </li>
  <li class="xsnazzy">
      <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
      <span class="xboxcontent"><img src="..." alt=""></span>
      <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
      <br>foobar
  </li>
  <li class="xsnazzy">
      <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
      <span class="xboxcontent"><img src="..." alt=""></span>
      <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
      <br>foobar
  </li>
</ul>

</body>
</html>
```


----------



## Bicko (24. August 2007)

Hi Maik,

danke für die Antwort und die links. Das finde ich schonmal sehr interessant. Ich habe aber vor einiger Zeit mal was gesehen von "einen Rahmen über ein Bild legen". Das scheint mir etwas einfacher zu sein für die Bilder.

Kennst jemand eine URL wo das beschrieben wird? CSS wollte ich rein für das anorden verwenden.

Deine Lösung kann ich aber sehr gut für eine anderen bereich einsetzen. Also nochmal vielen Dank. Wenn jemand noch einen Ansatz hat würde ich mich freuen davon zu hören. Vor allem wenn es sich um das überlagerte Bild geht.

Gruss


----------



## ecology (25. August 2007)

Hi!

Vielleicht kannst du ja einen Rahmen mit der GD-Lib von Php erstellen, das wäre auch noch eine Möglichkeit.


----------

