nicht angemeldet
Gernot Back
Gernot Back
Gernot Back
Gernot Back
Gernot Back
Detlef G.
Gernot Back
Gernot Back
Detlef G.
Hallo zusammen,
ich bin seit gestern dabei verschiedenen Artikel bzw. Neuigkeiten aus einer Datenbank, ein einheitliches Layout zu geben.
Dazu nutze ich eine Tabelle, deren Zellen ich verschiedene geschnittene Teile einer Grafik als Hintergrundbilder zuordne.
Ich hab wohl bei der Erstellung mein Augenmerk zusehr auf den FF gerichtet, sodass der IE kommt mit meinem Quelltext (in meinem erhofften Sinne) kaum klar kommt.
Dazu mal zwei Bilder:
Firefox 1.0.4:
Internet Explorer 6.0.28:
Wie man unschwer erkennt, sorgt mein Quelltext beim IE für ein reichlich verzogenes Bild.
Kann mir jemand bitte einen Tipp geben, ein kleiner Hinweis in die richtige Richtung würdr mir auch schon reichen.
Da ich mir momentan total unschlüssig bin wo mein Fehler liegt, bzw. keine Ahnung habe welcher Teil von meinen Quelltext die IE-Darstellung veranlasst, kann ich leider keinen Auszug hier posten.
Deswegen der Link zur meiner momentanen test.html:
http://home.arcor.de/linus_van_pelt/verzweifelt/test.html
Dort hab ich die betreffende Tabelle zweimal angeben, einmal ohne Rahmen und einmal zum besseren Verständnis der Tabellenstruktur mit Rahmen.
Hierzu wäre wohl auch diese Grafik ganz nützlich:
Man erkennt hoffentlich wie ich mir die Tabelle überlegt habe (der rote Rahmen stellt die zerschnittene Grafik dar).
Da das ganze später mal über PHP mit Inhalten aus einer Datenbank versorgt werden soll, hab ich mir folgendes gedacht:
Zeile 1, ist meine Startzeile der Tabelle und ist immer vorhanden, dann werden die Zeilen 2-12 erstellten, es folgt dann entweder die Zwischenzeile *, falls ein weiterer Artikel (und somit nochmal Zeile 2-12) ausgegeben wird, oder die Schlusszeile 13, falls kein weiterer Artikel mehr ausgeben wird.
Übrigens: Verzeiht mir bitte die blinden Pixel und ähnliche Ungepflogenheiten, ich wußte mir leider nicht anders zuhelfen.
Dennoch habe ich mich bemüht valides HTML zuerstellen.
Schonmals vielen Dank und noch einen angenehmen Tag bzw. Nacht.
Robert
Guten Morgen Robert,
ich habe hier keinen MS IE zur Verfügung, würde aber mal margin, border und padding auf Null setzen.
Mit Gruß
Dada
Hallo Robert,
hast du es schon mit table-layout:fixed in Verbindung mit festen Breiten bei der Tabelle versucht und mit empty-cells:show oder alternativ einem Nonbreaking Space in den leeren Zellen, dessen Schriftgrad du bis auf 3px heruntersetzen kannst (darunter gibt es in einzelnen Browsern Probleme)?
Gruß Gernot
Hallo Dada und Gernot,
vielen Dank für die Tipps!
Nach einigen ausprobieren, benutze ich momentan folgendes:
"non breaking spaces" mit font-size:3px in jeder Zelle [empty-cells:show klappt bei IE6 scheinbar nicht]
(wobei ich mir überlege wieder zu blinden Pixel zurückzukehren, da bei hohen Einstellung für
Schriftgröße des Benutzer, die Leerzeichen mir dann Lücken zw. zwei Reihen verursachen)
padding:0px für tabele, tr und td
Verzicht auf die meistens colspan-Angaben, ich habe jetzt die leeren (dehnbaren) Zellen wieder einzeln im Quelltext aufgeführt und soweit es ging mit rowspan verknüpft [die leeren (dehnbaren) Zellen mit colspan schienen mir im IE die darunterliegenden einzelne Zellen zu verzerren (eigentlich auf eine Breite von 6px definierte Zellen, wurden zu breit dargestellt)].
Vielleicht ist dies momentan etwas overkill (ziemlich viele ?ünnütze? Zeilen), ich werd versuchen nur in der Startreihe die Zellen einzeln anzugeben und in den folgenden Reihen wieder colspan benutzen.
table-layout:fixed, mit und ohne eine width-Angabe für table
[mehr dazu siehe: http://home.arcor.de/linus_van_pelt/verzweifelt/test2.html
Das ist ganz interessant (hab natürlich in Selfhtml recheriert):
Nochmals vielen Dank, ihr hab mich schon ziemlich weiter gebracht und damit sehe ich wenigsten ein Licht am Ende des Tunnels.
Hallo Robert,
An der Zellenhöhe happerts beim IE teils noch immer. (überlegen mir gerade ein Workaround mit einigen absolut postionierten Grafik in den entsprechenden Zellen.
Oder habt ihr da einen besseren Vorschlag?
Also ich arbeite in solchen Fällen von kompliziertem Tabellenlayout ja gerne mit einer Kombination von Hintergrund- und Vordergrundgrafiken. Nicht-wiederholte, wie z.B die Ecken stehen dabei im Vordergrund, wiederholte, wie die Rahmenkanten im Hintergrund, dadurch kannst du auch einiges an Zellen einsparen und brauchst weniger unsinnige nichtumbrechende Leerzeichen.
Für den IE schadet es nichts, auch mal einem TR-Element style="100%" zu verpassen, oder einem TD eine Höhe von 100%, auch wenn die Weite bzw Höhe des Elternelements nicht definiert ist (standardkonforme Browser ignorieren das ja dann ohnehin), so wie du das bei der folgenden, der Jahreszeit gar nicht angemessenen Studie siehst.
http://www.sprachlernspiele.de/engel/matroschka.html
Gruß Gernot
Hallo Gernot,
und mal wieder Danke (wird wohl zur Gewohnheit ;)),
manchmal denke ich wohl zu kompliziert, ich hab mir dein verlinktes Beispiel betrachtet und die Überlegung mit den absoluten Grafik wieder ganz schnell vergessen und wie im Beispiel mit "vertical-align:top/bottom" gearbeitet.
Ich lasse nämlich in den Zellen, die, die Teile der Eckegrafik beinhalten und im IE zu hoch dargestellt wurden, als Hintergrund auch den linken bzw. rechten Rand darstellen und lege im Vordergrund mit dem entsprechenden vertical-align die Eck-Grafik ab.
Klappt wunderbei, danach habe ich versucht soviele Eckgrafik wie möglich den Vordergrund so verschieben, allerdings sind mir bei 4 Grafiken deswegen Fehler in der Zellenbreite aufgetreten - ich die lass betreffenden 4 jetzt weiterhin im Hintergrund. Funktioniert ja so auch.
Auch habe ich die Anzahl "nichtumbrechenden Leerzeichen" minimiert und ich lasse sie hauptsächlich nur in der 1. Tabellezeile vorkommen - so umgehe ich größtenteils Breitenänderung aufgrund sehr hoher Schriftgröße.
Es ist also soweit, dass ich eine Tabelle präsentieren kann, die im FF und IE für mich ähnlich genug aussieht. [Im IE nimmt die Tabelle die gesamte Breite des Anzeigefensters ein, das werde ich wohl später mit einem dieser "conditional comments" und darin enthaltenen width-Angabe später umgehen. (muss mich erst noch reinlesen :)]
http://home.arcor.de/linus_van_pelt/verzweifelt/fast_geschafft.html
Diese Tabelle verkraftet wie gesagt bis zu einem gewissen Grad sehr hohe Einstellungen des Benutzers für die Schriftgröße, über den kritischen Punkt hinweg werden die "nichtumbrechenden Leerezeichen" breiter als eine in der selben Spalte dargestellten Grafik und es kommt zu Lücken zw. den Grafiken.
Aber ich hoffe mal das kein Benutzer solch hohen Einstellung verwendet - wenn nicht muss er damit leben oder ich müsste wieder auf blinde Pixel zurückgreifen, die dann die "nichtumbrechenden Leerezeichen" ersetzen.
Ich muss allerdings hinzufügen, dass die Tabelle im Opera 7.2(und wahrscheinlich auch in höher Versionen) die Tabelle nicht so erhofft dargestellt wird.
Dort werden einige Breiten der Zellen ungünstig dargestellt, sodass es zu Lücken zwischen den Grafiken kommt - und nach 3 Tagen rumbasteln an der Tabelle für IE & FF, bin ich momentan nicht willens weiter daran herumzuschrauben. Auch sind Konquerer und Safari ungetestet, und ich bezweifle sehr, dass mir das Glück einer lückenfreien Darstellung in den Schoß fällt.
Trotzdem allen herzlichen Dank für die Tipps und Hilfestellungen, ich widme mich jetzt erstmal wieder dem eigentlichen PHP-Skript, welches die Tabelle mit Inhalten versorgen soll.
Die Tabelle sollte ja eigentlich nur ein ->Beiwerk<- zum Skript sein - aber nach diesen drei Tagen, werde ich wohl diese Tabelle öfters für ähnliche Aufgaben verwenden. ;)
Gruß
ein glücklicher und zufriedener
Robert
Hallo Robert,
Dort werden einige Breiten der Zellen ungünstig dargestellt, sodass es zu Lücken zwischen den Grafiken kommt - und nach 3 Tagen rumbasteln an der Tabelle für IE & FF, bin ich momentan nicht willens weiter daran herumzuschrauben. Auch sind Konquerer und Safari ungetestet, und ich bezweifle sehr, dass mir das Glück einer lückenfreien Darstellung in den Schoß fällt.
Am einfachsten ist dein Vorhaben wohl mit einem verschachtelten Tabellenlayout zu realisieren. Du solltest nicht versuchen, alles in eine Tabelle zu packen. Ich habe mal aus deinen Bereichen zur Anzeige des Titels und des Autors eigene kleine Tabellen gemacht. und diese dann in die Rahmenzellen der großen Inhaltstabelle gesetzt mit passendem align und float.
Im CSS sieht es im hochgeladenen Beispiel noch sehr wüst aus, da kann man statt mit Inline-Styles noch viel mit Klassen- und Mehrfachklassenzuweisung regeln, wodurch das Modul, das du ja wahrscheinlich x-mal auf einer Seite haben möchtest, dann auch deutlich schlanker werden wird. Ich hoffe du blickst durch:
http://www.sprachlernspiele.de/selftests/tablelayout/complex.html
Gruß Gernot
Hallo Gernot.
http://www.sprachlernspiele.de/selftests/tablelayout/complex.html
Ich denke, folgenden Bildern sollte noch ein text-align:right; zugewiesen werden, da sie sonst im Opera weiter links schweben:
und 
Gruß, Ashura
Hallo Ashura,
http://www.sprachlernspiele.de/selftests/tablelayout/complex.html
Ich denke, folgenden Bildern sollte noch ein
text-align:right;zugewiesen werden, da sie sonst im Opera weiter links schweben:
»» und
in meinem Opera 7.54 unter Win98 aber nicht, welche Version benutzt du?
Was ich allerdings bei Opera seltsam finde, ist die Tatsache, dass diezu Demonstrationszwechen zugewiesene Borders im unteren Beispiel das align durcheinanderbringen. Das ist in meinem Mozilla 1.7.2 und im IE6 nicht der Fall.
Gruß Gernot
Hallo Gernot.
in meinem Opera 7.54 unter Win98 aber nicht, welche Version benutzt du?
Wirf einfach mal einen Blick in meine Signatur. ;)
Solltest du diese ausgeblendet haben: Opera 8.0
Ansicht:
Was ich allerdings bei Opera seltsam finde, ist die Tatsache, dass diezu Demonstrationszwechen zugewiesene Borders im unteren Beispiel das align durcheinanderbringen.
Auch ohne die Rahmen, falls du die runden Ecken damit gemeint haben solltest.
Das ist in meinem Mozilla 1.7.2 und im IE6 nicht der Fall.
In meinem FF 1.0.4 auch nicht.
Gruß, Ashura
Hallo Ashura,
danke, ich hatte noch einen Fehler drin, den mir selbst Mozilla nicht übelgenommen hat (vielleicht ist Opera ja doch der bessere Browser):
Überall da, wo in Bezug auf die Hintergrundgrafiken repeat-x steht muss natürlich auch width:100% stehen, damit sich die Zelle streckt.
jetzt müsste aber auch in Opera alles stimmen.
http://www.sprachlernspiele.de/selftests/tablelayout/complex.html
Ich räum dann später unter dem angegebenen Link noch die Inline-Styles auf und mach knackige Klassen draus, (so kann man das ja nicht stehen lassen) habe aber im Moment keine Muße dazu.
Gruß Gernot
Hallo Gernot.
danke, ich hatte noch einen Fehler drin, den mir selbst Mozilla nicht übelgenommen hat (vielleicht ist Opera ja doch der bessere Browser):
Das fragst du noch? *scnr* ;)
jetzt müsste aber auch in Opera alles stimmen.
Ja, das tut es.
Gruß, Ashura
Hallo Gernot
jetzt müsste aber auch in Opera alles stimmen.
http://www.sprachlernspiele.de/selftests/tablelayout/complex.html
Dort ja, bei Schriftvergrößerung im Firefox passiert es aber trotzdem noch.
Die linken Ecken sollten zur Sicherheit ein text-align:right mitbekommen.
Auf Wiederlesen
Detlef
Hallo Detlef.
Die linken Ecken sollten zur Sicherheit ein text-align:right mitbekommen.
Siehe https://forum.selfhtml.org/?t=107566&m=668911. ;)
Gruß, Ashura
Hallo Ashura, hallo Detlef.
ist es denn jetzt OK? Mei, ist Tabellenlayout schwierig, wenn auch, wie ich immer noch meine, hier die einfachste Lösung. (Ich hab das Pferd wohl von hinten aufgezäumt: Hätte ich gleich Klassen eingerichtet, hätte ich mir viel Arbeit erspart.)
Gruß Gernot
Hallo Gernot.
ist es denn jetzt OK?
Noch nicht ganz. Bei einer Vergrößerung im FF weichen die obere und die untere Tabelle (abgesehen vom Rahmen) von einander ab.
Oben werden folgende Bilder falsch platziert:
und 
(bei Titel) und (bei Autor).
Die untere bleibt zusammenhängend.
Gruß, Ashura
Hallo Ashura,
Noch nicht ganz. Bei einer Vergrößerung im FF weichen die obere und die untere Tabelle (abgesehen vom Rahmen) von einander ab.
... aber jetzt, nach der letzen Änderung schon, oder?
Gruß Gernot
Hallo Gernot.
... aber jetzt, nach der letzen Änderung schon, oder?
Ja, nun bleibt alles da wo es hingehört und skaliert sauber.
Gruß, Ashura
Hallo Gernot,
Überall da, wo in Bezug auf die Hintergrundgrafiken repeat-x steht muss natürlich auch width:100% stehen, damit sich die Zelle streckt.
Das mit den 100% Weite ist bei einem etwas anderen Ansatz glaube ich doch entbehrlich: Nachdem ich nun doch von vier kleinen Ausnahmen abgesehen, ausschließlich mit Hintergrundgrafiken und wegen Weiten- und Höhen-Angaben in den Zellen auch ohne Nonbreaking Spaces auskomme, kann ich auch auf eine Angabe zu Font-Size und auf Text-Align verzichten. Die vier kleinen Vordergundgrafiken sind nötig als Abdeckung für eine in derselben Zelle zugewiesene Hintergrundgrafik. Bei Aufteilung in drei einzelne Zelln mit jeweils nur einer Hintergrundgrafik streikte Opera7.54, was das Erzwingen einer festen Höhe anging.
Ich räum dann später unter dem angegebenen Link noch die Inline-Styles auf
Das habe ich nun gemacht. Jetzt ist halt der CSS-Bereich recht fett geworden, das HTML-Modul, das ja PHP-generiert wohl mehrfach wiederholt werden soll, sieht dafür aber umso schlanker aus.
Deshalb habe ich zum Vergleich auch mal einen eigenen Link für die neue Version eingerichtet:
http://www.sprachlernspiele.de/selftests/tablelayout/complex2.html
Sicher ist sicher, wer weiß welche Browser da vielleicht wieder Darstellungsprobleme haben. Auf Netscape 4.X wurde bei diesem Ansatz keine Rücksicht genommen. Ich habe ansonsten getestet mit IE6, Netscape 7.1, Mozilla 1.7.2 und Opera 7.54. Mit IE5.1 gibt es bei diesem Ansatz offensichtlich Probleme mit dem Cellspacing und/oder Cellpadding. Wahrscheinlich mögen ältere IEs dann doch lieber Vordergrundgrafiken und/oder zumindest mit gefüllte Tabellenzellen.
Gruß Gernot
Hallo Ashura
In meinem FF 1.0.4 auch nicht.
Wenn du die Schrift sehr stark vergrößerst auch dort (zumindest in meinem).
Auf Wiederlesen
Detlef
