WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 07.06.2021 14:34:58

peitman
Member

Beiträge in der Übersicht nebeneinander anordnen

Gibt es eine Möglichkeit die Beiträge in "News with Images" nebeneinander anzuordnen?
Sprich drei nebeneinander und dann beginnt eine neue Zeile mit den nächsten Einträgen?
Wie immer freue ich mich über Lösungsansätze,
grüße
dp

Last edited by florian (07.06.2021 15:14:06)

Offline

#2 07.06.2021 15:21:48

florian
Administrator

Re: Beiträge in der Übersicht nebeneinander anordnen

Betreff angepasst und Thema ins richtige Forum verschoben.  mad

Antwort: Ja, die Möglichkeit gibt es. Kommt aufs Template an. Wenn dort schon irgend ein CSS-Grid verwendet wird, in den Seiteneinstellungen von NWI bei "Beitrag Schleife " das HTML entsprechend formatieren.

Z.B. <div class="unit one-third">....</div> für Gridism, <div class="fg4">...</div> für Fitgrid, <div class="s-12 m-6 l-4 xl-3">...</div> für Responsee.
Eventuell noch zusätzlich in der Kopfzeile das jeweilige Grid initialisieren (<div class="grid"> / <div class="row"> / <div class="line">).

Ansonsten selbst mit width und float und clear etc. die gewünschte Anordnung per CSS erzeugen.

Außerdem noch dafür sorgen, dass alle Beiträge gleich hoch sind, um ungewollten Versatz zu vermeiden, wenn ein Beitrag höher als der andere ist.  Z.B. mittels des equalheight-Javascript-Schnipsels: https://forum.wbce.org/viewtopic.php?pid=33893#p33893

Offline

#3 07.06.2021 15:30:35

peitman
Member

Re: Beiträge in der Übersicht nebeneinander anordnen

Danke und sorry für den Post im falschen Bereich

Offline

#4 07.06.2021 15:37:37

bbs2
Member

Re: Beiträge in der Übersicht nebeneinander anordnen

Hallo,

kein Problem.

siehe
https://vlw-rlp.de/pages/ueber-uns/landesvorstand.php
Beispiel ohne die Möglichkeit des "Weiterlesens"

Unter Optionen Beitrag Schleife:

[== HTML ==]
<div class="newstable">

<div class="td1">
<a href="[LINK]">[IMAGE]</a> 
</div>

<div class="td2">
<b>[TITLE]</b>
<br>
<div><p>[SHORT]</p></div>
</div>

</div>

Hier der Inhalt der css für obige classes

[== HTML ==]
.newstable {
  width: 48%;
 background-image: linear-gradient(90deg, #e4f5e4 0%, #ffffff 20%);
  border: 0;
  float: left;
  margin-right: 1%;
  margin-bottom: 1em;
  height: 10em;
  overflow: hidden;
  }

.newstable b {
 font-size: 15px;
 color: green; 
}

.newstable p {
line-height: 1.5em;
font: Arial;
font-size: 15px; 
}

.td1 {
 
  width: 30%;
  float:left;
  overflow: hidden;
  height: 9.8em;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
    }

.td1 img{
  /*width: 95%;*/
  height: 100%;
  width: auto;
  float:left;
  display: block;
 /* margin: 0 auto;*/
  overflow: hidden;
  padding-bottom: 2px;
object-fit: cover;

  }

.td2 {
padding-top: 2%;
 table-layout: fixed;
width: 70%;
float: left;
overflow: hidden;
 height: 10em;
  }

}

In obigem Beispiel ist die Möglichkeit des "Weiterlesens" entfernt.

Entscheidend ist die Breitensetzung einer Spalte auf 48% und margin-right auf 1%.  Dadurch werden 2 Spalten nebeneinander gebildet.
Bei 3 Spalten setze z.B. auf 32 % und margin-right auf 1 %.

Viele Grüße
Heinz

Offline

Liked by:

florian, bernhardeis

Board footer

up