zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout mit zwei Spalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.05.2019, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 10
Mensch befindet sich auf einem aufstrebenden Ast
Standard Layout mit zwei Spalten

Hallo Leute,

Ich hätte gerne ein Layout mit zwei Spalten. Hierfür habe ich das folgende Beispiel gefunden:
https://codepen.io/Mexikaner9/pen/vwKEOW

ich möchte das Ganze jedoch etwas anders haben.
Und zwar sollte die SIDEBAR auf dem Smartphone über CONTENT sein.
Wie macht man denn das?

Oder muss man dazu CSS GRID verwenden?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.05.2019, 10:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.063
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Dafür sind entweder Flexbox oder CSS-Grid geeignet.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.05.2019, 11:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 10
Mensch befindet sich auf einem aufstrebenden Ast
Standard

danke für deine Antwort.
Hast du noch einen Tipp für mich, wo ich die Lösung für mein Problem finden kann?
Ich habe leider nichts gefunden, was mir weiterhelfen könnte.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.05.2019, 13:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.063
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Du hast doch selbst auf ein funktionierendes Beispiel verlinkt. Wenn du mit deiner eigenen Seite nicht weiterkommst und wir dir dabei helfen sollen musst du uns die schon zeigen. Oder halt konkrete Fragen stellen, am Besten mit einem Beispiel.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.05.2019, 14:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 10
Mensch befindet sich auf einem aufstrebenden Ast
Standard

iich habe das Beispiel, auf das ich verlinkt habe, etwas abgeändert.
Im HTML Code habe ich die SIDEBAR nun über CONTENT geschoben, aber nun ist die SIDEBAR auf einem breiten Display links, aber sie sollte recht sein.
Weiß nicht mehr weiter.

https://codepen.io/Menschenkind/pen/jorprY
Mit Zitat antworten
  #6 (permalink)  
Alt 12.05.2019, 16:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.063
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Entschuldigung, da hatte ich etwas geschlafen und die Frage aus deinem ersten Beitrag aus den Augen verloren.

Dafür gibt es bei Flexbox die order-Anweisung. Standardmäßig haben alle Items den Wert order = 0 (Null).

Mit der zusätzlichen Anweisung

Code:
order: 1;
in

Code:
.sidebar{
  width: 20%;
}
wird die .sidebar in der Ansicht (nicht im Quelltext) hinter .main geschoben und erscheint rechts davon.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.05.2019, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 10
Mensch befindet sich auf einem aufstrebenden Ast
Lächeln

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Entschuldigung, da hatte ich etwas geschlafen und die Frage aus deinem ersten Beitrag aus den Augen verloren.

Dafür gibt es bei Flexbox die order-Anweisung. Standardmäßig haben alle Items den Wert order = 0 (Null).

Mit der zusätzlichen Anweisung

Code:
order: 1;
in

Code:
.sidebar{
  width: 20%;
}
wird die .sidebar in der Ansicht (nicht im Quelltext) hinter .main geschoben und erscheint rechts davon.
vielen vielen Dank für deine Hilfe
Mit Zitat antworten
  #8 (permalink)  
Alt 14.05.2019, 17:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2019
Beiträge: 10
Mensch befindet sich auf einem aufstrebenden Ast
Standard

ich habe das Beispiel nun etwas ergänzt und so schaut es nun aus:

https://codepen.io/Menschenkind/pen/WBoPWQ

leider ist es nicht so, wie ich es haben möchte.
Ich möchte, dass die SIDEBAR auf einer Fensterbreite von 901 Pixel eine Höhe von 100 % hat, also damit meine ich die verfügbare Höhe vom Browserfenster und außerdem sollte sie fixiert sein.
mit
Position: fixed
funktioniert das leider nicht.

hat jemand eine Lösung für mich?
Mit Zitat antworten
  #9 (permalink)  
Alt 14.05.2019, 17:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.05.2019, 10:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.063
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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>

Geändert von MrMurphy (15.05.2019 um 10:22 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:50 Uhr.