WBCE CMS Forum

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)

---

Webdesign ist der Prozess der Erstellung einer Website. 

florian

Administrator

Re: Beiträge in der Übersicht nebeneinander anordnen

Betreff angepasst und Thema ins richtige Forum verschoben. 

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

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

peitman

Member

Re: Beiträge in der Übersicht nebeneinander anordnen

Danke und sorry für den Post im falschen Bereich

---

Webdesign ist der Prozess der Erstellung einer Website. 

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