Bild mit Tabellenzelle skalieren
Daisy
- html
0 Gernot Back0 Daisy0 Gernot Back0 Daisy
Hallo Forumgemeinde,
ich habe ein Problem mit IE6 welches mir schon Kopfschmerzen bereitet: Wenn ich eine Tabelle mit 100% Breite mit nur einer Zeile und 3 Spalten erzeuge, in die mittlere Spalte etwas Text packe und in die äußeren Spalten je ein Bild, wie kann ich erreichen daß die beiden Bilder (jeweils nur ein Strich) automatisch auf die Größe der Tabellenzelle (horizontal) skaliert bzw. gestaucht werden ?
Ich habe es mit width 100% versucht, html in der tabelle und als css Zuweisung, in Firefox kein Problem, in IE6 wird das Bild aber nur bis zu seiner wirklichen Größe gestaucht, kleiner nicht. Ich würde es gerne noch kleiner stauchen. Die Tabelle ist bereits eine Notlösung...
Danke für jegliche Hilfe im Vorraus,
Daisy
Ps: Anbei ein Auszug:
<table width="100%" border="0" cellpadding="0" cellspacing="0" id=Footer>
<tr>
<td><img src="grad_left.PNG" style="width:100%; height:18px"/></td>
<td align="center" width="210px" height="40px">
<span style="white-space:nowrap;">
<a href="#Link" title="Terms & Conditions">Terms & Conditions</a> | <a href="#Link" title="Privacy Policy">Privacy Policy</a></span></td>
<td><img src="grad_right.PNG" style="width:100%; height:18px"/></td>
</tr>
</table>
Hallo Daisy,
Wenn es sich nur um einen Strich handelt, warum arbeitest du denn dann nicht mit einer nur in der Horizontalen wiederholten 18 Pixel hohen Hintergrundgrafik?
Danke für jegliche Hilfe im Vorraus,
Keine Ursache im Nachchhinein
Gruß Gernot
Hallo Gernot,
Wenn es sich nur um einen Strich handelt, warum arbeitest du denn dann nicht mit einer nur in der Horizontalen wiederholten 18 Pixel hohen Hintergrundgrafik?
Vielen Dank für Deine Antwort. Es handelt sich genauer gesagt um jeweils einen Verlauf der in rechten Tabellenzelle nach rechts verläuft und in der linken Zelle nach Links. Diese beiden Bilder sollen sich entsprechend skalieren, die beiden Links dazwischen sollen dabei immer möglichst nah an den Verläufen stehen bleiben, d.h. die mittlere Zelle ist in Ihrer Breite fest definiert. Auch hier ignoriert der IE meine Angaben für das padding auf beiden Seiten zwischen den Links und den Bildern. Die Verwendung einer Hintergrundgrafik für die Zelle fällt leider aus weil sich dann das Bild gar nicht mehr skaliert.
Mein Problem besteht darin daß ich nicht sicher bin wie ich den mittleren Textbereich in der Breite definieren soll, die Bilder mit jeweils 49.99% width sind kein Problem, solange ich die Mittlere Zelle nicht mit Text (den beiden Links) fülle. Hier benötige ich eine fixe Angabe für die Breite in Pixel, die ich allerding wieder von der Prozentangabe für die beiden äußeren Zellen abziehen müßte wenn daß geht ?!?
Ich bin auch für eine Lösung mit divs aber hierbei macht der IE6 noch mehr Zicken als mit einer Tabelle.
Kann man denn da gar nichts machen ?
Trotzdem vielen Dank für die Hilfe und ein schönes Wochende !
Daisy
Hallo Daisy,
Wenn es sich nur um einen Strich handelt, warum arbeitest du denn dann nicht mit einer nur in der Horizontalen wiederholten 18 Pixel hohen Hintergrundgrafik?
Es handelt sich genauer gesagt um jeweils einen Verlauf der in rechten Tabellenzelle nach rechts verläuft und in der linken Zelle nach Links. Diese beiden Bilder sollen sich entsprechend skalieren, die beiden Links dazwischen sollen dabei immer möglichst nah an den Verläufen stehen bleiben, d.h. die mittlere Zelle ist in Ihrer Breite fest definiert.
Mit Tabellen brauchst Du da gar nicht zu arbeiten, aber wenn es für Dich einfacher ist, kannst Du den Effekt natürlich auch über ein Tabellenlayout erreichen:
Die Verläufe solltest Du dabei nicht skalieren (das sieht ohnehin nicht schön aus, weil Verläufe dann stufig werden), stattdessen würde ich die Verläufe jeweils links bzw. rechts unskaliert neben die Footer-Links platzieren vor einen Hintergrund, bei dem die jeweils letzten Pixel der Verläufe in der Horizontalen wiederholt werden. Mit Rücksicht auf ältere Browser sollte diese horizontal wiederholte Grafik ohne Verlauf mindestens 5 Pixel breit sein.
Gruß Gernot
Hallo Gernot,
wie gesagt, an die Tabelle wäre ich nicht gebunden. Die Verläufe skalieren sich einwandfrei wenn man sie von Anfang an breit genug macht. Wichtig dabei ist mir nur daß die links in der Mitte mit dem Body horizontal zentriert sind. Die beiden Verläufe sollen dann den Freiraum auf beiden Seiten automatisch in der vollen Breite ausfüllen, bis zum Rand des Browserfensters. Ein Beispiel, jedoch mit statischer Breite ist der Footer hier: http://www.firetrust.com/
Ich will selbiges nur mit variabler Breite der Verläufe links und rechts machen, wenn es nicht unmöglich ist. Die Verläufe ohne die Links mit je 50% Breite sind kein Problem, sobald ich aber die Links dazwischen einfüge bekomme ich immer den horizontalen Scrollbalken im Browser angezeigt. Ich müsste also die Breite der Links in % angeben bzw. noch von den jeweils 50% Breite der Verläufe abziehen.
Hier ist mein html ohne Tabellen. Wie kann ich jetzt die Links (mit fester breite) dazwischen setzen ?
<div style="margin-left:auto; margin-right:auto; height:40px; background-color:#00CCFF; text-align:center; white-space:nowrap">
<img src="grad_left.PNG" height="18" style="width:49.99%"/><img src="grad_right.PNG" height="18" style="width:49.99%"/></div>
vielen Dank für Deine Unterstützung bei diesem Problem.
Daisy.