Probleme mit Tabellen

[Andre_Ta]

Hallo zusammen Nachdem ich meinen Account nicht mehr finde musste ich mich neu anmelden.

Folgendes: ich habe eine CSS-gesteuerte HTML-Seite.

Auf einer der Seiten habe ich eine eingefügte Tabelle mit 3 Spalten. In Firefox sieht das ganz passabel aus, der Interent Explorer verschiebt mir die Seite etwas zu schmal und der text rutscht logisch nach unten, die Tabelle hat eine ganz andere Position (die Seitenausrichtung ist optimal, nur die Position OBEN und UNTEN nicht).

Diese Tabelle ist definiert mit position: absolute und der Abstände von oben und den Seiten... Passt bei Firefox. Doch beim IE und auf Smartphones ist die Positionierung der Tabelle verschoben (nach Oben/Unten) Verstehe ich auch teils da "absolute" und der länger nach unten ausgerictete Text. Schreibe ich relative, verschiebt sich die Tabelle UNTER das unterste Ende der eigentlichen Text-Seite, jedoch noch vor den Fuß. Das sieht nicht...

Was kann ich machen, dass diese Tabelle direkt nach meinem Text erscheint und auch bei der "Textverschiebung durch den Browser" mit nach unten rutscht und direkt unter dem Text bleibt? Die Seite ist nicht Java oder PHP-Programmiert, ist nur HTML mit CSS-Datei.

Danke Euch

[Matthias Apsel]

Hallo Andre_Ta,

Ohne Kenntnis der Seite ist eine zielgerichtete Hilfe schwierig.

Bis demnächst
Matthias

[Msass]

Ohne Kenntnis der Seite ist eine zielgerichtete Hilfe schwierig.

Zum Verständnis: Mit "Kenntnis der Seite" ist in erster Linie der Quellcode/Link zur Seite gemeint.

[MrMurphy1]

Hallo,

du mißbrauchst Tabellen zum Layouten.

Außerdem verwendest du position:absolute ohne zu wissen was du damit auslöst.

Also: Auf Tabellen und position:absolute verzichten.

Gruss

MrMurphy

[Der Martin]

Hi,

Folgendes: ich habe eine CSS-gesteuerte HTML-Seite.

ähm, was? "CSS-gesteuert" habe ich bisher auch noch nicht gehört. Aber okay.

Auf einer der Seiten habe ich eine eingefügte Tabelle mit 3 Spalten. In Firefox sieht das ganz passabel aus, der Interent Explorer verschiebt mir die Seite etwas zu schmal und der text rutscht logisch nach unten, die Tabelle hat eine ganz andere Position (die Seitenausrichtung ist optimal, nur die Position OBEN und UNTEN nicht).

Diese Tabelle ist definiert mit position: absolute und der Abstände von oben und den Seiten...

Warum das? Welchen Grund sollte es geben, eine Tabelle absolut zu positionieren, also aus dem sonstigen Elementfluss herauszulösen?

Passt bei Firefox. Doch beim IE und auf Smartphones ist die Positionierung der Tabelle verschoben (nach Oben/Unten) Verstehe ich auch teils da "absolute" und der länger nach unten ausgerictete Text. Schreibe ich relative, verschiebt sich die Tabelle UNTER das unterste Ende der eigentlichen Text-Seite, jedoch noch vor den Fuß. Das sieht nicht...

Du verwendest offensichtlich ungeeignete Mittel (absolute/relative Positionierung), noch dazu ohne sie wirklich zu verstehen. Beschreib mal, was du eigentlich erreichen willst, dann sehen wir weiter. So habe ich nämlich den Eindruck, dein momentaner Weg ist der Holzweg.

Was kann ich machen, dass diese Tabelle direkt nach meinem Text erscheint und auch bei der "Textverschiebung durch den Browser" mit nach unten rutscht und direkt unter dem Text bleibt?

Gar nichts. Das ist genau das, was die Tabelle ohne weitere Eingriffe von selbst tun würde.

Die Seite ist nicht Java oder PHP-Programmiert, ist nur HTML mit CSS-Datei.

