Nachrichten in 2 oder mehr Spalten aufteilen

[alex71de]

Moin liebe Helfer,

ich hab das Problem, das ich ein Nachrichtenarchiv haben muss und auf der Startseite sollen unten nebeneinander 2 oder 3 Nachrichten-Leser Module integriert werden in denen jeweils nur (v.l. nach r) die aktuellste- , dann die 2te- und dann ggf die 3te Nachricht erscheinen und beim "weiter lesen" sollen dann auf die Seite mit dem Nachrichten-Leser Modul verlinkt werden, auf dem dann der Aktualität nach alle Nachrichten eingeblendet werden.

Das eigentliche Problem ist nun, wo sage ich den Nachrichten-Liste Modulen, das sie sich aus der DB das erste, zweite oder dritte Element greifen?

Hat da jemand eine Idee oder gibt es ggf eine viel bessere und einfachere Möglichkeit?

Dank Euch allen schonmal jetzt!

[planepix]

Hallo Alex,

lasse die Newsliste mit den einzelnen News floaten.

[Andreas]

Das eigentliche Problem ist nun, wo sage ich den Nachrichten-Liste Modulen, das sie sich aus der DB das erste, zweite oder dritte Element greifen?

Nirgendwo, du brauchst nur ein Modul und limitierst es auf 3 News, dann hast du automatisch die 1., 2. und 3. Ansonsten kannst du auch mit dem Feld "Nachrichten überspringen" arbeiten.

[alex71de]

Danke Planepix, aber mit dem floaten geht das so nicht, da es immer in eigenen "Blöcken" dargestellt werden soll.

Dank auch dir Andreas, aber ich verstehe dich nicht so recht. ich hab ja vor 2-3 Module auf der Seite zu integrieren und wie soll ich dann dem jeweilgen Modul sagen, das er die 1.2. oder 3. Nachricht nimmt?
Ich dachte ggf. daran, im Modul am den Quellcode, wo die SQL-Abfrage statt findet?

[hofff]

Du solltest den einzelnen Newsblöcken noch eine Breite zum float mitgeben, dann funzt das!

Wieso brauchst du 3 Module?


fg
nicky

Gesendet von iPad mit Tapatalk Pro

[Andreas]

...ich hab ja vor 2-3 Module auf der Seite zu integrieren ...

Nein, das hast du nicht vor. Du hast vor die ersten 2 bis 3 News zu zeigen. Und das kannst du mit einem Modul erledigen. Die einzelnen News sollten default innerhalb eines eigenen DIVs stehen. Zeige am besten mal einen Link zu der Seite, wo du ein Modul mit 3 News eingebaut hast.

[alex71de]

Vielleicht verstehst das so besser mit nem link, stimmt. Das "Aktuelles" soll leider immer darüber stehen. Jetzt sind auf der Seite 3 gleiche Module nebeneinander mit 2 Nachrichten.
Irgendwo muss doch die SQL Abfrage sein, welche ich nicht finde, so das man eben ein Modul bastelt, welches die jeweilige ID zieht, oder ;-)

http://pbb-biogas.de/cms1/index.php

[mlweb]

Mir ist absolut unklar warum "Aktuelles" über jedem Newsblock stehen soll, aber wenn es denn so sein muss kann man das entsprechende Template anpassen.

[tab]

Und schon gar dreimal als H1. Wenn da wirklich jeweils Aktuelles drüberstehen soll, dann schreibt man es halt so ins Template.Welche der 6 jetzt gleichen Nachrichten soll denn eigentlich Nr. 1,2,3,4,5,6 sein? Sollen alle Nachrichtenblöcke gleich hoch sein oder nicht?

[Samson1964]

Bei mir oben auf der Seite habe ich die letzten 3 Nachrichten nebeneinander. Damals gelöst mit [simple_columns] für die Spalten und jeder Spalte habe ich ein Nachrichtenmodul zugewiesen: jeweils 1 Nachricht anzeigen und 0, 1 und 2 Nachrichten überspringen.

