zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden {column-fill:auto} Welche Höhe zum Füllen des Viewports?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 10.10.2018, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.915
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

Du bist übrigens immer noch die Quelle für folgende Aussage schuldig.
Ich sehe nicht ein, wieso ich auf Aussagen deinerseits eingehen soll wenn du dies nicht tust.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Die beste Usability zum Lesen von mehrspaltigem Text, der nicht mehr komplett auf den Viewport passt, wäre das "seitenweise horizontale Blättern", wie man es von ebooks kennt.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 10.10.2018, 17:17
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Ich kann Dir keine Belege für meine Vermutungen liefern. Da geht es mir nicht anders als Dir


Lassen wir es gut sein. Ich suche keinen Streit.
__________________

Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 18.10.2018, 10:50
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Ich passe mein Gestaltungsziel aus dem Ursprungsposting an, vielleicht hat dann noch jemand Lust eine Idee beizutragen.

1 Kein vertikales Scrollen, sondern ggfs. horizontales
Daraus folgt: Jede Spalte reicht bis zum unteren Viewportrand

2 Mindestbreite aller Spalten in em (ich ermittle dazu manuell den längsten Listeneintrag und teste, ob er in die Breite hineinpasst)
Die beispielhafte Liste steht weiterhin unter https://borumat.de/netflix-genres-de bereit.

3 Anzahl der Spalten ist nicht fix, sondern hängt von der Fläche des Viewportes ab


Punkt 3 konnte ich einfach lösen, indem ich eine unrealistisch hohe Anzahl an Spalten angebe (20). Durch column-width wird eine Mindestbreite sichergestellt. So ergibt sich automatisch die perfekte Anzahl an Spalten.



Anmerkung:
Unter iOS12 Safari im Querformat funktioniert meine aktuellel Höhenangabe

"div { height: calc(100vh - 4.80em); }" leider nicht. Offenbar wird die Adress- und Tableiste einbezogen.
In macOS 14 Safari im Vollbildmodus ist alles schick.





Richtig, ich möchte den Sinn von "horizontalem Blättern" hier nicht weiter diskutieren. Das kann gerne in einem anderen Thread stattfinden.
__________________


Geändert von AndreasB (18.10.2018 um 17:25 Uhr)
Mit Zitat antworten
  #14 (permalink)  
Alt 18.10.2018, 11:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.915
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

Kannst du dein Designziel auch visualisieren? Ich bin mir nicht sicher, ob ich alles korrekt verstanden habe :/
Ein einfaches, schematisches Bild reicht hier aus, mir geht es nur darum zu verstehen, welche Spalte jetzt wohin verlängert werden soll wenn der Platz nicht ausreicht.

Zitat:
Zitat von AndreasB Beitrag anzeigen
I
Anmerkung:
Unter iOS12 Safari im Querformat funktioniert meine aktuellel Höhenangabe

"div { height: calc(100vh - 4.80em); }" leider nicht. Offenbar wird die Adress- und Tableiste einbezogen.
Dieses Problem wirst du wahrscheinlich noch öfter haben, da Adress- und Tableiste auf mobilen Browsern je nach Scrollposition/-verhalten ein- und ausgeblendet werden.
Mit Zitat antworten
  #15 (permalink)  
Alt 18.10.2018, 12:22
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Die vielen verschiedenen Situationen zu visualisieren bekomme ich mangels Fähigkeiten in einem Grafikprogramm nicht hin.


Aber hier mal 3 Screenshots:

1. Hier passen nicht alle Listenpunkte auf den Viewport. Alle Spalten sind voll ausgefüllt. Um den Rest zu sehen müsste man quer scrollen.
https://www.dropbox.com/s/01f5sy9b5g...14.25.png?dl=0


2. Hier passen alle Listenpunkte auf den Viewport:
https://www.dropbox.com/s/q8wwtzptez...18.56.png?dl=0


3. Dito
Hier werden nur 4 Spalten statt 5 gefüllt
https://www.dropbox.com/s/lutx696o33...20.42.png?dl=0

Ist jetzt klarer, was ich meine?


Eine feste Spaltenbreite ist mit column-width leider nicht möglich. Dieses Merkmal fehlt also noch auf https://borumat.de/netflix-genres-de


Ist das Problem mit den Leisten (Adress-, Tab-, Scroll-Leiste) lösbar durch andere Einheiten?
__________________


Geändert von AndreasB (18.10.2018 um 14:13 Uhr)
Mit Zitat antworten
  #16 (permalink)  
Alt 18.10.2018, 12:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.915
cloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblickcloned ist ein Lichtblick
Standard

das heißt du willst den inhalt auf jeden Fall in eine Seite bekommen ohne irgendwas zu scrollen? Die Anzahl der Spalten soll dabei dynamisch sein (so wenig wie möglich)?
Mit Zitat antworten
  #17 (permalink)  