Das spielt auch keine Rolle; auch wenn Java oder PHP im Spiel ist, kommt beim Browser nur HTML und CSS an (und eventuell Javascript).

So long,
 Martin

[Themenstarter]

Die Seite: http://www.sanseverix.com/begriffe.html

Mit Styleswitcher: ganz oben auswählbar. Die beiden oberen hellen Styles zeigen deutlich, was ich meine.., was ich meine

[Andre_Ta]

Die Seite: http://www.sanseverix.com/begriffe.html

Mit Styleswitcher: ganz oben auswählbar. Die beiden oberen hellen Styles zeigen deutlich, was ich meine.., was ich meine

Gibt es keine Antworten? Schade...

[Der Martin]

Hallo,

Die Seite: http://www.sanseverix.com/begriffe.html

Mit Styleswitcher: ganz oben auswählbar.

nein, nicht mit meiner üblichen Browserkonfiguration. Vielleicht, wenn ich Javascript zulassen würde.

Gibt es keine Antworten? Schade...

Ich bin weder religiös noch gottesfürchtig, aber als ich diese Seite gesehen habe, vor allem den Quellcode, fiel mir nur noch eins ein: OH GOTT!

Der HTML-Quellcode sieht aus, als wäre er aus dem letzten Jahrtausend übriggeblieben: Massenweise aussagefreie und in den meisten Fällen überflüssige div-Container, keine Spur von Semantik, ärgerliche Lauftexte (Marquee), der sinngemäße Hinweis "optimiert für Browser X", Formatierung und Gestaltung zumindest teilweise über missbilligte HTML-Attribute anstatt CSS, ...

Nimm's mir bitte nicht übel, aber sich in dem Chaos zurechtzufinden, ist schon eine Herausforderung. Das Beste wäre wirklich: Einreißen und neu aufbauen. Strukturiert, mit sinnvollem semantischem HTML und konsequenter Anwendung von CSS. Und unter Verzicht auf absolute/relative Positionierung. Ich sehe keinen Fall bei dir, wo das nötig wäre oder einen Sinn ergäbe - im Gegenteil, das ist vermutlich der Hauptgrund für die Probleme, die du mit der Darstellung hast.

Schöne Feiertage noch,
 Martin

[Andre_Ta]

Der HTML-Quellcode sieht aus, als wäre er aus dem letzten Jahrtausend übriggeblieben: Massenweise aussagefreie und in den meisten Fällen überflüssige div-Container, keine Spur von Semantik, ärgerliche Lauftexte (Marquee), der sinngemäße Hinweis "optimiert für Browser X", Formatierung und Gestaltung zumindest teilweise über missbilligte HTML-Attribute anstatt CSS, ...

Danke für eine Aussagekräftige Kritik! Nur, ich habe es nich so wirklich gelernt. Ich wüsste gerne was konkret ich weglassen sollte, denn diese Tabellen Links und rechts brauchen ja diese Aussagen über deren Positionen. Wie soll man das sonst umsetzen damit sie dort stehen wo sie sind.

Den einen einzigen Lauftext, ist das wirklich so schlimm?

Wie positioniere ich diese angesprochenen Tabellen? Ich habe auf jeder Seite eine Überschrift. Wenn ich jetzt die Position (in px) entferne, steht sie zwar gang oben, aber darunter die Überschrift.

Nimm's mir bitte nicht übel, aber sich in dem Chaos zurechtzufinden, ist schon eine Herausforderung. Das Beste wäre wirklich: Einreißen und neu aufbauen. Strukturiert, mit sinnvollem semantischem HTML und konsequenter Anwendung von CSS. Und unter Verzicht auf absolute/relative Positionierung. Ich sehe keinen Fall bei dir, wo das nötig wäre oder einen Sinn ergäbe - im Gegenteil, das ist vermutlich der Hauptgrund für die Probleme, die du mit der Darstellung hast.

[Andre_Ta]

Hallo,

Die Seite: http://www.sanseverix.com/begriffe.html

Mit Styleswitcher: ganz oben auswählbar.

nein, nicht mit meiner üblichen Browserkonfiguration. Vielleicht, wenn ich Javascript zulassen würde.

Gibt es keine Antworten? Schade...

