Layout mit zwei Spalten - Seite 2

cloned · #11 (**permalink**) 15.05.2019, 10:20

Was hier noch zu sagen ist: Wird die Sidebar nur dafür verwendet ein Hintergrundbild anzuzeigen dann ist das auch nicht sinnvoll und zielführend, dann kann das Hintergrundbild gleich auf eine große Seite gesetzt werden.

MrMurphy · #12 (**permalink**) 15.05.2019, 11:01

Richtig. Mir ist halt nicht klar ob das aside-Element noch mit Inhalt gefüllt wird oder nicht. Falls nicht wäre es richtig das Hintergrundbild in den body einzufügen und auf das aside-Element komplett zu verzichten. Wie schon geschrieben sind überflüssige Elemente nach den HTML5-Regeln zu vermeiden. Und leere Elemente sind immer überflüssig.

Mensch · #13 (**permalink**) 15.05.2019, 14:59

Zitat:

Zitat von cloned

Was heißt, funktioniert nicht? Was genau hast du probiert? nur position:fixed ist in deinem Fall nicht ausreichend, dein Element hat keine Höhe...

ja, war natürlich nicht besonders ausführlich, meine Aussage. Ich gelobe Besserung.

Zitat:

Zitat von MrMurphy

Jetzt ist deine Fragestellung technisch eine andere.

Fixed und Flexbox vertragen sich nicht, von Ausnahmen abgesehen. Die liegen in deiner Frage und deinem Beispiel aber nicht vor.

Zudem benutzt du noch zu viele Elemente (zum Beispiel den nie erforderlichen Wrapper), die entsprechend nach den HTML5-Regeln nicht verwendet werden sollen.

Wenn du in leeren Containern Hintergrundbilder verwenden willst musst du deren Größe angeben, da die ohne Inhalt keine Größe haben. Dazu sind die Einheiten vw und vh geeignet.

Um die Größe abhängig von der Fenstergröße zu ermitteln wird noch mit der calc-Anweisung gerechnet. Die Berechnung ist abhängig von der Bildgröße, genauer: Dem Verhältnis von Bildbreite zu Bildhöhe.

Flexbox ist in diesem Fall nicht erforderlich.

Ich habe mal eine Beispielseite erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Zwei-Spalten-Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
   <style>

   /*Layout*/
   @media all {
      .sidebar {
         background-image: url(https://picsum.photos/900/450);
         background-repeat: no-repeat;
         background-size: contain;
         width: 100%;
         height: calc(100vw * 0.485);
      }
   }
   @media only screen and (min-width: 901px) {
      .sidebar {
         background-image: url(https://picsum.photos/800/1200);
         position: fixed;
         top: 0;
         right: 0;
         width: calc(100vh * 0.668);
         height: 100vh;
      }
      .content {
         width: calc(100% - 100vh * 0.67 - 1rem);
         margin: 0.5rem;
      }
   }

   </style>
</head>
<body>
   <aside class="sidebar">
   </aside>
   <main class="content">
      <h1>Pyrenäen</h1>
      <p>Die Pyrenäen (spanisch Pirineos, französisch Pyrénées, baskisch Pirinioak, katalanisch Pirineus, aragonesisch Perinés und okzitanisch Pirenèus; von lateinisch Pyrenaei [montes] ‚das pyrenäische Gebirge zwischen Spanien und Gallien‘) sind eine rund 430 km lange Gebirgskette. Sie trennen die Iberische Halbinsel im Süden vom übrigen Europa im Norden und spannen vom Atlantischen Ozean im Westen (Golf von Biscaya) bis zum Mittelmeer im Osten (Golf de Roses). Sie sind Teil des Alpidischen Gebirgssystems.</p>
      <p>Die Staatsgrenze zwischen Frankreich und Spanien folgt im Wesentlichen dem Gebirgskamm. Mitten in den Pyrenäen liegt auch der Kleinstaat Andorra.</p>
      <p>Die Herkunft der Bezeichnung Pyrenäen ist unbekannt. Nach griechischer und römischer Literatur, u. a. nach Silius Italicus, sollen sie nach Pyrene, einer Figur aus der griechischen Mythologie, benannt worden sein.</p>
      <h2>Geographie</h2>
      <p>Die Pyrenäen werden unterteilt in die westlichen oder atlantischen Pyrenäen, die Hoch- oder Zentralpyrenäen und die östlichen Pyrenäen, zu denen der Pic du Canigou gehört. Der Bereich der Hochpyrenäen erstreckt sich vom Port de Canfranc im Westen bis zum Val d’Aran im Osten.</p>
      <p>Der höchste Berg ist mit 3.404 Metern der Pico de Aneto im Maladeta-Massiv. Es gibt rund zweihundert Gipfel über 3.000 m in den Pyrenäen. Die höchsten von ihnen sind vergletschert. Seit etwa Mitte des 19. Jahrhunderts ist ein starker Rückgang der Gletscher zu beobachten. Der ehemals sehr beeindruckende Ossoue-Gletscher am Vignemale hat viel von seiner einstigen Größe verloren.</p>
      <h2>Geologie</h2>
      <p>Die Pyrenäen entstanden wie die Alpen vor rund 50 bis 100 Millionen Jahren im Tertiär. Die westlichen Pyrenäen bestehen überwiegend aus Kalkstein, wogegen in den Zentralpyrenäen verschiedene Granite dominieren. Das Faltengebirge wurde vor allem während der Würmeiszeit mit einer geschlossenen Eisdecke überzogen. Durch die Eiszeit haben sich etliche Hängetäler und viele tausend Gletscherseen gebildet. Durch diese Randbedingungen kann es bei gleichzeitiger Schneeschmelze und starken Regenfällen zu großflächigen Verheerungen kommen, wie zum Beispiel bei den Überschwemmungen in den Pyrenäen 2013.</p>
   </main>
</body>
</html>

vielen herzlichen Dank für dein ausführliches und voll und ganz funktionierendes Beispiel, MrMurphy! das finde ich sehr sehr nett.
Alles ist so, wie ich es haben möchte. Vielen Dank!
ich kenne mich zwar ein bisschen mit CSS aus, aber ein Experte bin ich leider nicht. Daher verstehe ich ein paar Sachen nicht.

Code:

   @media all {
      .sidebar {
         background-image: url(https://picsum.photos/900/450);
         background-repeat: no-repeat;
         background-size: contain;
         width: 100%;
         height: calc(100vw * 0.485);
      }
   }

erhält man dann nicht eine Höhe von 48,5 % ?

Code:

         height: calc(100vw * 0.485);

Code:

   @media only screen and (min-width: 901px) {
      .sidebar {
         background-image: url(https://picsum.photos/800/1200);
         position: fixed;
         top: 0;
         right: 0;
         width: calc(100vh * 0.668);
         height: 100vh;
      }
   }

hier verstehe ich die folgende Zeile nicht:

Code:

         width: calc(100vh * 0.668);

hat man dann nicht eine breite von 66,8 %???

Auch die folgenden Zeilen verstehe ich nicht so recht.
Wieso wird in der Breite auch noch 1rem abgezogen?
Wieso wird da ein Außenabstand gesetzt?

Code:

   @media only screen and (min-width: 901px) {
      .content {
         width: calc(100% - 100vh * 0.67 - 1rem);
         margin: 0.5rem;
      }
   }

Zitat:

Zitat von cloned

Was hier noch zu sagen ist: Wird die Sidebar nur dafür verwendet ein Hintergrundbild anzuzeigen dann ist das auch nicht sinnvoll und zielführend, dann kann das Hintergrundbild gleich auf eine große Seite gesetzt werden.

Zitat:

Zitat von MrMurphy

Richtig. Mir ist halt nicht klar ob das aside-Element noch mit Inhalt gefüllt wird oder nicht. Falls nicht wäre es richtig das Hintergrundbild in den body einzufügen und auf das aside-Element komplett zu verzichten. Wie schon geschrieben sind überflüssige Elemente nach den HTML5-Regeln zu vermeiden. Und leere Elemente sind immer überflüssig.

in der SIDEBAR wird noch etwas Inhalt untergebracht. Dieses Element bleibt also nicht mehr.

Mensch · #14 (**permalink**) 15.05.2019, 16:30

habe mich jetzt noch einmal intensiv mit deinem Beispiel beschäftigt. Nun verstehe ich schon deutlich mehr.

Eine Frage habe ich aber noch zum folgenden:

Zitat:

Zitat von MrMurphy

Jetzt ist deine Fragestellung technisch eine andere.
Um die Größe abhängig von der Fenstergröße zu ermitteln wird noch mit der calc-Anweisung gerechnet. Die Berechnung ist abhängig von der Bildgröße, genauer: Dem Verhältnis von Bildbreite zu Bildhöhe.

was ist denn der Vorteil davon, wenn man die Breite über das Verhältnis von Bildbreite zu Bildhöhe berechnet?
Was ist denn daran besser im Vergleich zur breiten Angabe in Prozent?

MrMurphy · #15 (**permalink**) 15.05.2019, 16:34

Das zu erklären füllt ganze Kapitel in Büchern, damit ist der Beitrag in einem Forum schlicht überfordert.

Deshalb als Denkanstoß und Beginn der Einarbeitung.

In HTML und CSS hat die Einheit % (Prozent) ganz unterschiedliche Grundlagen. Und zwar häufig solche, die ohne Hintergrundwissen nicht erwartet werden. Siehe zum Beispiel:

Cascading Style Sheets { Grundlegendes : Prozentangaben in CSS }

Zudem sind viele %-Angaben nicht fest, heißt: Sie können keinen Raum schaffen. Das gilt speziell für height-Angaben. Das muss man schlicht lernen, ansonsten wird man immer wieder mit unerwarteten Größen und Abständen bei %-Angaben überrascht werden.

Um dem abzuhelfen wurden die Einheiten vw und vh eingeführt. Die verhalten sich leider wieder etwas anders als vergleichbare %-Angaben. Ein gedankliches Gleichsetzen von % mit vw oder vh führt deshalb in der Regel zu neuen Problemen.

Der große Vorteil ist aber, das vw und vh Größe und Platz schaffen können. Im Gegensatz zu % sind vw direkt einer Breite und vh direkt einer Höhe zugeordnet.

Deshalb ist

Zitat:

erhält man dann nicht eine Höhe von 48,5 % ?

und

Zitat:

hat man dann nicht eine breite von 66,8 %???

im CSS-Denken sachlich falsch. Bei %-Angaben muss die Grundlage angegeben werden.

Code:

height: calc(100vw * 0.485);

In diesem Beispiel hat der Container .sidebar eine Breite von 100% des ihn umgebenden Containers body. Das funktioniert. 100vw würden nicht funktionieren.

Die Höhe von .sidebar muss sich proportional zum Bild anpassen. Das geht nicht im %-Angaben, da die keine Höhe schaffen können. Rechnerisch wäre der Wert 0.5, da vw aber anders als % funktioniert bin ich durch ausprobieren auf 0.485 gekommen.

Code:

width: calc(100vh * 0.668);

Hier steht die Bildhöhe fest (100vh) und die Bildbreite muss angepasst werden. Da 100vh die sichtbare Bildhöhe ist kann der berechnete Wert fast direkt übernommen werden (800 / 1200).

Code:

 width: calc(100% - 100vh * 0.67 - 1rem);

Da .sidebar mit "position: fixed;" aus dem Dokumentenfluß genommen wurde, können andere Elemente darauf nicht mehr reagieren, also auch keinen Abstand halten.

Deshalb muss die Breite vom main-Element (.content) begrenzt werden. Also 100 % minus die Breite von .sidebar:

Code:

 width: calc(100% - 100vh * 0.67);

Allerdings hat .content noch einen Außenabstand von 0.5rem, der zu der Breite hinzugerechnet wird. Der muss deshalb zusätzlich abgezogen werden. Macht zweimal 0.5rem = 1rem. Deshalb

Code:

 width: calc(100% - 100vh * 0.67 - 1rem);

Mensch · #16 (**permalink**) 16.05.2019, 10:28

MrMuuphy ich danke dir recht herzlich für deine äußerst detaillierte Erklärung! Sehr nett von dir. Und es hilft mir sehr.

Mensch · #17 (**permalink**) 20.05.2019, 14:03

welche maximale Bildschirmgröße sollte man eigentlich bei der Erstellung einer Internetseite berücksichtigen?

cloned · #18 (**permalink**) 20.05.2019, 14:15

Gar keine. Um das auszuführen: Es soll überall gut aussehen. Das ist heutzutage problemlos möglich.

Mensch · #19 (**permalink**) 22.05.2019, 12:15

Zitat:

Zitat von cloned

Gar keine. Um das auszuführen: Es soll überall gut aussehen. Das ist heutzutage problemlos möglich.

wenn ich beispielsweise ein Hintergrundbild über die ganze Webseite verwenden möchte, dann wird ein Bild mit 1920 × 1080 Pixel wohl nicht reichen, nehme ich an. Reicht ein Bild mit den Ausmaßen 2560 × 1440 oder brauche ich das noch größer?

cloned · #20 (**permalink**) 22.05.2019, 12:55

Dann musst du ein Bild wählen welches auch auf großen Auflösungen gut ausschaut. Bei welchen Bildern das der Fall ist musst du für dich (und deine Website) entscheiden.

In der Regel bist du mit HD-Auflösung noch gut bedient.

Du kannst natürlich auch zB eine maximale Breite für Bilder vorgeben. Oder eben auf den Einsatz von pixel-Bildern (jpg, etc.) verzichten und statt dessen SVG nehmen.

https://developer.mozilla.org/de/doc...lement/picture Eine weitere Möglichkeit ist, für unterschiedliche Auflösungen unterschiedliche Bilder auszuliefern, dafür müssen aber die Bilder natürlich schon vorhanden sein.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Spalten Layout INKL. 1 Spalten Layout	miedsegadse	CSS	20	14.04.2011 00:02
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 10:50
Layout mit bis zu 7 Spalten (DIV)	michael-r	CSS	3	23.06.2009 18:26
3 Spalten Layout, mal anders	Sushimeister	CSS	2	05.03.2007 11:15
3 Spalten Layout in CSS	sisa	CSS	1	22.09.2006 09:28