<span> Elemente responsive

[Hannes Weninger]

Hallo nochmal,

ich hätte noch eine Frage zu meinen span- Elementen in einer Tabelle. Ich hab die letzten Jahre nur Backend programmiert - mein frontend- css- html wissen ist leider eingerostet :-(

Ich hab hier mein Beipiel gepostet. wenn man die tabellen verkleinert, dann sollten die span- Elemente untereinander angeordnet sein. Momentan überschneiden sie sich:

JSFiddle Code

Ich hab als CSS inline verwendet, da es mom noch ein testcode ist, produktiv mache ich ein eigenesCSS

Vielen Dank! Hannes

[Gunnar Bittersmann]

@@Hannes Weninger

Ich hab als CSS inline verwendet, da es mom noch ein testcode ist, produktiv mache ich ein eigenesCSS

Nein, das machst du bitte sofort, damit andere sich deinen Code ansehen können.

LLAP 🖖

[Hannes Weninger]

erledigt: Code mit css- file

Nein, das machst du bitte sofort, damit andere sich deinen Code ansehen können.

[Gunnar Bittersmann]

@@Hannes Weninger

erledigt: Code mit css- file

Bei margin-left: -6px" sollte statt " ein ; stehen.

Die Boxen überlappen sich wegen des padding-top/padding-bottom, was die Zeilenhöhe für display: inline-Elemente nicht verändert.

Mit display: inline-block solltest du das Gewünschte erreichen.

LLAP 🖖

PS: Dass der Strichjunge zwischen den Zeiten viel zu kurz ist, hatte ich dir aber schon gesagt, oder?

[August]

erledigt: Code mit css- file

so etwa?

[Gunnar Bittersmann]

@@August

so etwa?

<!--
A C H T U N G ! ohne Leeräume zwischen den span-Elementen
-->

Das ist gar keine gute Idee. HTML-Autoren sollten Quelltext vernünftig formatieren können.

Wenn Whitespace nicht dargestellt werden soll, kann man halt nicht display: inline-block verwenden. Muss man ja auch nicht: so etwa.

Disclaimer: td ist für CSS jetzt keine Tabellenzelle mehr. Eventuell müssen die span-Elemente noch in ein Containerelement gesteckt werden, was display: flex verpasst bekommt.

Nachtrag: Ich hab mir erlaubt, die Bis-Striche mal richtig zu machen.

LLAP 🖖

[August]

@@August

so etwa?

<!--
A C H T U N G ! ohne Leeräume zwischen den span-Elementen
-->

Das ist gar keine gute Idee. HTML-Autoren sollten Quelltext vernünftig formatieren können.

Wozu? Syntaktisch MUSS er valid sein, optisch ist er mir herzlich wurscht, er wird dynamisch generiert und herauskommt maschinengeschriebener Code. Kein doppeltes Leerzeichen, kein Tab, nichts unnötiges wird übers Netzt versendet nur ein elendlanger Einzeiler.

Falls ich die Struktur im HTML brauche, öffne ich die Konsole oder formatiere den Quelltext mit zwei aufeinanderfolgenden Tastenkürzel [Strg-K Strg-D] (Visual Studio).

Wenn Whitespace nicht dargestellt werden soll, kann man halt nicht display: inline-block verwenden. Muss man ja auch nicht: so etwa.

An display:flex (und display:table-cell) habe ich auch gedacht, deine Lösung gefällt mir aber auch sehr gut.

[Gunnar Bittersmann]

@@August

Das ist gar keine gute Idee. HTML-Autoren sollten Quelltext vernünftig formatieren können.

Wozu? Syntaktisch MUSS er valid sein, optisch ist er mir herzlich wurscht

Dir vielleicht. Anderen Entwicklern nicht; die formatieren den Code um. Und irgendwann später fällt jemanden auf, dass die Abstände auf einmal größer sind.

Solche Fallen sollte man gar nicht erst aufstellen, besonders nicht, wenn man nicht allein an dem Projekt arbeitet.

An display:flex (und display:table-cell) habe ich auch gedacht, deine Lösung gefällt mir aber auch sehr gut.

Floats gingen hier auch, da die Boxen alle dieselbe Höhe haben.

LLAP 🖖

[August]

Das ist gar keine gute Idee. HTML-Autoren sollten Quelltext vernünftig formatieren können.

Wozu? Syntaktisch MUSS er valid sein, optisch ist er mir herzlich wurscht

Dir vielleicht. Anderen Entwicklern nicht; die formatieren den Code um. Und irgendwann später fällt jemanden auf, dass die Abstände auf einmal größer sind.

Solche Fallen sollte man gar nicht erst aufstellen, besonders nicht, wenn man nicht allein an dem Projekt arbeitet.

Wird noch am HTML gearbeitet? Bei meinen Projekten wird HTML generiert. Der Quellcode der Scriptspache ist strukturiert formatiert und kommentiert, heraus kommt ein Einzeiler HTML.

An display:flex (und display:table-cell) habe ich auch gedacht, deine Lösung gefällt mir aber auch sehr gut.

Floats gingen hier auch, da die Boxen alle dieselbe Höhe haben.

Das hätte mir um einiges weniger als flex gefallen! ;-)

[Hannes Weninger]

Hallo nochmals,

vielen Dank für euren Beispiel- Code - der hat mich schon um einiges weiter gebracht. Ich kämpfe jetzt noch mit den Abständen zwischen meinen "spans" und Tabellen- Zellen Rändern - dieser sollte nur 1 pixel sein. Und auch das "+" sollte sich immer rechts unten im Eck der Zelle befinden.

Hier ist mein aktuelles Beispiel:

Code

Ich wäre euch sehr dankbar, wenn ihr mir da nochmals weiterhelfen könntet. Danke! Hannes

[Gunnar Bittersmann]

@@Hannes Weninger

Ich kämpfe jetzt noch mit den Abständen zwischen meinen "spans" und Tabellen- Zellen Rändern - dieser sollte nur 1 pixel sein.

Wie du dem Entwicklerwerkzeug deines Browsers entnehmen kannst, kommt der von
.table > tbody > tr > td, … { padding: 8px; … } aus bootstrap.min.css.

Optionen:

• Du überschreibst die Regel aus Bootstrap in deinem Stylesheet für alle Tabellen der Klasse "table".

• Du überschreibst die Regel aus Bootstrap in deinem Stylesheet für alle Tabellen der Klasse "serviceScheduleTable".

• Du gibst der Tabelle gar nicht erst die Klassen "table" und "table-bordered".

• Du verwendest gar nicht erst Bootstrap.

Und auch das "+" sollte sich immer rechts unten im Eck der Zelle befinden.

Da hilft display: block; text-align-right. Allerdings musst du auch hier gegen das Framework ankämpfen.

LLAP 🖖