table-layout: fixed
Sbin
- css
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
Ich hoffe ihr könnt mir helfen und vielen Dank im Vorraus
Dein HTML befördert mir nur den Kommentar: Validieren!
mfg Beat
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
»» 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
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