modifizierte Artikelliste !?

[Jamest]

Hallo,

kurze Frage, ich hab jetzt über die Suche schon einige Newsmodule oder Artikellisten gefunden und auch probiert, da aber leider noch nicht das dabei war was ich suchte, hier meine Frage.

Ich habe jetzt auf der Hauptseite ein Standardmodul, was einfach von einer bestimmten Kategorie die letzten 4 Artikel "anreisst" also 250 buchstaben zeigt, dann ein ... und "weiterlesen"

ich suche eine Variante, die auch Bilder mit ausgibt, UND:!! (und jetzt kommts) die immer 2 Newsartikel nebeneinander darstellt, also beispielsweise das Bild zum Artikel (float:left) und daneben und darunter der Text zu diesem Artikel.

Ich weiss letztendlich nicht wie man es macht, das man 2 Artikel nebeneinander hat, und die nächsten 2 dann darunter.

Hat jemand einen Tipp, mit welchem Modul ich das am besten anstelle, und vorallem wie?

Oder gibt es schon so ein Modul?

Danke und Gruß

JamesT

[Jamest]

Habe mal einen entwurf gemacht, vielleicht macht das einiges klarer.

[silicone]

Das kannst du mit nahezu jeder Artikelliste machen. Schau dir dazu die Modul-Templates des jeweiligen Moduls an.

Mögliches Template wäre:

Code: Alles auswählen

<ul id="teaser">
<!-- BEGIN:BLOCK -->
  <li> 
        <img src="{IMG}">
        <b>{HEADLINE}</b><br>
        {TEXT} <a href="{HREF}">{MORE}</a>
  </li>
<!-- END:BLOCK -->
</ul>

Dann noch "#teaser" nach Belieben per css gestalten und fertich...

Gruß,
Thomas

[Jamest]

Ja das ist richtig, aber da ist auch schon meine Frage.

Diese Listen machen es immer direkt untereinander.

Ich bräuchte aber 2 nebeneinander und dann darunter die nächsten 2. Und ich denke das müsste ja im modul output geändert werden, oder?

Nur genau das weiss ich nicht wie ich machen soll.

[wosch]

Silicone hat dir die "Premium-Lösung" genannt.

Für deinen Fall geht die normale "News"-Liste des Beispielmandanten, Template umgebaut auf CSS.

Aber:
Alle Artikellisten scalieren alle Bilder gleich.
Mal mal Querformat ohne Textumfluß gemischt mit Hochformat mit Textumfluß geht nicht.
Da muß du dir ein individuelles Modul programmieren (lassen)
Ein weiters Problem sind ggf. Bilder die gemischt im Hoch- und Querformat vorliegen und in einer Artikelliste verwendet werden
(kommt aber auf die eingesetzte Artikelliste an).

Zurück zur News des Beispielmandanten:
Die Augabe erfolgt im Template teaser-rechts.html, das so aussieht:

Code: Alles auswählen

<h1 class="content">{TITLE}</h1>
<!-- BEGIN:BLOCK -->
<div style="padding-bottom:10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td style="background-color:rgb(210,210,210);"><img src="images/grey.gif" width="1" height="1" border="0" alt="" title=""/></td>
	</tr>
	<tr>
		<td><img src="images/blank.gif" width="1" height="10" border="0" alt="" title=""/></td>
	</tr>
</table>
<a href="{HREF}" style="color:rgb(255,102,4);">{HEADLINE}</a>
{IMG}{TEXT}
<br><br>
<a href="{HREF}" style="color:rgb(190,190,190);">{MORE}</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="{HREF}"><img src="images/navi_pfeil_rechts.gif" border="0" alt="{MORE}" title="{MORE}"/></a>
</div>
<!-- END:BLOCK -->

Wenn du nun folgendes für das o.g. Template machst - nur Schemata - Code enthält vermutlich Fehler, ausprobieren !!!

Code: Alles auswählen

<h1 class="content">{TITLE}</h1>
<!-- BEGIN:BLOCK -->
<div ID="dein_name" float:left>
   <a href="{HREF}">{HEADLINE}</a>
   <br>{IMG}<br>{TEXT}<br>
   <a href="{HREF}" style="color:rgb(190,190,190);">{MORE}</a>
</div>
<!-- END:BLOCK -->
<br style="clear:both">

In deiner CSS definierst du für die ID=dein_name einen Wert für die Breite von 1/2 - x Pixel des "Gast-Containers".

Dann wird dieser DIV dein_name 2x nebeneinander gesetzt bevor er danach unten fortgestzt wird.
Setzt aber voraus das alle Artikel die gleiche "Anzeigelänge" haben sonst wird der Abstand des längsten Artikels einer Reihe genommen.

Sieht dann etwa aus wie dein Beispiel unten links, Bild ohne Textumfluß!!!

Horizontale und vertikale Linen sind fast unmöglich bei dieser Konstruktion.

Alles aus dem Kopf geschrieben, können Syntax-Fehler drin sein.
Genauere Infos zu DIV / CSS bekommst du in den CSS-Fachforen.

[Jamest]

Das ist mal ein Ansatz, ich werde mir das mal genauer anschauen und ausprobieren. An die Variante mit CSS hab ich noch garnicht gedacht, dachte es wäre mit php einfacher zu sagen, wenn 2 boxen da sind, mache nen umbruch oder so.

[Jamest]

Und schon geschehen.

Hat grad mal 3 minuten gedauert, fettes thx für deine Idee.

Werde das ganze jetzt mit CSS noch schön formatieren. Das mit den Bildern hab ich noch nicht drin, aber das kommt noch.

Danke nochmal !!!!

[wosch]

An die Variante mit CSS hab ich noch garnicht gedacht,

Die von Silicone gepostete Lösung ist Premium-CSS

[Jamest]

Ok, noch eine weitere Frage.

In dem Template wird ja das image per {IMG} aufgerufen. Wie gebe ich dem bild die werte border 0 und float left mit? die angabe muss ich doch im modul machen, oder? weil das erzeugt ja hinterher letztendlich das <img ... >

Wenn im modul, dann sicher im output, oder? und wo da genau? finde leider nichts.

Achso, nochwas ich habe ja das Teaser modul von Andreas lindner genommen, wie schaffe ich es das dort ein bild angezeigt wird?

Grüße

Jamest

[Jamest]

ok, hab es, dafür gibt es die klasse teaser_img.

Danke nochmal

[wosch]

wie schaffe ich es das dort ein bild angezeigt wird?

Die News holt sich das erste Bild aus dem Artikel das es findet.
Das heißt im Klartext:
Das Bild muß im gleichen Text-HTML-Modul sein wie der Text der angezeigt wird.

Wie gebe ich dem bild die werte border 0 und float left mit

float:left braucht nicht weil der gesamte DIV dein_name floatet.
Border 0 braucht es nicht weil kein Anker auf dem Bild liegt.