Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

CSS Grid Layout Table Overflow

  • 1
  • 2

Werbeanzeige

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

1

12.11.2017, 22:59

CSS Grid Layout Table Overflow

Nachdem mir bei meinem Problem mit dem mobilen Menü sehr geholfen wurde, habe ich jetzt begonnen, meine Website auf ein grid layout umzustellen.

Dazu habe ich vorerst mal drei Spalten mit linker Sidebar, Hauptteil und rechter Sidebar. Der Hauptteil ist wiederum ein Grid mit 4 Zeilen. Ist das nachteilig, das so zu handhaben, also ein grid innerhalb eines grids? Ich habe dabei gedacht, dass ich für eine mobile Version beispielsweise einfach mal die Sidebars weggebe und das innere Grid so bestehen bleibt.

Nun aber zu meinem eigentlichen Problem. Meinem Verständnis nach sollte folgende Zeile den verfügbaren Platz (=gesamte Bildschirmbreite) so unterteilen, dass ich links und rechts eine Spalte mit 1,5rem habe und in der Mitte eine Spalte mit dem restlichen Platz.
grid-template-columns: 1.5rem 1fr 1.5rem;

Das Problem ist allerdings, dass ein Bild oder eine Tabelle, die eben größer ist und in der mittleren Spalte untergebracht ist, diese auch einfach größer macht und alles andere nach rechts aus dem Bildschirm heraus schiebt.
Hier wäre das Beispiel mit dem Bild und hier die Tabelle (bitte den Browser ganz schmal machen und dann neu laden).

Leider habe ich dazu nichts im Internet finden können. Und auch andere Websites, die auf ein grid layout setzen habe ich noch nicht so gefunden, dass ich mir deren Quellcode hätte ansehen können.

Danke schon vorab. :)

Michael

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

2

13.11.2017, 09:24

Für die Tabelle:

Quellcode

 
1
2

width: 100%;
table-layout: fixed;

Für das Bild; hier hast du feste Größen (B/H) angegeben:

Quellcode

 
1
2
3

width: 749px;
max-width: 100%;
/* height: 250px; WEG! */


(Maximale) Breiten ggf. nach deinen Wünschen anpassen. ;)

Verwendest du eigentlich die Entwicklerwerkzeuge/-Konsole deines Browsers?
Damit sind solche Probleme ratzfatz Geschichte.
fka tm

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

3

13.11.2017, 10:44

Vielen Dank dafür. :)
Die Tabelle wird jetzt halt wirklich auf die maximale Breite geschrumpft, womit dann der Text mancher Zellen in die nächsten hinein ragen. Vermutlich ist für so schmale Bildschirme sowieso ein anderes Layout besser, so dass ich quasi eine Responsive Tabelle habe anstatt eine zum Scrollen, wie ich das eigentlich erhofft hatte (scrollbars bei Tabellen sind am Phone sowieso nicht sichtbar). Ich werd mich da auf jeden Fall weiter schlau machen. :)

Zitat von »Michael«


Verwendest du eigentlich die Entwicklerwerkzeuge/-Konsole deines Browsers?
Damit sind solche Probleme ratzfatz Geschichte.

Ich verwende den Inspektor von Firefox. Damit schaue ich mir auch viele andere Websites an und probiere herum. Es scheint aber offenbar noch am Basiswissen zu fehlen, um solche Probleme einfach selbst lösen zu können. :|

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

  • Private Nachricht senden

4

13.11.2017, 10:56

Soweit ich weiß verwendet man Tabellen heutzutage nicht mehr für das Layout. Bootstrap hat ein Gridlayout. Guck doch einfach mal wie das da genau gelöst ist.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Michael

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

5

13.11.2017, 11:08

Zitat von »Schorsch«

Soweit ich weiß verwendet man Tabellen heutzutage nicht mehr für das Layout. Bootstrap hat ein Gridlayout. Guck doch einfach mal wie das da genau gelöst ist.

Jou, Tabellen fürs Layout sollte man nicht mehr verwenden. (macht Käsekönig ja auch nicht)
Datentabellen brauchts jedoch desöfteren. Wobei responsive Tabellen etwas kniffliger zu handlen sind.

Edit
Käsekönig, bzw. Namensvetter:
Du kannst ja innerhalb deiner Media Queries Textgrößen, Padding usw. für kleinere Bildschirme runtersetzen.
Ggf. verzichtbare Spalten einer Tabelle ganz ausblenden.
fka tm

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Michael« (13.11.2017, 11:17)

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

  • Private Nachricht senden

6

13.11.2017, 11:21

Zitat von »Michael«

Jou, Tabellen fürs Layout sollte man nicht mehr verwenden. (macht Käsekönig ja auch nicht)
Datentabellen brauchts jedoch desöfteren. Wobei responsive Tabellen etwas kniffliger zu handlen sind.

Wer lesen kann ;) Mein Fehler.
„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Michael

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

7

13.11.2017, 11:29

Das kommt in die Personalakte, Schorsch! 8|
fka tm

Käsekönig

1x Contest-Sieger

  • »Käsekönig« ist der Autor dieses Themas

Beiträge: 343

  • Private Nachricht senden

8

13.11.2017, 11:56

Zitat von »Michael«

Du kannst ja innerhalb deiner Media Queries Textgrößen, Padding usw. für kleinere Bildschirme runtersetzen.
Ggf. verzichtbare Spalten einer Tabelle ganz ausblenden.

Genau, das wäre wohl mal ein erster Schritt. :)
Und weiters kann ich dann ja schauen, ob ich solche Dinge, wie zum Beispiel hier umgesetzt, auch umsetzen kann.

Michael

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

9

13.11.2017, 12:20

Zitat von »Käsekönig«


Und weiters kann ich dann ja schauen, ob ich solche Dinge, wie zum Beispiel hier umgesetzt, auch umsetzen kann.

mmh... :S
Glaube, du kriegst deine Tabelle auch so klein genug.
Vielleicht auch interessant:

Quellcode

 
1
2
3
4
5

td.longtextcolumn {
width: 10em; 
overflow: hidden;
text-overflow: ellipsis;
}

Schneidet überlangen Text ab ("blabla...")
Ggf. kannst du bei Bedarf den ganzen Text dann per Tooltip oä. anzeigen.
fka tm

David Scherfgen

Administrator

Beiträge: 10 382

Wohnort: Hildesheim

Beruf: Wissenschaftlicher Mitarbeiter

  • Private Nachricht senden

10

13.11.2017, 13:23

@Michael: Ich wusste gar nicht, dass du so fit bist in Sachen Webdesign! :thumbup:
David Scherfgens Website | Konzentrationstest Polizei

Werbeanzeige

  • 1
  • 2

Ähnliche Themen