[lucina]

Ich verstehe nicht wirklich, warum Ihr das mit mehreren Modulen oder mit Floats lösen wollt. Die Anforderung "zwei oder drei" ist doch eigentlich der Klassiker für Flexbox.

Mehr Input beispielsweise unter http://www.heydonworks.com/article/flexbox-grid-finesse. Und das dreifache "Aktuell" (klingt auch für mich nach einer blöden Idee ...) ist sicher auch mit content:before lösbar.

[mlweb]

Die Anforderung "zwei oder drei" ist doch eigentlich der Klassiker für Flexbox.

Ich stelle auch immer wieder mit Erstaunen fest wie wenig Leute eigentlich Flexbox einsetzen.
Ich finde das ist so ein geniale Sache.

Und das dreifache "Aktuell" (klingt auch für mich nach einer blöden Idee ...) ist sicher auch mit content:before lösbar.

Stimmt dann käme man sogar ohne Template-Änderung aus. So wie jetzt in einer Überschrift h1 ist es jedenfalls mit Verlaub gesagt einfach Nonsens.

[tab]

Vielleicht wegen IE, der ist da wohl einigermaßen buggy. Bei Floats muss man sich keine Gedanken über sowas machen.

[mlweb]

In der Praxis funktioniert das im aktuellen IE ganz gut, zumindestens sind mir da noch keine eklatanten Probleme untergekommen. Ein paar Besonderheiten gibt es, aber die gibt es auch bei Safari oder Firefox. In der Praxis sind die Fälle entweder speziell oder man kann sie umgehen. Das was man sich mit Flexbox vereinfachen kann rechtfertigt m.E. auf jeden Fall den Mehraufwand den man in einigen wenigen Spezialfällen hat.
Bei mir kommt seit einiger Zeit in jedem Projekt Flexbox zum Einsatz.
Wenn der Kunde dann doch noch unbedingt Unterstützung für ältere IEs braucht dann kostet das halt. Ist mir aber in den letzten zwei Jahren nicht mehr untergekommen.

[lucina]

Die entsprechenen Issues und Workarounds findet man hier: https://github.com/philipwalton/flexbugs

[mlweb]

Der Link von Lucina ist auch von CanIuse aus verlinkt. Solche Links für bekannte Issues findet man eigentlich für nahezu alle "modernen" Eigenschaften auf canIuse. Das ist inzwischen schon recht komfortabel.

[Andreas]

Die SQL-Abfrage findet im Modul statt. Dort gibt es auch einen Hook mit dem man dort eingreifen kann. Das brauchst du aber alles nicht.

Wenn du es partout mit drei Modulen lösen möchtest, dann kannst du die Module, wie ich und @Samson1964 oben bereits erwähnt haben, dementsprechend einstellen.

Mit einem Modul würde ich den rs-columns Wrapper erstmal wieder entfernen. Die Überschrift aus dem Modul rausholen und dann dieses CSS benutzen.

/* CSS */
.mod_newslist {
  display: flex;
  flex-flow: row wrap; /* default = row nowrap */
}
.layout_latest {
  flex: 1 1 auto; /* default = 0 1 auto */
} 

Diese Angaben müssten so gut wie alle Browser verstehen http://caniuse.com/#search=flex. Damit hast du es dann auch responsive.

Wenn du die Überschrift drin läßt, dann muss du ihr noch width:100%; geben, weil sie kein normales Block-Element mehr ist, sondern ein Flex-Item.

[alex71de]

Danke Euch allen für Eure Hilfe!!!!

Wie war das mit dem Wald und den Bäumen???? Ja Andreas und Samson1964, jetzt hab ich das ENDLICH verstanden, mit dem Überspringen der Nachrichten und es funzt ganz easy und ist auch logisch! Manchmal muss man ne Pause machen um den Weg wieder zu sehen!

