1 html Seite mit 1 Tabelle responsiv anpassen

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 634
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Tastenplayer » 09.06.2017 21:25

Hallo

Gibt es nirgendwo im Netz eine Seite die für Dummies erklärt wie man eine einzelne html Seite mit Tabelle responsiv hinbekommt?

Mein Forenradio ist jetzt endlich nicht mehr als PDF sondern als eine html Seite erstellt. Lädt zig mal schneller, jedoch logisch nicht responsiv.
Zig Stunden googeln und nichts gefunden, dass mir den Durchblick verschafft :oops:
[ externes Bild ]

War doch extra im Small Talk. Wenn es jetzt hier her verschoben wurde - muss ich noch code einstellen :-?
Startseite: https://www.my-tastenworld.ch
Mein Portal: https://www.portal.my-tastenworld.ch/Mein Forum: https://www.forum.my-tastenworld.ch/

Be the best version of yourself rather than a bad copy of someone else!

Verschoben von Smalltalk nach Coding & Technik am 09.06.2017 21:33 durch Dr.Death

Benutzeravatar
canonknipser
Supporter
Supporter
Beiträge: 922
Registriert: 10.09.2011 11:14
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon canonknipser » 09.06.2017 22:10

Grüße, canonknipser
"there are only 10 types of people: those, who understand binary and those, who don't"
just arrived ;)
Kein Support via PN, nur im Board und (manchmal) im IRC

Benutzeravatar
gn#36
Administrator
Administrator
Beiträge: 9133
Registriert: 01.10.2006 16:20
Wohnort: Ganz in der Nähe...
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon gn#36 » 10.06.2017 07:51

Alternativ bindest du gleich ein CSS Framework dafür ein wie z.B. bootstrap o.ä. die meisten bieten dir auch eine ähnliche Möglichkeit, bei der du einfach CSS Klassen angeben kannst abhängig von der gewünschten Breite bei verschiedenen Displayformaten. Folgendes würde für kleine und größere Displays (ab ca. Tablet Größe) dann ein vierspaltiges Layout definieren (die genauen Bezeichnungen hängen natürlich vom Framework ab):

Code: Alles auswählen

<div class="row">
    <div class="col-sm-3">A</div>
    <div class="col-sm-3">B</div>
    <div class="col-sm-3">C</div>
    <div class="col-sm-3">D</div>
</
div>

Alles was kleiner ist bekommt automatisch ein einspaltiges Layout (d.h. die Spalten werden untereinander dargestellt).

Wenn es auf kleinen Displays zwei und auf größeren vierspaltig sein soll dann könntest du es z.B. ungefähr so auszeichnen:

Code: Alles auswählen

<div class="row">
    <div class="col-md-3 col-sm-6">A</div>
    <div class="col-md-3 col-sm-6">B</div>
    <div class="col-md-3 col-sm-6">C</div>
    <div class="col-md-3 col-sm-6">D</div>
</
div>


Um den Rest kümmert sich dann das Framework (d.h. ganz kleine Displays bekommen z.B. in diesem Fall wieder ein einspaltiges Layout).
Begegnungen mit dem Chaos sind fast unvermeidlich, Aber nicht katastrophal, solange man den Durchblick behält.
Übertreiben sollte man's im Forum aber nicht mit dem Chaos, denn da sollen ja andere durchblicken und nicht nur man selbst.

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 634
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Tastenplayer » 10.06.2017 09:12

Danke schau mir das alles in den nächsten Tagen an.

In meinem Fall müsste ich wahrscheinlich den neusten Wysiwig Webbuilder anschaffen - denn sonst scheint es nicht zu gehen, da eben im Wyisywig Web Builder erstellt. Aber evt. klappt es trotzdem.

Anleitung für totale Dummies - lediglich für den Radio von 1 html Seite wäre am Einfachsten:
1. Schönere PDF erstellen
2. Hier einladen https://www.idrsolutions.com/online-pdf-to-html5-converter/
3. Responsive html Seite ist fertig, halt mit weissem Hintergrund oben kann gewählt werden + und minus(wer gaaanz kleines Mobilegerät hat benötigt keine Lupe - wird eh den Radio nicht benutzen :D )
4. Download Zip
Hier das Resultat: http://www.fotos-hochladen.net/uploads/pdfkonvertedhtbxr5kygja6.png
http://www.fotos-hochladen.net/uploads/pdfkonvertedhtfbxn5ody23.png
http://www.fotos-hochladen.net/uploads/pdfkonvertedhtxelathpbrw.png
http://www.fotos-hochladen.net/uploads/pdfkonvertedhtr06ep53tzw.png Hintergrund und Headerfarben angepasst.
http://www.fotos-hochladen.net/uploads/pdfkonvertedht28adwk6u0z.png weitere Funktionen

@canonknipser
Super vielen Dank!