Ich bin weder religiös noch gottesfürchtig, aber als ich diese Seite gesehen habe, vor allem den Quellcode, fiel mir nur noch eins ein: OH GOTT!

Der HTML-Quellcode sieht aus, als wäre er aus dem letzten Jahrtausend übriggeblieben: Massenweise aussagefreie und in den meisten Fällen überflüssige div-Container, keine Spur von Semantik, ärgerliche Lauftexte (Marquee), der sinngemäße Hinweis "optimiert für Browser X", Formatierung und Gestaltung zumindest teilweise über missbilligte HTML-Attribute anstatt CSS, ...

Nimm's mir bitte nicht übel, aber sich in dem Chaos zurechtzufinden, ist schon eine Herausforderung. Das Beste wäre wirklich: Einreißen und neu aufbauen. Strukturiert, mit sinnvollem semantischem HTML und konsequenter Anwendung von CSS. Und unter Verzicht auf absolute/relative Positionierung. Ich sehe keinen Fall bei dir, wo das nötig wäre oder einen Sinn ergäbe - im Gegenteil, das ist vermutlich der Hauptgrund für die Probleme, die du mit der Darstellung hast.

Schöne Feiertage noch,
 Martin

Nochmal: Danke für eine Aussagekräftige Kritik! Nur, ich habe es nich so wirklich gelernt. Ich wüsste gerne was konkret ich weglassen sollte, denn diese Tabellen Links und rechts brauchen ja diese Aussagen über deren Positionen. Wie soll man das sonst umsetzen damit sie dort stehen wo sie sind.

Den einen einzigen Lauftext, ist das wirklich so schlimm?

Wie positioniere ich diese angesprochenen Tabellen? Ich habe auf jeder Seite eine Überschrift. Wenn ich jetzt die Position (in px) entferne, steht sie zwar gang oben, aber darunter die Überschrift.

[MrMurphy1]

Hallo

Nur, ich habe es nich so wirklich gelernt.

Es ist kaum zu erwarten das die Browser darauf Rücksicht nehmen.

Es dürfte auch die Grenzen des Forums (und unserer Zeit) sprengen dir hier eine komplette HTML/CSS-Anleitung zu dem Thema zu erstellen. Zumal es genügend Anleitungen bereits im Web zu dem Thema gibt. Und du teilweise falsche Vorstellungen hast, die du offensichtlich nicht aufgeben willst.

Siehe zum Beispiel

Den einen einzigen Lauftext, ist das wirklich so schlimm?

Ja. Du magst den vielleicht super finden. Die meinsten deiner Besucher nicht. Und für die erstellt du ja wohl die Seite. Bestimmte Eigenschaften lassen eine Webseite bei einem Großteil der Besucher unreif und billig wirken. Auf die sollte eine seriöse Seite komplett verzichten.

Wie positioniere ich diese angesprochenen Tabellen?

Dazu gibt es keine einfache Lösung. Der Quelltext ist so verhunzt dass er komplett neu erstellt werden sollte. Auf der Grundlage und mit den vorhandenen Fehlern lässt sich die Seite nicht sinnvoll verbessern.

Gruss

MrMurphy

[Der Martin]

Moin,

ich habe dich auch beim ersten Mal verstanden; das Wiederholungsposting war ebenso unnötig wie das Komplett-Zitat.

Nochmal: Danke für eine Aussagekräftige Kritik! Nur, ich habe es nich so wirklich gelernt.

Was das HTML angeht, glaube ich dir das sogar. Dann liegt dein Einstieg in HTML aber vermutlich 10..15 Jahre zurück. Damals war CSS, bzw. dessen Unterstützung durch die Browser, noch in den Kinderschuhen, die Formatierung mit HTML-Elementen und Attributen der Normalfall.
Was du nicht gelernt haben solltest, ist die inflationäre Verwendung von div-Containern. Es scheint Web-Autoren zu geben, die fast schon reflexartig alles mal schnell in ein div-Element verpacken, und keiner weiß so recht warum.
Was du anscheinend nicht gelernt hast, aber trotzdem verwendest, ist absolute Positionierung von Elementen, ohne dass du genau verstehst, wie sie funktioniert, und warum man sie hier eigentlich überhaupt nicht braucht.