VIELEN DANK

[harley-rider]

Hallo Alex,
lasse die Newsliste mit den einzelnen News floaten.

Ich möchte auch die Newslinks auf die Seite (je nach Platz) verteilen :
1 - 2 - 3
4 - 5 - 6

Mit 'float: left' funktoniert dies, nur verliert dann der Block für die Newsliste seine Höhenangaben und das nächjste Element wird nach der Überschrift platziert.

Hat mir jemand einen Tipp wie ich meine CSS anpassen muss, damit das nächste Inhaltselement nach den Newslinks platziert wird ?
Beispielseite

[planepix]

Hallo Beat,

du kannst den einzelnen Newsbeiträge eine Mindesthöhe mitgeben, so dass die Blöcke gleich hoch werden.

[Spooky]

Mit 'float: left' funktoniert dies, nur verliert dann der Block für die Newsliste seine Höhenangaben und das nächjste Element wird nach der Überschrift platziert.

Durchsuche das Internet mal nach "clearfix" .

[harley-rider]

Durchsuche das Internet mal nach "clearfix" .

Danke euch beiden für die Tips.
Mit 'clearfix' löst sich mein Problem.

Ich verstehe nicht wirklich, warum Ihr das mit mehreren Modulen oder mit Floats lösen wollt. Die Anforderung "zwei oder drei" ist doch eigentlich der Klassiker für Flexbox.

Auf der lokalen Testseite habe ich eine Lösung mit 'flexbox' versucht.
Grundsätzlich funktioniert auch dies, finde aber keine Möglichkeit die integrierte Überschrift zu 'skippen'. Diese wird als Element für die Boxen betrachtet und in die 'Tabelle' integriert.
Ich muss also die Überschrift aus der 'Newsliste' nehmen und mit einem vorgängigen Element 'Überschrift' einfügen, oder gibt es da eine Möglichkeit die Überschrift zu 'skippen' ?

Mittlerweile eine Lösung für das 'skippen' gefunden.
Das <h3> kann mit 'flex: 0 0 100%;' gefiltert werden.

Da beide Lösungen (float und flexbox) funktonieren, frag ich mich ob es zwischen diesen Vor-/Nachteile gibt...
Welche seht ihr, oder kommt es auf den 'Geschmack' des Siteerstellers an ?

[flensburger-stadtanzeig]

Mich würde interessieren ob das ganze dann auch als mobile Version funktioniert...

hast den link einmal parat wo die news mit der Flexbox gemacht hast....

ich habe das bei mir zu erst mit einer tabelle ausprobiert... ging aber nicht auf Mobile. dann mit simple Columns und schon funktionierte das ....

alles habe ich wie viele andere auch schon mit drei Modulen gemacht ... und jeweils eine News übersprungen .....


das mit der Flexbox habe ich noch nicht ganz verstanden was ich wo und wie mache....

meine seite. www.flensburger-stadtanzeiger.de

[Andreas]

Du hast immer noch das hier

<div id="fb-root"></div>

im HEAD. Das muss da weg.

Hier die beiden IMHO besten Links zum Thema Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://the-echoplex.net/flexyboxes/

Soviel ich weiß, kann man mit simple_columns keine Breakpoints einstellen, sondern nur einen Zustand für alle Viewportbreiten.

[Spooky]

@flensburger-stadtanzeig neben dem fb-root im head hast du noch einen anderen HTML Fehler: https://validator.w3.org/nu/?doc=htt...anzeiger.de%2F

[harley-rider]

Mich würde interessieren ob das ganze dann auch als mobile Version funktioniert...
hast den link einmal parat wo die news mit der Flexbox gemacht hast....

ist die genannte Beispielseite.
Wenn ich da bei 'Element untersuchen' auf 'Handy' klicke wird die Tabelle 1-spaltig und in der korrekten Reihenfolge.