<span> Elemente responsive
Hannes Weninger
- css
- html
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:
Ich hab als CSS inline verwendet, da es mom noch ein testcode ist, produktiv mache ich ein eigenesCSS
Vielen Dank! Hannes
@@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 🖖
erledigt: Code mit css- file
Nein, das machst du bitte sofort, damit andere sich deinen Code ansehen können.
@@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?
erledigt: Code mit css- file
@@August
<!--
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
<!-- 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.
@@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 🖖
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! ;-)
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:
Ich wäre euch sehr dankbar, wenn ihr mir da nochmals weiterhelfen könntet. Danke! Hannes
@@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 🖖