Ich wüsste gerne was konkret ich weglassen sollte, denn diese Tabellen Links und rechts brauchen ja diese Aussagen über deren Positionen.

Nein. Das Layout deiner Beispielseite soll vermutlich ganz einfach aussehen:

| | Header (über die ganze Breite) | Linkliste | Hauptinhalt | Linkliste | | Footer (über die ganze Breite)

Das dazu passende Markup könnte in Kurzform etwa so aussehen:

<header>...</header>

<nav id="box1">
 <ul>
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  ...
 </ul>
</nav>

<nav id="box2">
 <ul>
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  ...
 </ul>
</nav>

<main>
...
</main>

<footer>...</footer>

Wie soll man das sonst umsetzen damit sie dort stehen wo sie sind.

Lass HTML für dich arbeiten. Elemente ordnen sich von ganz allein nacheinander an. Nur da, wo du die Blöcke nebeneinander haben willst, muss man ein bisschen nachhelfen. Ich würde den beiden nav-Boxen eine feste Breite geben (am besten in em, nicht in px angegeben), nav#box1 nach links und nav#box2 nach rechts floaten. Schließlich bekommt main noch ein padding-left und padding-right entsprechend der Breite der beiden nav-Boxen, und das war's auch schon.

Wenn jetzt jemand einwendet, dass auch die Verwendung von float hier nicht mehr zeitgemäß sei: Ja, dann möge derjenige das Beispiel bitte noch als flex-Layout erklären und/oder zeigen. Mit dem Konzept habe ich mich nämlich noch nicht näher befasst.

Den einen einzigen Lauftext, ist das wirklich so schlimm?

Schlimm? Nö, nur nervig. Das gehört sich irgendwie nicht.

Wie positioniere ich diese angesprochenen Tabellen? Ich habe auf jeder Seite eine Überschrift. Wenn ich jetzt die Position (in px) entferne, steht sie zwar gang oben, aber darunter die Überschrift.

Da kann ich dir nicht ganz folgen.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

| | Header (über die ganze Breite) | Linkliste | Hauptinhalt | Linkliste | | Footer (über die ganze Breite)

Schade, dass es keine komplexeren Tabellen in Kramdown gibt.

Bis demnächst
Matthias

[Der Martin]

Hallo,

| | Header (über die ganze Breite) | Linkliste | Hauptinhalt | Linkliste | | Footer (über die ganze Breite)

Schade, dass es keine komplexeren Tabellen in Kramdown gibt.

ja, ich hatte auch erst nach einer Möglichkeit gesucht, die drei Header- und Footerzellen zu je einer zu verbinden, und mich dann für die Notlösung in Prosa entschieden.

Ciao,
 Martin

[Andre_Ta]

Jepp, so kann ich mal anfangen.. Das ist sehr gut nachvollziehbar beschrieben! Danke euch!

Ja, das Grundlayout hatte mir vor über 10 Jahren mal jemand gebastelt. Ich habe es dann für mich erweitert. Selfhtml hatte mir in der Anfangszeit ein bischen geholfen. War zwar ne ewige Sucherei aber es half. (Danke an dieser Stelle den Betreibern!) Dann werde ich mal, wenn ich mehr Zeit habe (besuche derzeit wieder eine Schule für berufliches - nach 25 Jahren meiner Ausbildung), mit dem Umbau anfangen. Das Gute ist, wenn man es selber macht, versteht man es auch besser. Aber sicher bräuchte ich dann wiederum eure Hilfe. Danke, Danke, Danke, Andyy

[Matthias Apsel]

Hallo Andre_Ta,

Aber sicher bräuchte ich dann wiederum eure Hilfe.

Gern doch.

Bis demnächst
Matthias

[JürgenB]

Hallo,

Die Seite: http://www.sanseverix.com/begriffe.html

Mit Styleswitcher: ganz oben auswählbar. Die beiden oberen hellen Styles zeigen deutlich, was ich meine.., was ich meine

Gibt es keine Antworten? Schade...

der Validator hat eine: Link. Ob die Fehler für dein Problem verantwortlich sind, weiß ich auch nicht.

Gruß Jürgen