Jetzt zufrieden?

[marctrix]

Hej @Meowsalot,

also nochmals auf ein neues. Ich habe es jetzt so umgesetzt wie ich es verstanden habe: https://codepen.io/anon/pen/YOpKOq

Das macht in meinen Augen Sinn!

So, weiter geht es mit dem CSS. Bereit! 😀 Achtung, ich werde dich nciht loben, sondern nur Verbesserungsvoschläge machen!

Los gehts:

* {
	box-sizing: border-box;
}

Hast du nichts vergessen? - Was ist mit CSS-generiertem content wie ::before oder ::after? Möchtest du dafür den standardäßigen content-box-Wert?

#teaser {

Du weißt vermutlich, dass eine ID nur einmal pro Dokument vorkommen darf, aber ich habe dich so verstanden, als wolltest du dem Nutzer erlauben beliebig viele Instanzen Deiner Box pro Seite zu verwenden.

Hier beißt sich also die Umsetzung mit Deinem Konzept.

  display:flex;
  flex-flow:column;
  justify-content:center;
		max-width: 60.500em;

Wie kommst du denn auf die Dezimalstellen? - ich kann mit geraden Zahlen, insbesondere solchen die sich durch zwei, drei oder vier teilen lassen übliche Anforderungen wie goldener Schnitt oder 50:50 - Layouts viel besser umsetzen, als mit Boxen die 60.555 breit sind (egal welche Einheit ich verwende).

		margin: 0 auto;
		background-color: #efefef;

Hast du nciht weiße Schrift? - Vordergrund- und Hintergrundfarbe schreibe ich immer direjt untereinander, damit solche Fragen gar nciht erst aufkommen.

		padding: 4em 6em;
		min-height: 60vh;

Wie kommst du auf diesen Wert für die mindest-Höhe?

		background: linear-gradient(rgba(30,30,30,0.75), rgba(30,30,30,0.75), rgba(30,30,30,0.75)),

Nun eine dunkle Farbe, zu 75% deckend.

 url(https://images.unsplash.com/photo-1509635164051-5584296265cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=14cdb08a207bcc4c4969409a1ce90898&auto=format&fit=crop&w=1052&q=80);

Die letzte Farbe wird wiederum durch ein Bild überdeckt. Willst du dem Nutzer überlassen für ausreichend Kontrast zu sorgen? - Ich fürchte, das geht schief. Oder bietest du eine Auswahl an Bildern an, die du so ausgewählt hast, dass der Nutzer nichts falsch machen kann?

		background-repeat: no-repeat;
		background-size: cover;
		color: #fff;
	}

#teaser .dachzeile {
	font-size: 1em;
	font-weight: bold;
  	display: block;
  	margin-bottom: 0.8em;
  	margin-left: 0;
  	order:1;
}

.dachzeile ist eine Präsentationsbezogene Bezeichnung. Finde eine semantische (z.B. .summary oder .why-to-read-me) was etwas über den Zweck des erwarteten Textes aussagt. Warum? Weil du den Template dann in einem breiteren Einsatzbereich verwenden kannst - auch nach eine Redesign, wenn der hier einzugebende Text an anderer Stelle (z.B. hiochkant am linken rand oder unter der Überschrift) ausgegeben werden soll.

Im übrigens würde ich persönlich englische Bezeichnungen finden wollen.

#teaser h2 {
	font-size: 5vw; /* passt auf mobiles*/
    margin: -20px 0 0 0;
    text-transform: uppercase;
    order: 2;
}

Warum diese Reihenfolge? Ich schreibe mein CSS immer so, dass es dem DOM folgt.

Dann findet man sich leichter zurecht.

Die Eigenschaft order hat einen Standard-Wert. Um ein einzelnes Element (wie hier den aufmerksamkeitshascher) über die Überschrift zu bekommen, genügt es diesem einen Element einen Wert zuzuweisen, der geringer ist. Für die h2 und das p musst du dann ncihts mehr angeben.

Weißt du was passiert, wenn du allen p denselben Wert für order gibst? - Richtig, genau das was passiert, wenn sie den Standard-Wert haben. Sie werden in der Reihenfolge angezeigt, wie sie im HTML vorkommen. Aber das ist wohl nur Glück gewesen. 😉

Der Standard-Wert ist übrigens "0" und negative Werte sind erlaubt.

#teaser p {
	margin-left: 13vw; /* passt auf mobiles */
	margin-bottom:0;
	order: 3;
}

@media screen and (max-width: 750px) {

Wie hier mehrfach erwähnt, machst du dir (und mobilen Geräten) das Leben leichter, wenn du dich an das bewährte Konzept "mobile first" hältst.

	#teaser {
		max-width: 60.500em;
		padding: 1.5em; 
		min-height: 43vh;
	}

Den krummen Wert mit der max-width hatten wir doch schon mal? − Don't repeat yourself. Du musst nicht in die media-query Dinge aufnehmen, die du schon geschrieben hast. Da 60.5em (was machen da die beiden Nullen hinter der 5) sind übrigens bei den 16px die du behauptest zu haben mehr als 960px - macht keinen Sinn in einer media-query für Bildschirme mit max 750px keinen Sinn. Wie kommst du auf die 43vh - sieht Dein Beispielbild zufällig gut dabei aus? Oder sorgst du mit einer Auswahl an Beispielbildern dafür, dass die in jedem Fall bei dieser Höhe gut aussehen?

Unter Umständen solltest du mit background-position noch den anzuzeigenden Ausschnitt im Viewport halten.

	#teaser h2 {
		font-size: 7.5vw; /* passt auf mobiles*/
	    margin: -10px 0 0 0;
	    text-transform: uppercase;
	}

	#teaser .dachzeile {
		font-size: 0.7em;
	}

    #teaser p {
	     margin-left: 0px;
	     font-size: 0.9em;
    }
}

Lies dir mal das durch, was ich oben geschrieben habe. Mir ist übrigens klar, dass das work in progress ist. Sicher hättest du die eine oder andere Sache noch von selbst geändert.

Wichtig ist aber gleich von Anfang an sinnvoll vorzugehen was mobile first und progressive enhancement angeht. Sonst macht man sich das Leben nur unnötig selber schwer!

Marc