Divs ohne Zwischenabstände

[Rolf B]

Hallo Jochen,

Kennst Du (oder die Mitleser) ein einfaches Beispiel, ein Grundgerüst, für eine moderne Homepage?

Ein solches Grundgerüst beantwortet deine Frage nicht, glaube ich. Du hast ein konkretes Anliegen: Ein Header-Bereich (vermute ich), mit einem Bild links und rechts, und darin der Willkommentext.

Jonathan hat mit seiner @media-Abfrage insofern recht, dass ein solcher Header nur sinnvoll ist, wenn das Fenster eine Mindestbreite hat. Bei schmalen Viewports muss man das anders gestalten.

Die Idee mit @media hast Du aber - unabhängig vom Grid - verstanden?

Dafür müsstest Du Dir überlegen, wie dein Header-Bereich beispielsweise auf einem Handy aussehen soll, und über eine @media-Umschaltung muss man dann, wenn genug Platz ist, die für breite Viewports geeignete Darstellung aktivieren.

Wenn es NUR darum geht, ein Bild anzuzeigen, kann man das auch als Hintergrundbild machen. Zwei Hintergrundbilder gehen auch:

header {
   background-image: url(bild-1.webp), url(bild-1.webp);
   background-position: top left, top right;
   background-repeat: no-repeat;
   background-size: 130px 130px;
   padding: 0 calc(130px + 1em);
}

Das Komma ist hier der Schlüssel, damit "stapelt" man Hintergrundbilder. Aber durch den no-repeat und die unterschiedliche Positionierung ist eins rechts und eins links. Dazu gibt man noch ein horizontales Padding von Bildgröße plus 1em, damit der Text die Bilder nicht überlagert.

Viele Wege führen hier zum Ziel. Hintergrundbilder, Flexbox, Grid. Die Media-Abfrage für schmale Viewports ist ebenfalls wichtig. Such Dir den Weg, den Du am leichtesten verstehst.

Ich habe das hier mal gebastelt, mit der background-image Technik: https://jsfiddle.net/ca2orL30/. Als Breitenumschaltung ändere ich die Bildgröße und mache bei schmalen Viewports nur ein Bild. Das ist jetzt kein Designwunderwerk, nur eine grobe Idee, was man tun kann. Vorteil dieser Methode ist aus meiner Sicht, dass Du im HTML nichts mit den Bildern zu tun hast. Ob das für Dich ein Vorteil oder ein Nachteil ist, musst Du beurteilen.

Rolf