Frage zu Flexibles Layout

[Maetzzen]

Hallo zusammen,

ich möchte gerne meine Website mobiltauglich(er) gestalten. Bisher habe ich alles mit Größenangaben in px zusammengehalten. Für mich anfangs leicht verständlich und das einzige, das mir bekannt vorkam :) Jedoch sei das nicht die optimalste Lösung um die Seite bei verschiedenen Viewports leserlich darzustellen. Ich habe mich bereits zu den Themen Viewport und Flexbox eingelesen und bin dabei auf das Flexbox-Beispiel mit drei Spalten gestoßen. Da es mir sehr schwer fällt meine Website - die mehr oder weniger durch code&fix entstanden ist - umzukrempeln, habe ich einfach dieses Beispiel zum testen eins zu eins übernommen. Schließlich muss ich das Flexible Layout erst ein mal verstehen, bevor ich meine Seite umbaue.

Jedoch war ich ein wenig verwundert, als ich das von mir modifizierte Beispiel aufgerufen habe.

So wird das o.g. Original-Beispiel bei mir dargestellt. "Das Wichtigste" befindet sich zentriert in der Mitte, an beiden Seiten sind weiße Balken.

Und so sieht das Ganze aus, wenn ich "meine Datei" im Localhost oder auf meiner Website ansehe. "Das Wichtigste" wird über die ganze Breite, ohne weiße Balken, angezeigt. Es handelt sich um denselben Code, selber Browser, selbe Einstellungen (viewport, zoom).

1. An was genau liegt das?

2. Wie genau kann ich den Code aus o.g. Beispiel so ändern, dass bei breiten Bildschirmen an den Seiten "freie Balken" sind?

Bisher habe ich meinen Wunsch "Seiteninhalt zentriert in der Mitte der Seite darstellen" immer folgendermaßen erfüllt:

html{
width: 50%;
margin: auto;
}

oder

html{
width: 1000px;
margin: auto;
}

Dies möchte ich gerne beibehalten, jedoch nur bei "großen" Bildschirmen. Die Seite soll also bei breiten Bildschirmen nicht ins weite horizontale wachsen, sondern zentriert und kompakt in der Mitte des Bildschirms bleiben.

3. Kann ich das in etwa so umsetzen?:

@media all and (min-width: 80em) {
    html{
        width: 70%;
    }

Ich hoffe ich habe meine Frage verständlich formuliert. Gerne liefere ich auch mehr Informationen, falls nötig.

Ich bedanke mich schon mal im Voraus für eure Antworten :)

Gruß Maetzzen

[MrMurphy1]

Hallo

Ohne Link zu deiner Webseite werden wir dir nicht konkret helfen können.

1. An was genau liegt das?

An den Einstellungen deines Rechners, die wir nicht kennen und auf die wir weder Zugriff haben noch Zugriff haben wollen.

2. Wie genau kann ich den Code ...

Das html-Element in der Breite zu begrenzen war noch nie sinnvoll. Breiten solltest du ausnahmsweise, nur ganz ausnahmsweise, dem body-Element zuweisen, besser meist den einzelnen direkten Kindelementen des body-Elements. Damit hast du gleichzeitig viel mehr Möglichkeiten das Layout anzupassen, auch responsive.

3. Kann ich das in etwa so umsetzen?:

Gehört eigentlich auch zu Antwort zwei: Beschäftige dich mal mit max-width. Das erscheint mir für deine Vorstellungen sinnvoller.

Gruss

MrMurphy

[Maetzzen]

Ohne Link zu deiner Webseite werden wir dir nicht konkret helfen können.

Hab das hier bei mir hochgeladen.

Hier so wie ich es mir vorgestellt hatte.

Edit: Bis auf die Umlaute ist der Quelltext eigentlich identisch?

Das html-Element in der Breite zu begrenzen war noch nie sinnvoll. Breiten solltest du ausnahmsweise, nur ganz ausnahmsweise, dem body-Element zuweisen, besser meist den einzelnen direkten Kindelementen des body-Elements. Damit hast du gleichzeitig viel mehr Möglichkeiten das Layout anzupassen, auch responsive.

Das mache ich auch. Jedoch ging es mir darum, dass ich nicht will, dass bei breiten Bildschirmen der Inhalt so weit g e s t r e c k t aussieht.

3. Kann ich das in etwa so umsetzen?:

Gehört eigentlich auch zu Antwort zwei: Beschäftige dich mal mit max-width. Das erscheint mir für deine Vorstellungen sinnvoller.

Muss ich mal ausprobieren.

Danke!

Gruß Maetzzen

[MrMurphy1]

Hallo

Irgend etwas ist bei deiner Umsetzung schiefgelaufen.

So hat bei dir die Datei

./Beispiel:SELFHTML-Beispiel-Grundlayout.css

einen anderen Inhalt als bei selfhtml.

Die "falschen" Umlaute / Sonderzeichen entstehen entweder weil dein Editor UFT-8 nicht unterstützt oder nicht darauf eingestellt ist oder weil du als Vorlage eine Datei mit einer anderen Zeichenkodierung gewählt hast. Die wird von den Editoren dann in der Regel beibehalten.

Das mache ich auch. Jedoch ging es mir darum, dass ich nicht will, dass bei breiten Bildschirmen der Inhalt so weit g e s t r e c k t aussieht.

Bei selfhtml hat das body-Element eine max-width von 60em, die bei dir fehlt.

Insgesamt solltest du bei Flexbox deine Lösungen grundsätzlich in allen gebräuchlichen, greifbaren Browsern testen, also unter Windows mit FF, IE11, Chrome und Opera. Die haben alle ihre Eigenheiten bei Flexbox und benötigen deshalb manchmal Nachhilfe.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Breiten solltest du ausnahmsweise, nur ganz ausnahmsweise, dem body-Element zuweisen,

Warum?

besser meist den einzelnen direkten Kindelementen des body-Elements.

Das birgt mehr Aufwand und mehr Fehlerpotential in sich. Für das hier gewünschte Layout sollte die Breitenbeschränkung des body zielführend sein.

In etlichen anderen Fällen auch. Ich würde da nicht von „nur ganz ausnahmsweise“ sprechen.

LLAP 🖖

[Gunnar Bittersmann]

@@Maetzzen

3. Kann ich das in etwa so umsetzen?:

@media all and (min-width: 80em) {
    html{
        width: 70%;
    }

Das halte ich nicht für sinnvoll.

• Dass das html-Wurzelelement für den gesamten Viewport stehen sollte, hat MrMurphy1 ja schon angedeutet.

• Durch die Prozentangabe kann der Bereich bei breiten Viewports auch sehr breit werden. Eine Textzeile sollte jedoch nicht beliebig breit werden; sie sollte nicht mehr als etwa 85 Zeichen lang sein, optimal etwa 65 Zeichen.

• Einen media query brauchst du hier nicht; du kannst die Maximalbreite angeben:

body
{
  max-width: 42em;
  margin: auto;
}

LLAP 🖖

[Maetzzen]

body
{
  max-width: 42em;
  margin: auto;
}

Danke! So hatte ich mir das vorgestellt.

• Bei "kleinem Fenster" über die ganze Breite
• Bei "großem Fenster" die max-width Festgelegt und zentriert.

Gruß Maetzzen