Sbin: table-layout: fixed

Hallo...

Ich habe eine Bildergalerie erstellt, in der unten 14 Thumbnails zu sehen sind und oben ein großes Bild, welches sich mittels Jvascript(viewpic), durch ein Klick auf das Vorschaubild, automatisch verändert wird. Da die Bilder verschieden Abmessungen haben, versuche ich sie mittig zu positionieren und mittels table-layout:fixed; zu beschneiden.
Leider war ich mit folgendem Quelltext noch nicht erfolgreich.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
[...]  
<body>  
<table border="0" cellpadding="0" cellspacing="16" id="pic" style="table-layout:fixed;position:absolute;top:142px;margin-bottom:30px;">  
 <tr>  
  <td></td>  
  <td colspan="3" valign="center" align="center" height="298" width="434"><img src="/data/8/1.jpg" id="startbild" name="startbild"/></td>  
  <td colspan="3" align="left" valign="bottom"></td>  
 </tr>  
 <tr id="zeile">  
  <td><a href="javascript:viewpic('/data/8/1.jpg')"><img src="/data/8/1.jpg" width="133" height="91"/></a></td>  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/2.jpg')"><img src="/data/8/2.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/3.jpg')"><img src="/data/8/3.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/4.jpg')"><img src="/data/8/4.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/5.jpg')"><img src="/data/8/5.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/6.jpg')"><img src="/data/8/6.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/7.jpg')"><img src="/data/8/7.jpg" style="width:133px;height:auto;">  
 </tr>  
 <tr id="zeile">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/8.jpg')"><img src="/data/8/8.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/9.jpg')"><img src="/data/8/9.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/10.jpg')"><img src="/data/8/10.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/11.jpg')"><img src="/data/8/11.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/12.jpg')"><img src="/data/8/12.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/13.jpg')"><img src="/data/8/13.jpg" style="width:133px;height:auto;">  
  <td width="133" height="91"><a href="javascript:viewpic('/data/8/14.jpg')"><img src="/data/8/14.jpg" style="width:133px;height:auto;">  
 </tr>  
</table>  
</body>  

Ich hoffe ihr könnt mir helfen und vielen Dank im Vorraus
Sbin

  1. Ich hoffe ihr könnt mir helfen und vielen Dank im Vorraus

    Dein HTML befördert mir nur den Kommentar: Validieren!

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
  2. Hi,

    und mittels table-layout:fixed; zu beschneiden.

    table-layout hat nichts mit Beschneiden zu tun.
    Das könnte man mit overflow oder mit clip hinbekommen.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    [...]

    <tr id="zeile">
      <td width="133" height="91"><a href="javascript:viewpic('/data/8/2.jpg')"><img src="/data/8/2.jpg" style="width:133px;height:auto;">

    3 nichtgeschlossene Elemente - das paßt nicht zum Doctype.
    alt-Attribute fehlen auch.

    <tr id="zeile">

    Diese id wurde weiter oben schon verbraucht.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. »» und mittels table-layout:fixed; zu beschneiden.
      table-layout hat nichts mit Beschneiden zu tun.
      Das könnte man mit overflow oder mit clip hinbekommen.

      Aha kann ich ja maal versuchen..

      »» <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      [...]
      »»  <tr id="zeile">
      »»   <td width="133" height="91"><a href="javascript:viewpic('/data/8/2.jpg')"><img src="/data/8/2.jpg" style="width:133px;height:auto;">

      3 nichtgeschlossene Elemente - das paßt nicht zum Doctype.
      alt-Attribute fehlen auch.

      Mhm stimmt ist mir auch eben aufgefallen. Das liegt daran, dass ich die Thumbnails dynamisch mittels PHP erzeugt habe und beim entfernen des PHP-Codes hab ich diese Stücke wahrscheinlich auch entfernt.

      Vielen dank
      lg
      Sbin

      1. Hi,

        Mhm stimmt ist mir auch eben aufgefallen. Das liegt daran, dass ich die Thumbnails dynamisch mittels PHP erzeugt habe und beim entfernen des PHP-Codes hab ich diese Stücke wahrscheinlich auch entfernt.

        Warum kopierst Du nicht aus dem Browser (View Source ...)?

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.