Layout-Problem

[misterunknown]

Moin,

ich möchte eine (mobile) Seite bauen, die Folgenden Aufbau hat:

-------------------------------------
|             Header                |     <- <header></header>
-------------------------------------
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|              Bild                 |     <- <img />
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |

Button 1
-----------------------------------

Nun ist das ja kein großes Problem. Allerdings möchte ich, dass die Seite insgesamt _immer_ 100% des Viewports einnimmt, man also nicht vertikal scrollen muss. Demzufolge darf das Bild nicht zu groß werden, soll aber so groß wie möglich sein. Nun könnte ich zwar jeweils dem Header, dem Bild und dem Div (für die Buttons) einen Prozentwert geben (10%, 70%, 20%), dann sieht es aber auf dem Desktop nicht wirklich gut aus, daher habe ich dem header und dem div em-Werte für die Höhe gegeben.

Wie könnte ich das Bild (möglichst ohne Javascript) so skalieren, dass kein Scrollen nötig ist, das Bild aber so groß wie möglich angezeigt wird?

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Allerdings möchte ich, dass die Seite insgesamt _immer_ 100% des Viewports einnimmt

Absolute Positionierung von header und div?

Demzufolge darf das Bild nicht zu groß werden, soll aber so groß wie möglich sein.

Was soll das heißen? Soll das ganze Bild zu sehen sein oder nur vollständig in der Höhe oder in der Breite?

Wie könnte ich das Bild (möglichst ohne Javascript) so skalieren

calc() kennst du?

Qapla'

[misterunknown]

Moin,

Absolute Positionierung von header und div?

Ja, das habe ich gerade probiert...

Was soll das heißen? Soll das ganze Bild zu sehen sein oder nur vollständig in der Höhe oder in der Breite?

Ja, das ganze Bild soll zu sehen sein. Sowohl vollständig in der Höhe, als auch in der Breite.

calc() kennst du?

Jetzt, wo du es sagst^^ Allerdings macht mein Chrome gerade Mucken: calc() wird als ungültige Eigenschaft für height angesehen...

img {  
    display:block;  
    max-width: 100%;  
    height: calc(100% - 15em);  
}

Grüße Marco

[Gunther]

Moin!

ich möchte eine (mobile) Seite bauen,

Was ist denn daran "mobile"!?
Du möchtest wahrscheinlich ein responsives Layout erstellen ...!

die Folgenden Aufbau hat:

|             Header                |     <- <header></header>

|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|              Bild                 |     <- <img />
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |

Button 1
-----------------------------------

Nun ist das ja kein großes Problem. Allerdings möchte ich, dass die Seite insgesamt _immer_ 100% des Viewports einnimmt, man also nicht vertikal scrollen muss.

Sorry, aber ich versuche mir das gerade vorzustellen, wie sich ein solches Layout u.a. auf einem Viewport von 320px x 480px und 1920px x 1080px darstellt. Bei letzterem wird das Bild dann aber bspw. sehr groß ...!

Demzufolge darf das Bild nicht zu groß werden, soll aber so groß wie möglich sein. Nun könnte ich zwar jeweils dem Header, dem Bild und dem Div (für die Buttons) einen Prozentwert geben (10%, 70%, 20%), dann sieht es aber auf dem Desktop nicht wirklich gut aus, daher habe ich dem header und dem div em-Werte für die Höhe gegeben.

Wie könnte ich das Bild (möglichst ohne Javascript) so skalieren, dass kein Scrollen nötig ist, das Bild aber so groß wie möglich angezeigt wird?

Packe das Image in ein Container-Element, welches entsprechend der Viewportgröße skaliert.
Dann brauchst du für dein(e) Image(s) lediglich:

img {max-width: 100%;}  

Gruß Gunther

[misterunknown]

Moin,

Was ist denn daran "mobile"!?
Du möchtest wahrscheinlich ein responsives Layout erstellen ...!

Naja, grundsätzlich soll es erstmal eine HTML5-App mit PhoneGap werden. Ob das gleich responsive mache und als Webapp anbiete, weiß ich noch nicht genau.

Sorry, aber ich versuche mir das gerade vorzustellen, wie sich ein solches Layout u.a. auf einem Viewport von 320px x 480px und 1920px x 1080px darstellt. Bei letzterem wird das Bild dann aber bspw. sehr groß ...!

Ja, das stimmt, aber dadurch, dass es primär als App laufen soll, und von daher hauütsächlich Devices zwischen 4" und 10" Zielgruppe sind, ist das ok.

