Grid-Layout mit verschiedenen CSS Aspekten

[Dajana]

Hallo allerseits,

Ich habe mich hier angemeldet, weil ich, natürlich, Hilfe beim erstellen einer Webseite suche. Ich bin im Tabellenzeitalter stehengeblieben und wage mich jetzt wieder an Neues.

Ich habe eine 1-Seiten-Webseite im Grid-Layout erstellt. Soweit ok.

Zunächst eine Frage: Der w3 Validator meckert über die Bezeichnung einzelner Gridzellen - Thema sectioning content. Muss man beim Grid auch bei den klassischen Bezeichnungen bleiben? Ich hatte es so verstanden, dass man die Zellen benennen/ansprechen kann, wie man möchte.

Problem 1: Grafiken

Die sollen natürlich responsiv sein. Ich hab es mit srcset und Prozenangaben probiert, das Logo will nicht so, wie ich es gern hätte. Am liebsten ausgetauscht (srcset?), je nach Ausgabegerät.

Problem 2: margin

Ich möchte gerne rundherum einen Außenrand (was ich früher mit extra Spalten/Zeilen oder dem "cellspace" gelöst hätte), damit der Inhalt nicht direkt an den Rand des Ausgabegerätes klatscht. Mit margin: 10px auto; (zur Zentrierung) scheint er das auch oben und unten zu machen, aber nicht rechts und links. Wie mach ich das im Gridlayout? Ich hab es aber bisher nicht hinbekommen.

Ich habe mir die Anleitungen/Erklärungen hier durchgelesen, habe inzwischen auch verstanden, das Grid die Flexbox (mit der ich mich bisher nicht beschäftigt habe) nicht ablöst, sondern ergänzt. Vielleicht muss/sollte ich beide kombinieren? Es wäre toll, wenn ich hier Hilfe finde. Ich sage schonmal vielen Dank :)

[Rolf B]

Hallo Dajana,

willkommen bei Selfhtml, und danke, dass Du Dich anmeldest, statt anonym zu bleiben.

Dein Problem lässt sich viel besser diskutieren, wenn Du die Seite online zur Besichtigung bereitstellst. Wenn Du sie noch nicht in einem eigenen Webspace hast, kannst Du ein Muster davon ggf. auch in Web-Labors wie jsfiddle oder codepen zeigen.

Beispielsweise ist margin:10px auto; eigentlich der korrekte Weg, um die Seite horizontal zu zentrieren. Wenn das nicht greift, kommen von irgendwoher Störeinflüsse. Das kann sehr viel sein, das muss man sehen: sprich: in den Entwicklertools des Browsers angucken.

Kennst Du die Entwicklertools eigentlich? F12 drücken - und den HTML Elementebaum (DOM genannt) inspizieren. Pro Element schauen, welche CSS Regeln greifen. Wäre deine Seite online, wäre das mein erster Schritt.

Rolf

[Dajana]

Danke Rolf, für die schnelle Antwort. Ich hab die Seite jetzt mal eingefügt. Kann ich mein erstes Posting noch irgendwie editieren und die Seite dort einfügen? Ich muss mich erst an das Forum-Layout gewöhnen ;)

Margin: Horizontal funktioniert es ja :) Dann fehlt noch vertikal.

[Dajana]

Ah, jetzt hab ich es kapiert und gefunden. Danke für den Hinweis zum Browsertool :)

Das Problem, wenn ich margin: 10px auto; auf margin: 10px 10px; setze, hab ich zwar den Außenrand rechts und links, aber die Seite an sich ist nicht mehr zentriert, weil ja das "auto" weg ist. Kann man beides haben? Also zentrierte Seite und Außenrand?

[Dajana]

Ah, jetzt hab ich es kapiert und gefunden. Danke für den Hinweis zum Browsertool :)

Ich habe jetzt solange probiert, bis ich zufrieden war ;) Meine Lösung: margin: 10px 2em;

Jetzt muss ich noch das Foto und das Logo in den Griff bekommen.

[Rolf B]

Hallo Dajana,

eigentlich musst Du dem body nur margin: 10px auto; geben. Zusammen mit der max-width wird dann ab genügend breiten Bildschirm zentriert.

Ein paar Anregungen noch:

