Moderne HTML Umsetzung

[Bernd]

Hallo,

wie würdet ihr dieses Design (nur BLogartikel) umsetzten?

http://x7info.com/html/maroon-preview/maroon/blog.html#home

Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein. Das Datum un die Tags sind immer einzeilig. Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.

Geht da etwas mit Flexbox? Responsive wäre natürlich nicht schlecht.

[MrMurphy1]

Hallo

Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.

Gruss

MrMurphy

[klawischnigg]

Hi there,

[...] CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung.

Voll Deiner Meinung. Ich war auch immer der Ansicht, daß dieses CSS-Zeugs was Grindiges ist…

[Bernd]

Hallo,

Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.

Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt. Ich muss mal schauen wie ich dieses mit Flexbox hinbekomme.

[Gunnar Bittersmann]

@@Bernd

Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt.

Nein, das ist Unsinn. Aus mehreren Gründen:

1. Grid ist nicht Zukunft, sondern Gegenwart. Es wird von allen aktuellen relevanten Browsern unterstützt.

2. Mit Flexbox ist folgende Anforderung gar nicht umsetzbar: Die zur Verfügung stehende Breite soll vollständig genutzt werden und gleichmäßig in möglichst viele Spalten aufgeteilt werden, die mindestens x breit sein sollen. Die Items füllen die Spalten in Leserichtung (von links nach rechts; von oben nach unten).

   (Das wäre mit etlichem Aufwand umsetzbar für eine gewisse maximale Anzahl n von Spalten. Man müsste sich n − 1 Breakpoints berechenen und für diese jeweils Regeln angeben. Den Aufwand will man nicht betreiben, zumal er nicht zu einer allgemeinen Lösung führt.)

3. Für alte IEs u.a. Browser, die Grid nicht unterstützen, wird ein Fallback vorgesehen. Das kann Flexbox sein. Es gibt aber keinen Grund, für fähige Browser nicht das bessere Grid-Layout zu implementieren.

LLAP 🖖

[Gunnar Bittersmann]

@@Bernd

Geht da etwas mit Flexbox?

Im Prinzip schon: flexible grid with media queries.

Nur dass es mit Grid noch viel besser geht: flexible grid without media queries.

Responsive wäre natürlich nicht schlecht.

Ich würde responsive nicht als „wäre nicht schlecht“-Zusatz bezeichnen, sondern als unabdingbar fordern.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Geht da etwas mit Flexbox?

Im Prinzip schon: flexible grid with media queries.

Oops, das hatte ich ja gar nicht mit Flexbox implementiert.

Eagleson’s Law: “Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.”

Das ginge aber mit dem Aufwand der vielen media queries auch mit Flexbox.

Aber wie gesagt:

Nur dass es mit Grid noch viel besser geht: flexible grid without media queries.

LLAP 🖖

[Gunnar Bittersmann]

@@Bernd

wie würdet ihr dieses Design (nur BLogartikel) umsetzten?

Wenn du das Menü meinst: so nicht!

Es ist unbrauchbar, weil man bei Tastaturbedienung nicht erkennt, wo man sich befindet. Das sollte dir nicht neu sein.

LLAP 🖖

[Bernd]

Hallo,

Wenn du das Menü meinst: so nicht!

nein, es geht nur um die Artikel, nicht um die Navigation bzw. den Header.

[Gunnar Bittersmann]

@@Bernd

http://x7info.com/html/maroon-preview/maroon/blog.html#home

Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein.

Oder dreizeilig …

Das Datum un die Tags sind immer einzeilig.

Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.

Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.

Geht da etwas mit Flexbox?

Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.

LLAP 🖖

[Bernd]

Hallo,

Oder dreizeilig …

nein, das habe ich selber in der Hand, da ich die Beiträge schreiben. Außer einer vergrößert die Seite, dann ja, aber das ist mir dann egal

Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.

Nein, damit finde ich mich nicht ab. Warum denn auch? Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.

Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.

Was sind Deppenleerzeichen?

[Gunnar Bittersmann]

@@Bernd

Nein, damit finde ich mich nicht ab. Warum denn auch?

Du musst dich damit abfinden. Weil es das Web ist.

Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.

Du hast nicht in der Hand, welche Schriftart beim Nutzer letztendlich verwendet wird, wie breit die läuft … also nicht, ob Datum und Kategorie wirklich immer nebeneinander passen.

Was aber nicht schlimm ist. Bedenke einfach, wie es aussehen soll, wenn beides nicht nebeneinander passt, und erfreue dich daran, dass der Fall nicht allzu häufig eintreten wird. Aber ignoriere ihn nicht.

Was sind Deppenleerzeichen?

Was-sind-…-Fragen sind gute Fragen, um sie der Wikipedia zu stellen. „Wikipedia, was sind Deppenleerzeichen?“

LLAP 🖖

[Bernd]

Hallo,

passt dieser Aufbau für ein Blog-Artikel?

<article class="card">

	<figure>
		<img src="" alt="">
	</figure>
	<header>
		<h2></h2>
		<span class="date"></span>
		<span class="categorie"></span>
	</header>
	<div class="content">
		<p></p>
	</div>
	
