nicht angemeldet
Problem bei Spalten mit CSS
marctrix
Rolf B
Gunnar BittersmannIch möchte ein Design mit CSS erstellen.
Das soll sich aus 4 Bereichen zusammenstellen.
Oben und Unten.
Links und rechts.
2 Sachen habe ich die ich nicht kapiere.
-
Warum muss ich im rechten DIV im margin 100 von oben setzen, obwohl im linken DIV nichts gesetzt wird und dort klappt es.
-
und was ich gar nicht verstehe, LINKS ist 30 % aber es ist viel breiter?
<div class="container">
<div class="oben">1</div>
<div class="links">2</div>
<div class="rechts">
</div>
<div class="unten">4</div>
</div>
* {
font-family: sans-serif;
color: #333333;
padding:0;
margin:0;
}
html, body {
height: 100%;
}
.container{width:80%;margin:0 auto;position: relative;min-height: 100%;}
.oben {height:100px;background:#ff0000;position:fixed;top: 0;width:80%;}
.unten {height:100px;background:#ff0000;position:fixed; bottom: 0;width:80%;}
.links {min-height:200px;background:#0000CC;width:30%;float:left;position:fixed;}
.rechts {min-height:200px;background:#00AA00;width:68%; margin:100px 0 0 32%;padding:0 0 100px 0;}
-
Hallo Josef.
Ich möchte ein Design mit CSS erstellen.
Das soll sich aus 4 Bereichen zusammenstellen.
Oben und Unten.
Links und rechts.
Das klingt nach
grid.MfG, at
-
-
Hej MrMurphy1,
nicht wundern, ich habe den Link hinzugefügt... 😉
Marc
-
-
-
Hallo Josef,
du hast da eine bunte Mischung aus Positionierungen, und alle haben ihre eigenen Tücken.
position:fixedundfloatnehmen ein Element aus dem normalen Fluss heraus. Das linke Element ist ein Float und damit nicht mehr wirklich Teil des container-div. Seine Breite wird deshalb auch nicht mehr basierend auf diesem div berechnet. Das siehst Du auch am oben-div, das hast Du mit 80% angegeben und es ist genau so breit wie der Container.Das links div bleibt aus dem gleichen Grund unter dem oben div. Sie sind beide aus dem normalen Fluss heraus, liegen also sozusagen auf gleicher Ebene. Das rechts div dagegen nicht, deshalb musst Du es mit margin von oben fernhalten.
Diese Begründungen habe ich mir jetzt auf Grund der Beobachtung zurechtgelegt. Hätte man mir das HTML/CSS trocken vorgelegt, hätte ich vermutlich was anderes erzählt 😉.
Du solltest ein konsistentes Positionierungsverfahren verwenden. Vermutlich werden sie aber alle einen "Nachteil" haben: Der Scrollbar wandert dann vom rechten Rand in den grünen Bereich hinein. Wenn das für dich ok ist, dann sind grid und flexbox eher das Mittel der Wahl.
Grundsätzlich solltest du dich auch an semantisches HTML gewöhnen. Statt eines Haufens div mit Klassen kann man Elemente wie header, footer, nav, main, section, article und aside verwenden. Also
<body> <header></header> <nav>Blauer Bereich</nav> <main>Lorem ipsum</main> <footer></footer> </body>Wenn dein .links Bereich keine Navigation ist, kannst Du dort auch aside verwenden.
Um das zu layouten, kannst Du dich mit flexbox und grid befassen.
Ein alternatives Verfahren, das ich vor einigen Jahren mal angewendet habe, ist ein Seiten-Layout mit position:absolute. Ich habe das hier mal rudimentär aufgebaut, es hat den "Vorteil", den neumodischen Schnickschnack wie flexbox und grid nicht zu brauchen und daher auch mit älteren Browsern zu kooperieren. Heutzutage ist dieser Vorteil aber kaum noch was wert.
Du positionierst dabei direkt, musst aber alles selbst ausrechnen.
header { position:absolute; left: 10%; width: 80%; top: 0px; height: 100px; } footer { position:absolute; left: 10%; width: 80%; bottom: 0px; height: 100px; } nav { position:absolute; left: 10%; width: 30%; top: 0px; bottom: 0px; } main { position:absolute; right: 10%; width: 40%; top: 0px; bottom: 0px; overflow-y:auto}Der Trick ist die gleichzeitige Verwendung von top und bottom, ohne Angabe von height. Damit werden die Boxen für .links und .rechts oben an den Header und unten an den Footer geklebt und passen sich der Fensterhöhe an. Einen Seiten-Scrollbar hat man dann nicht mehr, statt dessen bekommt der .rechts Bereich mit overflow-y:auto einen eigenen.
Mit flexbox geht es einfacher, weil man viel weniger magische Zahlen hat Hier das Beispiel. Ich habe die Höhe des body in vh angegeben (100vh = 100% Höhe Viewport), dann brauchst Du die 100% Höhe auf das html Element nicht. Das Beispiel zeigt zwei Flexbox-Bereiche. Einer vertikal, aus header, .mainBody und footer. Das div.mainBody ist ein Flex-Item und gleichzeitig eine Flexbox in horizontaler Richtung. Mit "flex:1" gibst Du an, dass das Item den freien Platz füllen soll und damit sparst Du die ganze Rechnerei.
Mit einem grid entfällt die Rechnerei komplett, und du kannst - wenn Du willst - sozusagen dein Layout in der CSS-Datei "aufmalen". Ein Beispiel wäre dies hier, aber schau Dir auch das Tutorial zu grid-Seitenlayout an, dass Du auf der von at verlinkten Seite findest.
Alle 3 Fiddles, die ich verlinkt habe, erzeugen das gleiche Ergebnis. Nur ist der Weg dahin mal mehr und mal weniger steinig 😀.
Rolf
--
Dosen sind silbern-
@@Rolf B
du hast da eine bunte Mischung aus Positionierungen, und alle haben ihre eigenen Tücken.
Du sagst es. Du hast auch nicht alle Tücken überschaut.
position:fixedundfloatnehmen ein Element aus dem normalen Fluss heraus. Das linke Element ist ein FloatNein, das ist es nicht.
den neumodischen Schnickschnack wie flexbox und grid nicht zu brauchen
Schnickschnack?? Und natürlich braucht man den zum Layouten; alles andere sind Hacks.
und daher auch mit älteren Browsern zu kooperieren. Heutzutage ist dieser Vorteil aber kaum noch was wert.
Du übertreibst maßlos.
Mit flexbox geht es
nur mit zusätzlichem Markup – bäh!
Mit einem grid
nutzt du das Werkzeug, das zum Seitenlayouten gedacht ist.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
sorry, ich hätte das alles mit dem fetten Ironiemarker anstreichen müssen.
Natürlich ist es kein Schnickschnack - höchstens für ewiggestrige Table-Layouter 😉
Das linke Element ist ein Float Nein, das ist es nicht.
Ich habe das IST beschrieben, nicht das SOLL. Also: ist es doch 😉
Soo schlecht, wie du tust, ist die position:absolute Lösung allerdings nicht. Die Boxen skalieren automatisch und mit Media Queries kann man alles nach Bedarf umpositionieren. Sicher, es ist heute nicht mehr die Technik der Wahl; mich hatte die Nostalgie gekitzelt.
Rolf
--
Dosen sind silbern-
@@Rolf B
Das linke Element ist ein Float Nein, das ist es nicht. Ich habe das IST beschrieben, nicht das SOLL.
Ich auch.
Also: ist es doch 😉
Nicht wirklich.
Spec: “Applies to: all, but see 9.7”
Darin: “if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'”
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
autsch. Den position:fixed hinter dem float:left hab ich glatt übersehen.
Heimtückisches Zeugs, das!
Rolf
--
Dosen sind silbern
-
-
-
-
Hej Rolf,
du hast da eine bunte Mischung aus Positionierungen, und alle haben ihre eigenen Tücken.
Die man kaum in ein vernünftiges und vor allem stabiles, responsives Layout umwandeln kann.
Du solltest ein konsistentes Positionierungsverfahren verwenden.
grid oder flexbox sind das Mittel der Wahl.
Wenn dein .links Bereich keine Navigation ist, kannst Du dort auch aside verwenden.
Passt oft, aber nicht immer, hängt vom Inhalt ab!
Ein alternatives Verfahren, das ich vor einigen Jahren mal angewendet habe, ist ein Seiten-Layout mit position:absolute. Ich habe das hier mal rudimentär aufgebaut, es hat den "Vorteil", den neumodischen Schnickschnack wie flexbox und grid nicht zu brauchen und daher auch mit älteren Browsern zu kooperieren. Heutzutage ist dieser Vorteil aber kaum noch was wert.
Du hast ja schon selber angesprochen, dass jede Layout-Technik ihre speziellen Eigenheiten hat. Oder (um es beim Namen zu nennen): sie haben ihre eigenen Nachteile.
Wobei Grid eine Sonderrolle einnimmt, weil sich der einzige Nachteil dieser Technik in absehbarer Zeit von selber erledigt: grid ist umständlich oder nicht verwendbar, wenn noch alte oder sehr alte Browser unterstützt werden müssen. Sobald sich das erledigt hat, sollte Grid für alle Layout-Aufgaben verwendet werden.
Und ja, @Gunnar Bittersmann, ich finde auch: untereinander stehende Boxen, die bedienbar sind, reichen als Fallback vollkommen aus (angesichts der Tatsache, dass diese kaum noch eine Rolle spielen und ihr Marktanteil weiter stetig sinkt).
Deine Technik, @Rolf B hat leider besonders gravierende Nachteile und nur einen Vorteil: funktioniert in uralten Browsern ohne nennenswerten Marktanteil. Aber wie du du selber anmerkst, ist das eigentlich gar kein Vorteil mehr. Besser nicht machen, auch wenn es schade ist, eine Technik aufgeben zu müssen, die man mal gerne eingesetzt hat (wobei die immer an mehreren Stellen problematisch war. Z. B. sollte man niemals Dimensionen in Pixeln angeben!)
Alle 3 Fiddles, die ich verlinkt habe, erzeugen das gleiche Ergebnis. Nur ist der Weg dahin mal mehr und mal weniger steinig 😀.
Sie erzeugen ganz und gar nicht das gleiche Ergebnis - es sieht nur auf den ersten Blick gleich aus. Besonders gut werden die Unterschiede sichtbar, wenn man responsiv arbeiten will; da wird man sehr schnell merken, wo die Steine liegen. 😉
Übrigens gibt es viele Layout-Beispiele im Web für Grid. Ich finde am besten ist die Grid-Beispiel-Sammlung von Rachel Andrew.
Marc
-