• Angesichts deines grid-gap von 20px (was vermutlich als 1em besser aussähe, wenn jemand zoomt) brauchst Du eigentlich den Margin nicht, den das Browser-Stylesheet den p Elementen in contact, lang und header gibt. Verwende dort einfach ein div, bzw. lass das Element ganz weg. Eigentlich ist es nicht nötig. Eigenschaften wie text-align:right kannst Du auch auf das lang-Element setzen.
• Ein contact-Element gibt es in HTML nicht. Vielleicht gibt's das mal irgendwann, und dann kollidierst Du damit. Custom-Elemente müssen ein Minuszeichen enthalten, um das zu vermeiden (also z.B. x-contact). Du könntest aber auch ein <div class="contact"> verwenden.
• Das gleiche gilt für das lang-Element. Die &nbsp; im lang möchten eigentlich auch lieber ein padding-right des lang-Elements sein.
• Ein header möchte eine Überschrift enthalten (h1 Element). Dein Bild kannst Du dort hineinsetzen. Das text-align:center kannst Du auf das h1 Element legen. Dem h1 solltest Du auch noch margin:0 geben, sonst entsteht zu viel "Luft".
• Dein Voice&Mind Bild braucht auf jeden Fall einen alt-Text, z.B. alt="voice and mind".
• Klassen wie "right" und "center" sind - sorry - falsch. Man benennt Klassen nach dem Inhalt der Elemente, die sie darstellen, nicht nach Präsentationswünschen. Wenn Du möchtest, dass das p Element im lang Element rechtsbündigen Inhalt hat, dann schreibst Du das so ins CSS: `lang p { text-align:right; }. Wenn Du 17 Bereiche hast, deren Text rechtsbündig sein muss, dann überlege Dir, ob sie eine gemeinsame Fachlichkeit haben, und ob sie auf allen Bildschirmen rechtsbündig dazustellen nicht. Nichts ist blöder als ein Element mit class="right", dass auf dem Smartphone zu zentrieren ist.
• Dein article, der das Bild enthält, ist eigentlich ein aside 😀

Jetzt zum Grid:

Die fällt vielleicht auf, dass zwischen Bild und Text zu viel Platz ist. Das liegt daran, dass dein Grid zweispaltig ist und deshalb die Kontaktinformationen die Breite dominieren. Das geht eleganter, wenn man mehr Spalten benutzt:

body {
   grid-template: "contact contact lang"   35px
                  "header  header  header" auto
                  "bild    main    main"   1fr /
                   auto    auto    auto;
}

Deine Höhenangaben habe ich erstmal übernommen, um Dir zu zeigen, wie man grid-template-areas und grid-template-rows zusammenfassen kann. In dem Fall muss (meine ich) auch noch der Inhalt von grid-template-columns hinzu (hinter dem /), darum die drei Autos am Ende. Aber eigentlich kannst Du auf Höhen- und Breitenangaben verzichten, weil deine Seite durch die Dreispaltigkeit wunderbar ins Browserfenster "flutscht". Also einfach grid-template-areas, wie zuvor (nur 3-spaltig), ohne Angaben für template-rows und template-columns. Lass den Browser mal machen und füge nur eigene Breiten/Höhen ein, wenn es gar nicht anders geht.

Durch die Dreispaltigkeit und auto-Breite erübrigt sich auch die Rechtsbündigkeit von lang. Es wird nämlich dadurch nur genau so breit wie nötig, und kommt dadurch autmatisch an den rechten Rand.

Wenn Du ohnehin mit benannten Bereichen arbeitest, kannst Du die auch verwenden, statt Gridzeilen und -spalten abzuzählen:

contact {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
/* geht mit Areas so: */
contact {
    grid-area: contact;
}

Und jetzt noch was grundsätzliches: Man tut sich im responsiven Design leichter, wenn man dem mobile first Ansatz folgt. D.h.: die Media-Queries fügen Breite hinzu.

Ich habe mal ein wenig gebastelt: https://jsfiddle.net/Rolf_b/48eLwdvc/. Das ist mobile-first, und ich bleibe im grid-Layout. Aber: die Template-Areas verändern sich. Contact und Lang bleiben nebeneinander, und der Rest kommt untereinander. Der Header ist position:absolute (zu einem position:relative im body), damit er auf dem Bild liegt. Ansonsten ist das Bild auf dem Smartphone nur halb auf dem Bildschirm, wenn man die Seite startet, und dafür ist es zu schön.

Sobald genug Platz ist, wird das Grid dreispaltig, die Margins werden größer.

Und ich habe eine Weile gefummelt, damit das Bild bei schmalen Viewports, die aber noch zu breit für die "unter 30em" Ansicht sind, nicht zu dominant ist. Das ist dieses max-width:40vw (=40% der Fensterbreite) für aside img.

Guck Dir davon ab, was Dir gefällt. Das srcset musste ich weglassen weil da komischerweise die https-Sperre in Chrome greift.

Rolf

[Dajana]

Oh wow, vielen, vielen Dank. Da hab ich jetzt einiges abzuarbeiten und zu lernen :) Ich melde mich wieder, wenn ich es geschafft habe. Nochmal dankeschön und einen sonnigen Sonntag :)

[Dajana]

Wow, ich habe fertig :) Und keine Fehler mehr im Validator.

Hallo Rolf, ich habe alles durchgearbeitet und korrigiert und ergänzt. Soweit bin ich sehr zufrieden 😀

Das Logo: Also eigentlich gibt es ein großes Logo (wie jetzt gerade auf der Seite), welches auf kleinen Geräten durch das kleine Logo von Samstag ausgetauscht werden sollte, da dass große Logo angepasst einfach doof aussieht bzw. in das Bild rutscht. Ich nehme an, ich habe da noch einen Fehler in den Grid-Areas. Btw... Ich hab den Sinn der Artist Area als 3. Zeile nicht verstanden. Kannst du mir das bitte erklären? Vielleicht brauch ich auch einfach mal ne Pause, um dann wieder Bäume zu sehen ;) Und was bedeuten die einzelnen roten Punkte in den verschiedenen CSS Zeilen? Sind das Fehler? Ich sage einmal mehr vielen Dank und wünsche einen angenehmen Abend :)

[Rolf B]

Hallo Dajana,

jsfiddle ist sehr kleinkariert was "richtige Schreibweise" von CSS angeht. wenn er über ein Space meckert, ignoriere ich das.

Der artist Bereich in Zeile 3 ist für die Mobildarstellung. Die @media Query schaltet das um. Guck Dir einfach mal in den Entwicklertools vom Browser an, wo welche Zone landet. Der Firefox hat einen netten Visualisierer für Grids, aber in Chrome erkennt man es auch.

Rolf