nicht angemeldet
Need Help asap
1 
Rolf B
Need Help asap
Gunnar Bittersmann
TabellenkalkHallo Leute,
ich bin absoluter Anfänger und am verzweifeln, daher wende mich an euch in der Hoffnung, ihr könnt mir helfen. Und zwar folgen gleich 2 Screenshots.
-
Im ersten Screenshot, wie es aussehen sollte*(Idealerweise die Tabelle noch im Center und mit gleichmäßiger Zeilenhöhe)*.
-
Im zweiten Screenshot, wie es aussieht, nachdem ich es in die Firminterne Knowledge Database einfüge.
-
Danach folgt der Code dazu. Mit CSS hat es die KDB nicht so, daher muss es soweit es geht ohne gehen.
Edit Rolf B: BBCode in Markdown geändert
-
Hallo reppi1403,
eine Frage mit "asap" einzuleiten kann Leute verärgern... Aber ich guck's mir trotzdem mal an. Spannend übrigens, BASF hat also DXC als Sourcing-Partner 😂. Ist sowas nicht vertraulich?
Folgende Anmerkungen hätte ich zu deinem HTML:
-
Es ist erst seit HTML 5.2 im Standard, aber die meisten Browser akzeptierten es auch vorher: <style> Elemente im Body. Probier mal ob euer Firmen-Normbrowser es akzeptiert; du kannst dein HTML mit einem kleinen vorgeschalteten Style-Block deutlich kompaktieren; vor allem die Tabellen.
-
head ist nichts, was im html-Body vorkommen soll. Das <head> Element hat eine besondere Bedeutung außerhalb des <body> Teils. Du möchtest eins der h-Elemente (also h1, h2, h3 oder so). h1 ist die Hauptüberschrift, ob du die hier nehmen solltest hängt vom Rest der Seite ab, vielleicht ist h2 besser. Diese Elemente haben auch den Vorteil, dass sie einen gewissen Abstand nach unten mitbringen, und Fettschrift auch; da sparst Du im style und brauchst die <br> nicht. Einen <span> Rahmen drumrum brauchst Du dann auch nicht.
-
Analog möchte dein zweiter span ein p Element sein. text-decoration:none ist im Style unnötig, statt dessen setze dort ein margin-bottom: 4em ein, statt der <br> Leerzeilen.
-
Dein Button mit onclick könnte auch ein a Element sein. Da kannst Du die Zieladresse gleich im href eintragen und brauchst kein Javascript. Ob das Ding wie ein Button aussehen muss, ist eine Designfrage; ein Button ist eigentlich ein Element das Funktionen AUF der Seite auslöst und nicht woanders hinspringt.
-
Deine Table zerreißt es weil es zwei Tables sind. Also eigentlich sind es noch viel mehr, weil Du unnötige <table> Elemente drin hast. Die müssen auf jeden Fall mal weg. Und du musst eine einzelne Table daraus machen, weil die Spaltenbreiten vom Browser angepasst werden wenn die gewünschten 200 Pixel pro Spalte nicht mehr möglich sind, und solche Anpassungen erfolgen natürlich inhaltsbezogen PRO TABELLE. Du kannst alternativ mit der style-Angabe
table-layout:fixederreichen, dass die Spalten nicht zusammengeschoben werden. -
Wenn man eine einzige Table daraus macht, ist ein separater Abstand zwischen Überschriften und Inhalt durch Einfügen einer leeren Row möglich. Also z.B. so:
<tr style="heigth:3px"></tr> -
colgroup möchte nicht in einem tr stehen, sondern davor. Aber wenn Du mit einem Style-Block arbeitest, kannst Du colgroup auch weglassen; setze einfach 200px Breite für th und td Elemente. Ob das bei verschiedenen Fenstergrößen immer so aussieht wie Du es willst, musst Du gucken. Eine Alternative ist 14vw für die Spaltenbreiten (also 14% der Fensterbreite) und keine eigene Width-Angabe an der table.
-
Das Zentrieren der Table musst Du mit margin:auto im style der table machen, nicht durch Einbetten in ein div mit text-align:center
-
Vertikales Zentrieren von Text in Tabellenzellen macht man mit vertical-align: top im style der Zelle
-
Überschriftenzellen möchten th sein, nicht td. Dann sind sie auch automatisch fett.
-
Wenn nach dem Einbetten in die KDB das Layout nicht passt, dann stören die Styles der KDB. Dann musst Du mit den Entwicklerwerkzeugen des Browsers schauen, welcher KDB-Style dein Layout verhagelt und das in deinem eigenen Style-Block entsprechend überschreiben. Hier ist es wichtig, die CSS Vorrangregeln zu kennen. Siehe dazu Spezifität im Selfhtml WIKI.
Ich habe dein HTML mal in ein jsFiddle überführt (was heute abend echt zum Würgen war weil das Ding dauernd hängt). Darin habe ich einen style-Block eingesetzt und die ersten beiden Table-Rows umgewandelt. Der Rest war mir zu viel Arbeit. Einen Pseudo-Button als Link habe ich als Alternative auch mal eingesetzt.
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Folgende Anmerkungen hätte ich zu deinem HTML:
Wie kommst du denn da ran? Du hast auf der File-Upload.net-Seite auf Download geklickt? Ich nicht. Werde ich auch nicht. Der Fragende möge sein Zeugs als aufrufbare Seite zur Verfügung stellen.
Du möchtest eins der h-Elemente (also h1, h2, h3 oder so). h1 ist die Hauptüberschrift, ob du die hier nehmen solltest hängt vom Rest der Seite ab, vielleicht ist h2 besser. Diese Elemente haben auch den Vorteil, dass sie einen gewissen Abstand nach unten mitbringen, und Fettschrift auch
Ja, das auch. Das ist aber nebensächlich. Hauptsächlich machen sie die Seite zugänglich. So bieten Screenreader bspw. Shortcuts zum Sprung zur nächsten Überschrift; Nutzier navigieren so von Abschnitt zu Abschnitt durch die Seite. Wenn keine Überschriften (damit sind
h1-,h2-, …-Elemente gemeint; nicht irgendwas, was nur visuell wie eine Überschrift aussieht) da sind, dann können sie das nicht.Dein Button mit onclick könnte auch ein a Element sein.
Wie sich dein Absatz liest, wäre „sollte“ oder „muss“ als Modalverb angebracht.
ist ein separater Abstand zwischen Überschriften und Inhalt durch Einfügen einer leeren Row möglich. Also z.B. so:
<tr style="heigth:3px"></tr>Buh! So nicht. Ein abstand-erzeugendes Element hat im Markup nichts zu suchen. Das tut ein Pseudoelement im Stylesheet:
thead::afterodertbody::before. ☞ CodepenLLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
Na ja, bei fileupload muss man halt wissen wo die Fallen sind, dann geht's schon...
Aber, hmpf, heigth sowieso nicht, sondern height.…
Dass ich mit thead::after sozusagen einen Fremdkörper in die Struktur der table bringen kann, war mir in dem Moment nicht klar. Danke.
Was mich allerdings heute anp*sst ist, dass ich mir für diese "asap" Frage eine Menge Zeit gekommen habe und dann nichts zurückkommt. War wohl doch nicht eilig 🙁
Rolf
--
sumpsi - posui - clusi-
Hallo,
Was mich allerdings heute anp*sst ist, dass ich mir für diese "asap" Frage eine Menge Zeit gekommen habe und dann nichts zurückkommt. War wohl doch nicht eilig 🙁
Vielleicht war doch „as slow as possible“ gemeint…
Gruß
Kalk
-
-
-