CSS/Tutorials/Ausrichtung/variable Elemente nebeneinander

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Kapitel werden einige Beispiele vorgestellt, wie man Webseiten auflockert, indem Elemente bei genügend breitem Viewport nebeneinander angeordnet werden können.

Überschrift links

Das Layout soll die Überschrift als linke Box, den Textabsatz als rechte positionieren. Dabei soll sich die Breite des Absatzes am verfügbaren Platz, der neben der Überschrift bleibt, orientieren.[1]

Nebeneinander-1.png

Mit Flexbox können Sie den verfügbaren Leerraum verteilen:

Überschrift links positioniert ansehen …
<section>
  <h2>Überschrift</h2>
  <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. 
     Aber wo bleibt die Überschrift?
  </p>
</section>
   @media (min-width: 20em) {
      section {
         display: flex;
         align-items: center;
      }
      section p {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }
Die shorthand-flex-Eigenschaft regelt wie sich flexible Elemente an den tatsächlich verfügbaren Platz anpassen, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt. Mit flex-grow und flex-shrink können Sie Wachstum- und Schrumpffaktoren bestimmen, die das Verhalten bei geringeren und breiteren Breiten regelt.
Der Textabsatz erhält durch den Wert auto für flex-basis eine flexible Breite, die durch den Wachstumsfaktor und Schrumpfungsfaktor von je 1 begrenzt wird.

Pull quote links

Links neben den Text soll eine „Seitenansprache“ (engl. "pull quote"), bestehend aus Überschrift und einem Textabsatz positioniert werden. Die Anzahl der Textabsätze rechts soll flexibel sein.

Nebeneinander-2.png

Markup für Seitenansprache ansehen …
<header>
	<h2>Der Greenscreen</h2>
	<p>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</p>
</header>

Als semantisch passendes Container-Element wird ein header verwendet. Die Auszeichnung als h2 und p hat nichts damit zu tun, was davon in größerer Schrift dargestellt wird.

Nun wird der Bereich von .info (bei genügend breitem Viewport und Browserunterstützung von grid) in 2 Spalten info-header und info-body geteilt:

CSS-Abfrage ansehen …
@supports (display: grid) {
	@media (min-width: 40em) {
		.info {
			display: grid;
			grid-template-columns:
				[info-header-start] 1fr
				[info-header-end info-body-start] 1fr
				[info-body-end];
			grid-template-rows: 1fr 1fr;
		}
	}
}

Der header kommt in die Spalte info-header; der Rest in info-body:

CSS-Abfrage ansehen …
.info header
{
	grid-column: info-header;
	grid-row: 1 / -1;
}

.info > *
{
	grid-column: info-body;
}

grid-template-rows/grid-row ist nötig, damit header die ganze Höhe füllen kann und nicht die Höhe der ersten Zelle in der Nachbarspalte bestimmt.

Page Floats

Sie werden es in diesem Tutorial schon gemerkt haben: Die Optimierung moderner Webseiten für mobile Geräte (Mobile First!) hat dazu geführt, dass mehrspaltige Layouts immer mehr in den Hintergrund geraten sind.

Trotzdem ist es sinnvoll und empfehlenswert bei größeren Viewports den vorhandenen Platz gut auszunutzen und analog zum Printdesign Textwüsten durch Abbildungen, Unterüberschriften und Pull Quotes aufzulockern.

W3C und WHATWG entwerfen zur Zeit einen First Public Working Draft von Page Floats, einem Modell, in dem diese figures (Abbildungen) innerhalb der flexiblen Spalten oben oder unten am Rand gefloatet werden können.[2]

Die float-Eigenschaft erhält so zwei weitere Werte:

  • inline-start
  • inline-end

Im Unterschied zu einer reinen rechts-links-Positionierung sind diese neuen Werte zweidimensional.[3] Bis jetzt (Stand Jahreswechsel 2020) werden sie nur vom Firefox unterstützt.


Page floats ansehen …
      img {
        width: 100%;
        margin: 1em 0 0;
		float: inline-start;
      }

Während das Beispiel auf schmalen Viewports responsiv ist und gut aussieht; werden die Bilder in der breiten Ansicht im Textfluss dargestellt und nicht dort, wo float: inline-start sie eigentlich positionieren will. So entstehen manchmal unschöne Einzelzeilen am Ende der Spalte.

Siehe auch

Quellen

  1. Frage im Self-Forum: zwei variabel breite Elemente zwingend nebeneinander vom 29.04.2016
  2. W3C: CSS Page Floats vom W3C First Public Working Draft, 15 September 2015)
  3. W3C: 2.2. Flow-Relative Values for the float and clear Properties