Alt 18.10.2018, 14:17
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
das heißt du willst den inhalt auf jeden Fall in eine Seite bekommen ohne irgendwas zu scrollen?
Nein. Siehe erster Screenshot.
Siehe auch "1 Kein vertikales Scrollen, sondern ggfs. horizontales"
Wenn mehr Inhalt da ist als auf den Viewport passt, wird natürlich gescrollt (ideal wäre ein blättern).



Zitat:
Zitat von cloned Beitrag anzeigen
Die Anzahl der Spalten soll dabei dynamisch sein (so wenig wie möglich)?
Da die Spalten eine Mindestbreite haben sollen, ergibt sich die Anzahl der Spalten aus der Breite des Viewports.


Sind jetzt alle Unklarheiten beseitigt?




Für langen Fließtext habe ich aus Neugier auch eine Beispielseite erstellt.
https://borumat.de/-/zeitungssatz-mehrspaltig
Als nächstes werde ich mit paged media experimentieren. Vielleicht lässt sich darüber ein seitenweises Blättern realisieren.
__________________


Geändert von AndreasB (18.10.2018 um 17:28 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 18.10.2018, 18:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 111
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Vielleicht lässt sich darüber ein seitenweises Blättern realisieren.
Das nennt sich auch pagniton. Wenn der Inhalt aus einer Datanbank kommen würde könnte man da ohne probleme was mit Php machen. Nur ein Blättern mit Javascript zu verwirklichen oder mittels css ein und ausblenden wäre jetzt nix was ich bauen würde. Weil man dann wohl immer alles laden muss egal wie viele Seiten man Blättern müßte. Außer man holt sich den Inhalt der zum Blättern ist über Ajax.
Wie viele Seiten könnten den zusammen kommen die man blättern müßte ?
Mit Zitat antworten
  #19 (permalink)  
Alt 18.10.2018, 20:03
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@basti
Wieviele Seiten es zum Blättern gibt, hängt natürlich von der Viewportgröße ab.
Auf einem 13-Zöller sind es mehr als bei einem 30-Zöller.


Geladen werden soll, wie bei anderen Webseiten auch, der gesamte Inhalt. Da es ja vor allem um Text geht ist das eh unwichtig.


Da ich nicht sicher bin, ob Du mein Anliegen noch missverstehst:

Angenommen es werden auf einem 30-Zöller 7 Spalten dargestellt und wir befinden uns auf der ersten Seite. Nach dem Blättern befindet sich der Anfang der 8. Spalte links oben.


Wir sind "eine gesamte Seite weiter".


Genau wie in einem eBook (wenn es mehrspaltig gesetzt wäre)


Vielleicht kann man Pfeil-Schaltflächen einblenden, die die Funktion des Blätterns übernehmen. Das ist vielen Nutzern aus Galerien bekannt.
Und alternativ könnte man auch mit den Tasten Pfeil links/rechts blättern.
__________________

Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 19.10.2018, 05:21
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 111
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

doch ich glaube ich verstehe dich schon wie du das meinst.

Eine normale Blätter funktion wieman sie hier aus den Forum kennt für seite 1,2,3 usw kann man ganz simple mit Php schreiben. Da hier ja immer genau 20 Einträge oder so pro Seite sind ist das kein problem. Da du X beliebige Spalten haben kannst weil sie bei dir nach Monior größe gehen soll scheint mir das jetzt nicht mehr so simple.

Man könnte den Inhalt laden ,Monitor gröse ausrechnen den mit Inhalt abgleichen und dem entsprechend wird dann deine Blätter funktion erstellt.

Machbar ist alles. Nur wenn ich das hier immer richtig lese bist du in Javascript oder Php noch nicht so gut drine, ehr html und css ist ( wird ) dein Fachgebiet.
Richtig ?.
Hast du mal ein Beispiel Inhalt was du angezeigt haben willst ? Und du agst ja in Spalten. Warum verlengerst du die Spalten nicht nach unten? Dann Scrollt man halt etwas länger aber würde die bestimmt nee menge Code sparren. Kommt immer drauf an wie viel du da rein haben willst ?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Spalten bis zum Ende des Browser füllen... philipp1988 CSS 6 30.10.2007 12:45
Div im IE zu hoch RancoR CSS 10 10.07.2007 00:11
Fotozoom einbinden r0k CSS 3 01.11.2006 12:58
<div>-Bereich mit Höhe des gesamten BrowserFensters BullPit CSS 3 13.02.2005 11:49
Höhe des DIVs automatisch auf volle Höhe scheichxodox Knowledge Base 5 21.12.2004 11:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:55 Uhr.