Die Anleitung von gn#36 erscheint nicht sehr kompliziert - mal sehen, Danke für die Mühe!
Startseite: https://www.my-tastenworld.ch
Mein Portal: https://www.portal.my-tastenworld.ch/Mein Forum: https://www.forum.my-tastenworld.ch/

Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 634
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Tastenplayer » 17.06.2017 14:56

Tabelle ist wirklich nicht sehr einfach, versuchs weiter.
Die Anleitung oben mit der konvertierten pdf funktioniert jedoch in jedem Mobilengerät und sieht nicht schlecht aus!

Im iPhone 4 Landscape kommt der Theme toggle über die Seitenzahl, funktioniert aber. In der normalen Ansicht sieht es normal aus.
Im iPhone 5 Landscape funktioniert der Theme toggle nicht! In der normalen Ansicht schon.

Habe mal versucht mehrere pdf Seiten mit diesem Tool in html Seiten umzuwandeln - hat auch super geklappt. Die Sidebar wurde in jedem Mobilgerät angezeigt!
Eine coole Sache mit wenig Aufwand erstellt(dauerte nicht viel länger als mit dem ehemaligen RadioMod :) )
Startseite: https://www.my-tastenworld.ch
Mein Portal: https://www.portal.my-tastenworld.ch/Mein Forum: https://www.forum.my-tastenworld.ch/

Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 634
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Tastenplayer » 25.07.2017 21:38

Leider noch nicht viel weiter gekommen. Allerdings hatte ich überhaupt nicht daran gedacht, den Radio in Pages zu erstellen.
Da geht es eindeutig einfacher mit der Unterteilung und ist auch noch responsiv!

Musste nur das noch zusätzlich in .pages-content einfügen

Code: Alles auswählen

width: 100%;   
   column-count: 4;
   column-rule-color: #333333;
   column-rule-width: 5px;
   column-rule-style: solid;   

Hier nochmals das Bild aus meiner Pages Backround Anfrage [ externes Bild ]
Irgendwann klappt es bestimmt noch mit der selber erstellten responsiven html Seite mit Tabelle!
Startseite: https://www.my-tastenworld.ch
Mein Portal: https://www.portal.my-tastenworld.ch/Mein Forum: https://www.forum.my-tastenworld.ch/

Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1898
Registriert: 15.10.2012 03:27

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Melmac » 25.07.2017 23:17

Wie wäre es damit: Responsive Data Tables ?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
gn#36
Administrator
Administrator
Beiträge: 9133
Registriert: 01.10.2006 16:20
Wohnort: Ganz in der Nähe...
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon gn#36 » 26.07.2017 07:25

phpBB selbst löst das in meinen Augen ziemlich gut. Um zu sehen wie es funktioniert kannst du dir z.B. meine Hookup Erweiterung installieren und ganz viele Datumseinträge hinzufügen, so dass die Tabelle schön breit wird. Wenn du die Ansicht klein machst schrumpft die Tabelle mit und sortiert sich um. In Melmacs Link bräuchtest du einen eigenen CSS Header für jede spezifische Tabelle, wenn ich das richtig gesehen habe, phpBB hat das auch ohne hingekriegt.
Begegnungen mit dem Chaos sind fast unvermeidlich, Aber nicht katastrophal, solange man den Durchblick behält.
Übertreiben sollte man's im Forum aber nicht mit dem Chaos, denn da sollen ja andere durchblicken und nicht nur man selbst.

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 634
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon Tastenplayer » 26.07.2017 21:21

Melmac hat geschrieben:Wie wäre es damit: Responsive Data Tables ?

Danke Melmac, da war ich vor 30 Minuten grad gelandet. Erschien mir kompliziert :)

@ gn#36
Gut schau mir das mal an - allerdings steht da für 3.1.x - funktioniert das in 3.2.0?
Startseite: https://www.my-tastenworld.ch
Mein Portal: https://www.portal.my-tastenworld.ch/Mein Forum: https://www.forum.my-tastenworld.ch/

Be the best version of yourself rather than a bad copy of someone else!

Benutzeravatar
gn#36
Administrator
Administrator
Beiträge: 9133
Registriert: 01.10.2006 16:20
Wohnort: Ganz in der Nähe...
Kontaktdaten:

Re: 1 html Seite mit 1 Tabelle responsiv anpassen

Beitragvon gn#36 » 26.07.2017 22:12

Die Version für 3.2.0 kannst du dir von Github laden - ist noch im Test, wird aber denke ich nicht mehr groß geändert. Aber es geht dir ja dachte ich nur um das Tabellenhandling, dafür könntest du dir ja lokal ein 3.1.x installieren.
Begegnungen mit dem Chaos sind fast unvermeidlich, Aber nicht katastrophal, solange man den Durchblick behält.
Übertreiben sollte man's im Forum aber nicht mit dem Chaos, denn da sollen ja andere durchblicken und nicht nur man selbst.


Zurück zu „Coding & Technik“