responsive/ adaptive ImageTable?
responsive/ adaptive ImageTable?
Ich habe wieder an meinem "flüssigen Raum" für Spezies "responsives/ adaptives Websitelayout" herumgebastelt. ImageTable scheint für diese Art des Layouts gar nicht geeignet zu sein, die wenigen Lösungsansätze im Netz zu Tabellen stellen mich nicht zufrieden, funktionieren nur, wenn dann sonst nicht ....
Hat schon mal jemand erfolgreich und auch simple dieses CP für eine responsive/ adaptive Website umgestrickt? Funktioniert das überhaupt oder ist ImageTable, wovon ich eher überzeugt bin eher ein Relikt der "only desktop site"
Hat schon mal jemand erfolgreich und auch simple dieses CP für eine responsive/ adaptive Website umgestrickt? Funktioniert das überhaupt oder ist ImageTable, wovon ich eher überzeugt bin eher ein Relikt der "only desktop site"
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Re: responsive/ adaptive ImageTable?
Der CP imagetable besteht zu genau 0% aus einem table-Konstrukt. Vielmehr sind da nur divs anzutreffen... es sei denn, man macht einen Haken in die Checkbox für "table"!
Also sollte damit was (responsives) gehen...
Also sollte damit was (responsives) gehen...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: responsive/ adaptive ImageTable?
Warum soll es nicht gehen? Natürlich geht das. Tabelle wird nur geliefert, wenn Du das auch erzwingst. Der Rest ist Klassenarbeit und das Verständnis, wie Responsive funktioniert.
Re: responsive/ adaptive ImageTable?
Ohne Checkbox-Haken, q&d und als poc:
Für den nächsten Test...
Code: Select all
div.image-wrapper{float:left;margin:10px;}
div.image-wrapper > img.image-thumb{width:100%;height:auto;display:block;}
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Re: responsive/ adaptive ImageTable?
Bin gerade beim "Einräumen", sitze nun schon seit um 6:30 Uhr am PC.
Danke für die schnellen Rückantworten, an der Haken für Tablelayout habe ich gar nicht mehr gedacht .
Klar, Haken raus und schon verkleinern sich beim Zusammenschieben auch die Bilder dieses CPs
jetzt ist Schluß, mache aber morgen weiter Dann werden die Bilder noch im Layout des CPs zentriert!
... Danke Claus, schaue ich mir morgen dann genauer an. Meinen Test kann man sich hier ansehen. Funktioniert auch mit meinem Samsung-Phone. Habe noch nicht die Lightbox ausgetauscht, das kommt dann am Schluß!
Danke für die schnellen Rückantworten, an der Haken für Tablelayout habe ich gar nicht mehr gedacht .
Klar, Haken raus und schon verkleinern sich beim Zusammenschieben auch die Bilder dieses CPs
jetzt ist Schluß, mache aber morgen weiter Dann werden die Bilder noch im Layout des CPs zentriert!
... Danke Claus, schaue ich mir morgen dann genauer an. Meinen Test kann man sich hier ansehen. Funktioniert auch mit meinem Samsung-Phone. Habe noch nicht die Lightbox ausgetauscht, das kommt dann am Schluß!
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: responsive/ adaptive ImageTable?
Die Bilder würden sich auch bei Tabellen verkleinern, wenn die Tabelle responsive ist.
Re: responsive/ adaptive ImageTable?
Guten Morgen .... ... ich sitze schon wieder an meinem Testgerödel. Ich muss mal an dieser Stelle einen weiteren Frageteil öffnen - der Sache geschuldet, dass es mit einigen Ausgabegeräten mit älteren Adroid/ iOS-Systemen Probleme mit der device-width Media-Query zu geben scheint.
Auf einem meiner Testgeräte, einem Touchlet X5 (Android 4.0.3) habe ich u.a. den Firefox mobil (in neuster Version) online und den simplen Android-Webbroser. Letzterer hat anscheined Probleme mit der korrekten Darstellung.
Dagegen spielt der Firefox mobil absolut zufriedenstellend die Testseite ab, so wie auch auf meinem Desktop zu sehen.
wird ignoriert ( ), erst mit einem Doppel-Touch auf dem Bildschirm erscheint die Seite im richtig "gezomten" Format, beim Drehen der Bildschirms geht das Spiel wieder von vorne los.
Laut Netzgemeinde ist dies aber nicht das einzige Gerät, das hier nicht mitspielt. Es soll dazu ein Javascript-Bugfix von Scott Jehl für die älteren Android-Betriebssysteme zur Verfügung stehen. Macht es Sinn, dieses Script im Footer unterzubringen oder hat Oliver bereits ein solches Bugfix untergebracht ... Nur hat es noch keiner gemerkt, wo/ wie dieses aktiviert werden müsste.
Auf einem meiner Testgeräte, einem Touchlet X5 (Android 4.0.3) habe ich u.a. den Firefox mobil (in neuster Version) online und den simplen Android-Webbroser. Letzterer hat anscheined Probleme mit der korrekten Darstellung.
Dagegen spielt der Firefox mobil absolut zufriedenstellend die Testseite ab, so wie auch auf meinem Desktop zu sehen.
Code: Select all
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Laut Netzgemeinde ist dies aber nicht das einzige Gerät, das hier nicht mitspielt. Es soll dazu ein Javascript-Bugfix von Scott Jehl für die älteren Android-Betriebssysteme zur Verfügung stehen. Macht es Sinn, dieses Script im Footer unterzubringen oder hat Oliver bereits ein solches Bugfix untergebracht ... Nur hat es noch keiner gemerkt, wo/ wie dieses aktiviert werden müsste.
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Re: responsive/ adaptive ImageTable?
Habe heute mich wieder mit diesem Thema beschäfftigt.
Für die Einstellung [Bild über und unter dem Text] funktioniert es für eine Spalte wie gewollt.
Mehrspaltige Bilderreihen bekomme ich nicht hin, das DIV-Konstrukt wird u.U. bei ungeraden Bilderanzahl bei Einsatz von Float vor dem letzten Bild beendet
aktueller Stand CSS:
Da ja noch die Klassen .first und .row-n rumschwirren, würde ich mal drauf tippen, dass hier (mit einem CSS-Zähler?) die Sache zu stemmen sei
Für die Einstellung [Bild über und unter dem Text] funktioniert es für eine Spalte wie gewollt.
Mehrspaltige Bilderreihen bekomme ich nicht hin, das DIV-Konstrukt wird u.U. bei ungeraden Bilderanzahl bei Einsatz von Float vor dem letzten Bild beendet
aktueller Stand CSS:
Code: Select all
.image-table { border: 1px solid #c4c4c4; margin: 0 auto; }
.imgtable-bottom-center,
.imgtable-top-center { text-align: center; }
.image-wrapper.first { }
.image-wrapper { display: block; height: auto; max-width: 100%; }
.image-thumb { margin: 4px 0; }
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: responsive/ adaptive ImageTable?
hat halt nichts mit dem phpwcms zu tun. Ist reine CSS-Arbeit
Re: responsive/ adaptive ImageTable?
Auf die Schnelle: Probier mal
Dann noch ein media query mit
nur mal so dahingedacht...
Code: Select all
.image-wrapper{display:inline-block;}
.image-wrapper img.image-thumb{width:100%;height:auto;}
Code: Select all
.image-wrapper{width:100%}
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: responsive/ adaptive ImageTable?
wenn man dem Wrapper 100% mitgibt, dann ist der display: block. Und img braucht auch eine display-Anweisung.
Code: Select all
.image-wrapper {
display: block; /* width=100% */
}
.image-wrapper img.image-thumb,
.image-responsive {
display: block;
width: 100%;
max-width: 100%; /* nie breiter als Elternelement */
height: auto;
}
Re: responsive/ adaptive ImageTable?
Aber wenn der image-wrapper 100% hat, gibt's nie die 2 Spalten
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
- Oliver Georgi
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: responsive/ adaptive ImageTable?
selbst dann muss man block nehmen, weil man die Mehrspaltigkeit nur sauber mit float hinbekommt.
Re: responsive/ adaptive ImageTable?
Anhand der Vorschläge von Claus nehme ich mal ganz stark an, dass noch niemand (außer OG?) eine solche responsive Template-Vorlage incl. CSS-Steuerung für phpWCMS mittels Boardmitteln gemacht hat. Andere Open Source Projekte degegen haben solche Templates bereits inclusive - man schaut ja gerne mal auch über den Tellerrand.
Eigentlich wollte ich das auch für andere machen, in der Hoffnung, dass man mal eine gemeinsame Vorlage erstellt, die alle (wer eigentlich?) mitnutzen, aber bis auf Claus und mir nicht bekannte Mitleser scheint es niemanden weiter zu interessieren, hier ein wenig voranzuspreschen. Ich habe auch bemerkt, dass viele vorgestellte Websites mit der Zeit entweder gar nicht mehr existieren , nicht mehr mit phpWCMS gehostet sind oder halt mit anderen Systemen auf responsiv/ addaptiv/ mobil umgerubelt wurden.
Tja. Tel A'Viv, so is mänschlicha Läben, hart aber herzlich!
Eigentlich wollte ich das auch für andere machen, in der Hoffnung, dass man mal eine gemeinsame Vorlage erstellt, die alle (wer eigentlich?) mitnutzen, aber bis auf Claus und mir nicht bekannte Mitleser scheint es niemanden weiter zu interessieren, hier ein wenig voranzuspreschen. Ich habe auch bemerkt, dass viele vorgestellte Websites mit der Zeit entweder gar nicht mehr existieren , nicht mehr mit phpWCMS gehostet sind oder halt mit anderen Systemen auf responsiv/ addaptiv/ mobil umgerubelt wurden.
Tja. Tel A'Viv, so is mänschlicha Läben, hart aber herzlich!
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive