Home     Tipps und Tricks      


           Thumbnails - Vorschaubilder

Sehr praktisch für Galerien, Bildershows, Links, Übersichtseiten etc, die Bilder werden von Originalgroesse alle auf gleiche Groesse getrimmt, innerhalb des div id="..." tags, nur leicht verzerrt.
      Erste Zeile unter den Bildern befindet sich im head der Datei, das div tag im body der Datei dort wo die Bilder angezeigt werden. padding bezeichnet den Abstand zwischen Bild und Rahmen, margin den Aussenabstand vom Bild.




  #thumbs1 img {border:1px solid #888; width:100px; height:80px; margin:5px; }
....<div id="thumbs1">Bilder, Bilder, Bilder</div>....




  #thumbs2 img {border:1px solid #999999; width:80px; height:50px; margin:5px; padding:3px; }
....<div id="thumbs2">Bilder, Bilder, Bilder</div>....




#thumbs3 img {border-style:dotted; border-width:3px; border-color:#ccff33; width:90px; height:60px; padding:3px; margin:5px; }
....<div id="thumbs3">Bilder, Bilder, Bilder</div>....




#thumbs4 img {border:3px ridge #3366ff; width:100px; height:80px; padding:3px; margin:5px; }
....<div id="thumbs4">Bilder, Bilder, Bilder</div>....

Home       Tipps und Tricks