HTML Frage - Warum ist die Tabelle so breit?

[JAC!]

Hallo

auf meine Website habe ich ein Problem mit der Darstellung. Die Tabelle auf
https://www.wudsn.com/index.php/productions-atari800
nehmen mehr als die sichtbare Breite ein, obwohl sie das nicht sollen.
Das Ergebnis ist ein sinnloser, horizontaler Scrollbalken.
Eigentlich sollten die Zeilen umbrechen, wenn er Text zu breit wird.
Aber ich kann nicht herausfinden, was am CSS/HTML nicht passt.
Evtl. hat ja hier jemand einen Tipp.
Viele Grüße, Peter.

Scroll.png (184.79 KiB) 4278 mal betrachtet

[HiassofT]

Hast Du es schon mal damit probiert: https://www.getdigital.de/products/css-sucks-v2 ?
Sollte zumindest moralisch helfen :)

Hab grad gesehen, dass es das mittlerweile auch als Hoodie gibt (passt besser zu den aktuellen Temperaturen als das T-Shirt), muss da glaub ich auch bald wieder mal bestellen, mein T-Shirt ist schon arg hinüber weil zu oft getragen :-)

so long,

Hias

[Mathy]

.
Hallo Peter

keine Ahnung ob es hilft, aber wenn man bei ""Fake Fade" die Zahlenreihe bei "Note" umbricht bevor sie über den Bildschirmrand hinaus ragt, wird der Rest der Seite auch rechtzeitig umgebrochen.

Tschüß

Mathy

[atarixle]

Ja, mach aus "<pre>...</pre>" lieber "<code>...</code>"

[Major Blink]

"width=100%"
Mit einem Prozentwert erreichst Du, dass die Tabelle maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notiere hinter der Zahl einfach ein Prozentzeichen.

[atarixle]

Das hab ich im Inspektor ausprobiert und klappt nicht. Die Tabelle darf auch gar nicht 100% sein, weil sie eh schon einen nicht unerheblich großen Abstand zum linken Rand hat.

Ursache ist wirklich das <pre>...</pre> mit der langen nicht umgebrochenen Zahlenfolge. <pre> könnte man in CSS noch mit der Eigenschaft overflow:auto; versehen, was ich gerade aber nicht probieren kann.

[Erhard]

Hallo,

ich hab mir das auch mal angeschaut:

Aufgefallen ist mir, daß die Tabelle ohne Spalten definiert wird, der Header einspaltig ist und danach aber in jeder Reihe 2 Spalten kommen. Ob das Einfluß auf die korrekte Darstellung hat weiß ich aber nicht, dazu bin ich aus dem Thema zu lange raus.

Dann hab ich mal nur die Tabelle sortiert und durch den Validator geschickt.

Da kommt dann (zig mal):

HTML-Check.png (20.92 KiB) 4120 mal betrachtet

Das mit dem nachfolgendem Slash könnte was sein.

Die anderen Fehler könnten vielleicht daher kommen, daß ich nicht die ganze Seite habe prüfen lassen.

Erhard

[atarixle]

Das Slash ist nur ein Überbleibsel aus der Zeit des völlig überflüssigen XHTML. Das waren HTML-Seiten aus validen XML-Dateien gemacht, in denen jedes Tag geschlossen werden musste. Mit einem Slash am Ende wurde es ohne ein </img> geschlossen - bei reinem HTML hat es aber rein gar nichts verloren, hier werden Tags wie <hr>, <br> oder <img> nicht geschlossen, weil sie nicht geöffnet werden. Sie haben auch keinen Inhalt und können kein ::before und ::after haben.

[JAC!]

Vielen Dank für all die Hinweise. <span style="font-family: monospace;"> statt <pre> war am Ende die Lösung. Ein paar weitere Issues sind nun auch gefixed, der Rest kommt so von Joomla und da ist mal wieder ein Update fällig.

[atarixle]

Direkte Formatierung ist ein schlechter Stil.

Lieber <code>...</code> verwenden und oben im CSS-Bereich bzw. in der CSS-Datei

Code: Alles auswählen

code {
 font-family:monospace;
 display:inline;
}

einfügen.

Alternativ geht auch <span class="code">...</span> und im CSS-Bereich

Code: Alles auswählen

.code {
 font-family:monospace;
}