</article>	

[Bernd]

Hallo,

hier ein Online-Beispiel: http://example-website.bplaced.net/ Warum passen sich meine Artikel nicht der Breite an?

.blog {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    flex: 0 1 33%
}

[Gunnar Bittersmann]

@@Bernd

hier ein Online-Beispiel: http://example-website.bplaced.net/ Warum passen sich meine Artikel nicht der Breite an?

Doch, das tun sie. Sie passen sich der Breite des Inhalts an, nämlich der Bilder.

Du möchtest den Bildern 100% Breite geben.

LLAP 🖖

[Bernd]

Hallo,

Du möchtest den Bildern 100% Breite geben.

danke dir. Hat funktioniert: http://example-website.bplaced.net/

Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?

[Bernd]

Mir ist noch etwas aufgefallen: http://example-website.bplaced.net/ Warum stehen die beiden in der zweiten Reihe nicht nebeneinander? Ist es möglich dieses nebeneinander zu platzieren?

[Bernd]

Das Problem konnte ich beheben:
http://example-website.bplaced.net/

.card {
    flex: 0 1 calc(33% - 1em);
    border: 1px solid #efefef;
    margin-bottom: 2em;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-wrap: wrap;
}

Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.

EDIT: Nein, es hat wohl doch nicht geklappt.

[Gunnar Bittersmann]

@@Bernd

Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.

Warum sich die letzten nicht nebeneinander anordnen, ist schnell gesagt: Weil du genau das mit justify-content: space-between gesagt hast.
Du möchtest für div.wrapper.blog Grid verwenden.

Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

LLAP 🖖

[Bernd]

Hallo,

Du möchtest für div.wrapper.blog Grid verwenden.

Grid versteht noch nicht jeder Browser. Außerdem habe ich damit noch überhaupt keine Erfahrung wie ich dieses umsetzten könnte. Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Und was passiert wenn ein Brwoser das nicht versteht?

Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

Davon war auch noch nie die Rede.

EDI: OK, ich nutze jetzt Grid: http://example-website.bplaced.net/

Passt das so?

.blog {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

[Gunnar Bittersmann]

@@Bernd

Grid versteht noch nicht jeder Browser.

Jeder relevante aktuelle Browser versteht Grid. Für die anderen: na und? Progressive enhancement.

Ist es denn schwer für diesen Bereich ein Grid zu nutzen?

Nein, im Gegenteil.

Und was passiert wenn ein Brwoser das nicht versteht?

Die Boxen sind untereinander.

Oder das, was du ansonsten angibst. Das kann ein Fallback auf display: inline-block sein (Beispiel) oder auch einer auf Flexbox.

Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:

Davon war auch noch nie die Rede.

Doch, das war es: „Responsive wäre natürlich nicht schlecht.“ Deine Worte.

LLAP 🖖

[Bernd]

Hallo,

Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Nein, im Gegenteil.

hab ich eingebaut, hab es mir schwer vorgestellt bzw. in den Videos die ich mir bis jetzt angesehen habe war immer viel mehr Code zu sehen.

Davon war auch noch nie die Rede. Doch, das war es: „Responsive wäre natürlich nicht schlecht.“ Deine Worte.

Hab es eingebaut, sieht jetzt besser aus (nur auf die Boxen bezogen)
http://example-website.bplaced.net/

[Gunnar Bittersmann]

@@Bernd

Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?

So nicht: .card { display: flex; flex-wrap: wrap }.

Du möchtest dich aus der Horizontalen erheben und dich in die Vertikale begeben:
.card { display: flex; flex-direction: column }.

Das div.content soll sich ausdehnen: .card > .content { flex: 1 }.

LLAP 🖖

[Bernd]

Hallo,

danke auch dieses mal für deine Hilfe, sieht schon sehr viel besser aus:
http://example-website.bplaced.net/

Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?

.blog {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    flex: 0 1 calc(33% - 1em);
    border: 1px solid #efefef;
    margin-bottom: 2em;
    font-family: 'Open Sans', sans-serif;
    display: flex; 
    flex-direction: column 
}

[Gunnar Bittersmann]

@@Bernd

Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?

Ein Flexitem kann selbst wieder Flexbox für seine Kinder sein.

Dass ein Griditem das auch kann, sagte ich schon.

LLAP 🖖

[Gunnar Bittersmann]

@@Bernd

passt dieser Aufbau für ein Blog-Artikel?

Nicht so richtig.

<article class="card">

Wenn bei der Artkelübersicht nur Anreißer zu sehen sind, ist das kein eigenständiger Artikel, also kein article-Element.

Auf einer Artikelseite ist der Artikel der Hauptinhalt, also auch kein article-Element.

	<figure>
		<img src="" alt="">
	</figure>

Die Ausschmückung eines Artikels ist kein eigenständiger Bereich, also kein figure-Element.

LLAP 🖖

[Tanka]

Hallo! Mir gefällt dein Design und es ist doch responsive. Ich würde aber die Links immer unterstreichen, damit die für Users cklickable waren;)