Darstellungsproblem in mobilen Browsern

Hallo,

ich benutze für eine Artikelauflistung eine Tabelle mit 2 Spalten. In der linken Spalte ist jeweils das Bild, in der rechten Spalte der dazugehörige Text, welcher in normaler Darstellung 4 Zeilen hat, sodass er genauso hoch ist wie die Grafik.


Bei mobilen Browsern (Iphone) wird die Darstelung allerdings verzogen, da der Text in der Breite gestaucht wird:


Anhang 5730


Nicht nur das es so unschön aussieht stört, sondern absolut positionierte Elemente sind dadurch an einer völlig falschen Position.


Was kann ich da tun?


Gruss

Hallo,

das soll jetzt nicht altklug klingen, aber bei Webseiten, die auch auf mobilen Endgeräten^^ problemlos dargestellt werden sollen, sollte so weit wie möglich auf absolute-positionierte Elemente verzichtet werden, das macht einfach vieles einfacher. Und in den meisten Fällen kann man "position: absolute;" auch umgehen bzw. anders lösen. Aber genug geklugscheißert (von Tabellen zur Strukturierung von regulären Inhalten wollen wir gar nicht anfangen) ;)

Du kannst versuchen, der Tabelle eine feste Breite in Pixel zu geben. Es besteht jedoch auch hier die Möglichkeit, dass der mobile Browser das ignoriert/anpasst. Was aber auf alle Fälle (rein optisch) hilft ist das Bild via "valign=top" nach oben auszurichten, dann schaut's wenigstens etwas besser aus.

Ich würde das Darstellungs-/Realisierungskonzept überdenken, wenn Tabellen & absolut positionierte Elemente zum Einsatz kommen. Das sind keine wirklich aktuellen Webtechnologien, weswegen du früher oder später wahrscheinlich noch auf ganz andere Probleme stoßen wirst.

Ich drück dir die Daumen,
Alex

Danke für die Antwort.


Eine feste Breite hat leider nichts gebracht. Und das valign ist schon mal besser, aber immer noch nicht ansehbar. :(


Ob ich hier für die Darstellung ne Tabelle oder divs benutze sollte doch an der Text-Stauchung nichts ändern oder?

Und welche Nachteile hat die Tabelle hier denn noch, wenn du schreibst "von Tabellen zur Strukturierung von regulären Inhalten wollen wir gar nicht anfangen"

Ich finds angenehm, da ich diese im Artikel-Editor relativ einfach bearbeiten kann.


Gruss

Hallo,

für guten Code sollten Tabellen nur für die Darstellung von tabellarischen Daten genutzt werden (also z.B. Wertevergleichen, Finanzdaten, technischen Daten o.Ä.). Inhaltliche Strukturierung von anderen Daten (also z.B. rechtsbündigen Text, 2-/3-/n-spaltigen Text, Bild-in-Text-Integration o.Ä.) mittels Tabellen wurde vor 3-x Jahren gemacht, soetwas "tut man heute nicht mehr". Ich weiß, das klingt wenig greifbar, aber das gehört zu modernen Entwicklungstechniken dazu. Und die Vorteile von gut strukturiertem HTML-Code machen sich sehr schnell bemerkbar (spätestens wenn's an die Aufbereitung für Handys & Tablets geht). Das ist jedoch ein weites Feld (Stichwort: Webstandards) und würde den Rahmen hier sprengen. Ich empfehle dir hier, dich hier mittels Google weiterzubilden, der Aufwand lohnt sich auf alle Fälle!

Mögliche Anlaufstellen:
http://www.webkrauts.de/
http://www.smashingmagazine.com/

Und ja, das der Text auch in einem DIV nicht wie gewünscht aus dem Sichtbereich heraus ragt hatte ich mir schon gedacht, es war, wie gesagt, ein Versuch. Das Ding ist halt, dass der gleiche Text nicht auf einmal mit weniger Platz auskommen kann, das funktioniert ja nicht. D.h. du musst dir ein Konzept überlegen, wie die sich Inhalte der Seite bei weniger verfügbarem Platz "verhalten". Eine Möglichkeit wäre z.B., dass das Bild ÜBER dem Text steht und über die gesamte Breite geht. So bekommst du auch eine direkte Zuordbarkeit hin bei gleichzeitig weniger Platzverbrauch in der Breite. Und du bist unabhängiger von der tatsächlichen Textlänge. Nur wird das dann wieder schwer umzusetzen, wenn die Daten in Tabellen abgelegt sind (Tabellenzelle 1 über Tabellenzelle 2 zu bekommen ist recht, ähm, aufwändig^^). Was uns wieder zum 1. Punkt führt ;)
Ich hoffe, ich konnte dich ein wenig inspirieren ;)

Alex