Packe das Image in ein Container-Element, welches entsprechend der Viewportgröße skaliert.
Dann brauchst du für dein(e) Image(s) lediglich:
img {max-width: 100%;}

Naja, das Problem ist, dass Header und Footer (also die Buttons) ja absolut positioniert werden und daher das Bild teilweise unter denselben liegen kann, was nicht gewollt ist. Ich habe es zwar mit calc() und einem margin-top versucht, das funktionierte aber bei mir weder im FF noch im Chrome. Allerdings habe ich vorhin irgendetwas gelesen, dass calc() als CSS-Funktion wohl auch Prefixes hat. Das werde ich mal testen.

Grüße Marco

[Gunther]

Moin!

Was ist denn daran "mobile"!?
Du möchtest wahrscheinlich ein responsives Layout erstellen ...!

Naja, grundsätzlich soll es erstmal eine HTML5-App mit PhoneGap werden. Ob das gleich responsive mache und als Webapp anbiete, weiß ich noch nicht genau.

Keine Ahnung ob und wie gut PhoneGap mit HTML5 und CSS3 zurechtkommt, nur hast du dann doch eh eine fertige Website ...!

Sorry, aber ich versuche mir das gerade vorzustellen, wie sich ein solches Layout u.a. auf einem Viewport von 320px x 480px und 1920px x 1080px darstellt. Bei letzterem wird das Bild dann aber bspw. sehr groß ...!

Ja, das stimmt, aber dadurch, dass es primär als App laufen soll, und von daher hauütsächlich Devices zwischen 4" und 10" Zielgruppe sind, ist das ok.

OK, und dafür gibt es ja Media Queries ...!

Packe das Image in ein Container-Element, welches entsprechend der Viewportgröße skaliert.
Dann brauchst du für dein(e) Image(s) lediglich:
img {max-width: 100%;}

Naja, das Problem ist, dass Header und Footer (also die Buttons) ja absolut positioniert werden und daher das Bild teilweise unter denselben liegen kann, was nicht gewollt ist. Ich habe es zwar mit calc() und einem margin-top versucht, das funktionierte aber bei mir weder im FF noch im Chrome. Allerdings habe ich vorhin irgendetwas gelesen, dass calc() als CSS-Funktion wohl auch Prefixes hat. Das werde ich mal testen.

Wenn Header und Footer eine feste Höhe (relative Größenangabe) haben, ist das doch ganz simpel. Und wenn nicht, ist es imho mit reinem CSS nur per 'Flexbox' machbar.

Relative Einheiten, insbesondere 'vw' und 'vh', in Kombination mit 'calc()' sind da sehr hilfreich (sofern PhoneGap das entsprechend umsetzen kann!?).

Gruß Gunther

[misterunknown]

Moin,

Keine Ahnung ob und wie gut PhoneGap mit HTML5 und CSS3 zurechtkommt, nur hast du dann doch eh eine fertige Website ...!

Das stimmt. Nur brauchen wir dazu einen Webserver. Für die App würde ein MySQL-Hoster reichen. Es ist eben eine Preisfrage, und es kann durchaus sein, dass die Datenmengen schnell groß werden und für uns nicht mehr finanzierbar sind. Wir sind noch am überlegen, auf welcher serverseitigen Basis wir das ganze aufziehen. Eine Möglichkeit wäre Amazon S3, wegen der hohen Skalierbarkeit; wir möchten aber viele Möglichkeiten in Betracht ziehen und abwägen.

OK, und dafür gibt es ja Media Queries ...!

Korrekt.

Wenn Header und Footer eine feste Höhe (relative Größenangabe) haben, ist das doch ganz simpel. Und wenn nicht, ist es imho mit reinem CSS nur per 'Flexbox' machbar.

Für das Design an sich bin ich nicht zuständig, von daher weiß ich noch nicht genau, ob relative Einheiten für Header und Footer reichen, oder ob da was spezielles gemacht werden soll ;) Flexbox ist aber eine Möglichkeit, zumal unsere Zielplattformen (iOS, Android und Blackberry) das können.

Relative Einheiten, insbesondere 'vw' und 'vh', in Kombination mit 'calc()' sind da sehr hilfreich (sofern PhoneGap das entsprechend umsetzen kann!?).

Ich denke schon. PhoneGap ist eher für die Schnittstellen zum Device zuständig, d.h. Kamerafunktion, GPS-Daten, Medienzugriff etc.

Grüße Marco