nicht angemeldet
Tabellen als Layoutinstrument
Hi, Ihr Kämpfer da draußen,
es sind doch sicher einige unter Euch, die auf Layouts mit Tabellen schwören. Mein Problem ist, dass ich mehrere Graphiken auf einer Seite lückenlos aneinanderfügen möchte. Dachte, das könnte ich mit einer Tabelle und exakt angegebenen Zellengrößen machen.
Das war aber scheinbar ein Satz mit X. Microsoft's IE (sowohl IE4 als auch IE5) fügt eigenmächtig zu jeder Zelle rundum einen Rand von 2 Pixeln in der Hintergrundfarbe der jeweiligen Zelle hinzu, außerdem noch einen Rand von 2 Pixeln in der Farbe des Tabellenhintergrunds um die gesamte Tabelle. Normalerweise fällt dieser Rand nicht auf, außer wenn man für einzelne Zellen einen anderen Hintergrund hat als für die gesamte Tabelle. Aber die Maße stimmen dann halt nicht. Vor allem weiß ich nicht, ob ich mich auf diese 2 Pixel verlassen kann, oder ob das am Ende nur ein systemabhängiges Maß ist.
Mit Netscape (V4.75) sieht's übrigens ähnlich, aber nicht ganz genauso aus. Er fügt auch ungebeten etwa zwei Pixel Abstand ein, lässt diesen Rand aber farblos (d.h. in der Hintergrundfarbe des umgebenden Dokuments). Ist nicht ganz so auffällig, aber genau so'n Murx.
Probiert's mal mit folgendem Code-Schnipsel:
<TABLE BORDER="0" WIDTH="400" BGCOLOR="#FF0000">
<TR><TD>
Diese Zelle ist rot hinterlegt, weil das die
Hintergrundfarbe der ganzen Tabelle ist.
</TD></TR>
<TR><TD BGCOLOR="#00FF00">
Diese Zelle hat ihre eigene Hintergrundfarbe Grün,
hat aber außerdem einen roten Rand, den sie nicht
haben dürfte.
</TD></TR>
</TABLE>
Wer kann dieses Phänomen erklären? Oder wer hat vielleicht sogar eine Lösung, wie man diese unerwünschten Extra-Ränder wegkriegt? Vor allem an einer IE-Lösung bin ich sehr interessiert - Netscape ist mir da ausnahmsweise ziemlich wurscht.
Gruß,
Martin
-
hallo,
versuch es mal mit folgenden angaben:
<TABLE BORDER="0" WIDTH="400" BGCOLOR="#FF0000" cellpadding="0" cellspacing="0">-
versuch es mal mit folgenden angaben:
<TABLE BORDER="0" WIDTH="400" BGCOLOR="#FF0000" cellpadding="0" cellspacing="0">Hmm, glaubst Du, das hätte ich nicht schon versucht? Auch das Äquivalent als STYLE-Attribut hatte ich schon. Ohne Erfolg.
Trotzdem danke!
Martin
-
Hmm, glaubst Du, das hätte ich nicht schon versucht?
naja, da ichs in deinem code nicht gesehen habe, irgendwie schon..
Auch das Äquivalent als STYLE-Attribut hatte ich schon. Ohne Erfolg.
Trotzdem danke!
Martin
np:)
bei mir funktioniert es übrigens bestens (ie 5.5)
aber was du noch versuchen kannst:
schreib den html-code für die tabelle mal in eine zeile und schau dann, ob sich was tut.
-
-
-
HI Martin,
Wer kann dieses Phänomen erklären? Oder wer hat vielleicht sogar eine Lösung, wie man diese unerwünschten Extra-Ränder wegkriegt? Vor allem an einer IE-Lösung bin ich sehr interessiert - Netscape ist mir da ausnahmsweise ziemlich wurscht.
schau dir mal folgenden Link an da siehts du zum Beispiel eine Lösung deines Problems. Sofern ichs richtig vertanden habe:
Die Site:
http://atlas.ee.fhm.edu/multimedia/gruppen/mm3/Eine Page mit perfekt aneinander geriehten Bildern !!
http://atlas.ee.fhm.edu/multimedia/gruppen/mm3/contact.htmBis denn ... Starbuck
-
das phänomen ist nich nur ein einziges, sondern gleich mehrere.
also zuerst mal, hat jede tabelle standardmässig cellpadding="2" und cellspacing="2" eingestellt, die beiden werte musst du i nder tabelle auf 0 setzten. das zweite phänomen wird dann auftreten, wenn du die bilder zu links machst. nämlich insofern, dass dann auch ein eigner rand angezeigt wird. um das zu umgehen, für in jedes <img> element ein border="0" ein also ca. so <img src="bild.gif" boder="0">
meien alternative: keine tabelle, es geht genauso ohne: (angenommen, alle bilder sind gleich hoch)<img src="bild1.gif border="0"><img src="bild2.gif" border="0"><img src="bild3.gif border="0"><br><!-- ab hier in die nächste zeile -->
<img src="bild4.gif border="0"><img src="bild5.gif" border="0"><img src="bild6.gif border="0"><br>
blablabla-
Hallo Matthias
meien alternative: keine tabelle, es geht genauso ohne:
<img src="bild1.gif border="0"><img src="bild2.gif" border="0"><img src="bild3.gif border="0"><br><!-- ab hier in die nächste zeile -->
<img src="bild4.gif border="0"><img src="bild5.gif" border="0"><img src="bild6.gif border="0"><br>Das stimmt nicht ganz (glaub ich). Mit Deiner Lösung kannst Du ein Problem bekommen, wenn die Fensterbreite zur Darstellung der Bilder in einer Zeile nicht ausreicht. Während die Einbindung in eine Tabelle dazu führt, daß ein Scrollbalken angezeigt wird, wird bei Deiner Methode einfach ein Bild auf die nächste Zeile umgebrochen -> das Layout ist im Eimer. Also doch lieber Tabellen.
grüße
axel-
hallo
Hallo Matthias
meien alternative: keine tabelle, es geht genauso ohne:
<img src="bild1.gif border="0"><img src="bild2.gif" border="0"><img src="bild3.gif border="0"><br><!-- ab hier in die nächste zeile -->
<img src="bild4.gif border="0"><img src="bild5.gif" border="0"><img src="bild6.gif border="0"><br>Das stimmt nicht ganz (glaub ich). Mit Deiner Lösung kannst Du ein Problem bekommen, wenn die Fensterbreite zur Darstellung der Bilder in einer Zeile nicht ausreicht. Während die Einbindung in eine Tabelle dazu führt, daß ein Scrollbalken angezeigt wird, wird bei Deiner Methode einfach ein Bild auf die nächste Zeile umgebrochen -> das Layout ist im Eimer. Also doch lieber Tabellen.
hmmm.. stimmt allerdings, man könnte versuchen, das ganze mit <nobr> (wird der eigentlich noch unterstützt?) zu beheben, nur ich zweifle sehr an dem erfolg dieses unterfangens. Außerdem bin ich nicht davon ausgegangen, dass das bild so groß sein soll.
wobei, wenn das bild nicht allzugroß ist, würd ichs auf diese art machen, weil damit mindestens ein drittel der schreibarbeit wegfällt. (eine tabelle mit verschiedenen attributen, bestimmten fenstergrößen usw.)mfg
Matthias huttargrüße
axel
-
-
-
Hallo Martin!
Wie wo2001 schon gesagt hat, müssen die Attribute cellspacing und cellpadding ausdrücklich mit dem Wert "0" angegeben werden: cellspacing="0" bedeutet, dass die Zellen lückenlos anander gereiht werden; cellspacing="0", dass der Zelleninhalt direkt am Zellenrand beginnt - also nicht in der Zelle "schwebt".
Warum diese Werte von den Browsern nicht defaultmässig bei fehlenden Angaben gleich auf "0" gesetzt werden, ist unverständlich, hinzu kommt, dass der eine Browser cellpadding defaultmässig auf 0 hat und cellspacing nicht, der andere handelt es umgekehrt ;-)
Gewöhne Dich gleich an, bei schreiben des Table-Tags diese Angaben zu machen. cellspacing und cellpadding öffnen beim Tabellelayout sehr viele Möglichkeiten.
Patrick
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>-
...sollte man auf Beiträgen antworten!
cellspacing="0" bedeutet, dass die Zellen lückenlos anander gereiht werden; cellspacing="0", dass der Zelleninhalt direkt am Zellenrand beginnt - also nicht in der Zelle "schwebt".
^^Dieser Satz ist falsch, dieser hier richtig:
cellspacing="0" bedeutet, dass die Zellen lückenlos anander gereiht werden; **cellpadding="0"**, dass der Zelleninhalt direkt am Zellenrand beginnt - also nicht in der Zelle "schwebt".
Patrick
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
-
-
Hallo
Ich hab zwar keine Hintergrundfarbe, aber sonst keine Probleme mehrere Graphiken in einer Tabelle aneinanderzusetzen. Bei mir hanbdelt es sich um eine Karte mit Eisenbahnlinien. Kannst Du Dir anschauen unter http://www.bahnstrecken.de/indexkarte.htm.
bis dann
Axel -
Hi, Ihr Kämpfer da draußen,
es sind doch sicher einige unter Euch, die auf Layouts mit Tabellen schwören. Mein Problem ist, dass ich mehrere Graphiken auf einer Seite lückenlos aneinanderfügen möchte. Dachte, das könnte ich mit einer Tabelle und exakt angegebenen Zellengrößen machen.
Daß das Problem mit dem leidigen cellpadding, -spacing zusammenhängt, sagt ja jeder hier, deswegen mal was anderes:
Wie wäre es mit absoluten Positionieren?
Einfach die Bilder in ein div packen und diese mit CSS absolut positionieren. Hat wie in der Tabellenversion den Vorteil, daß ein unerwünschter Seitenumbruch stattfindet und macht einen nicht so abhängig von der Tabelle, die ja eigentlich nicht als Layoutinstrument gedacht ist.
Ach ja, margin und padding der divs sollten auf 0 gesetzt werden, damit die Bilder nahtlos aneinandergrenzen und die Positionierungswerte passen - der IE interpretiert das padding falsch, er nimmt nämlich die width (bzw height) und zieht dann das padding innen ab, anstelle das daraufzurechnen, wie Opera und Mozilla das W3C-konform tun.Gruß, Tim