Runder Rahmen für Thumbnail

Status
Nicht offen für weitere Antworten.
B

Bicko

Erfahrenes Mitglied
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
 
Hi,

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


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

Code: 
<!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>
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück