Einzelnen Beitrag anzeigen
  #13 (permalink)  
Alt 15.05.2019, 14:59
Mensch Mensch ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 19
Mensch befindet sich auf einem aufstrebenden Ast
Lächeln

Zitat:
Zitat von cloned Beitrag anzeigen
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 Beitrag anzeigen
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 Beitrag anzeigen
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 Beitrag anzeigen
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.
Mit Zitat antworten