2-spaltige artikellisten

mmm · Post by **mmm** » Sat 23. Apr 2005, 14:55

Hallo,

ich frage mich, wie ich mit phpwcms 2-spaltige artikellisten so anlegen kann, dass sie sich auch gut verwalten lassen...??

momentan habe ich links und im haupt "content" eingefügt, damit ihr wisst was ich meine - die seite ist noch sehr am anfang, also bitte keine witze...

die startseite sollte einen 2-spaltigen kontentpart bekommen, der rest der seite wird nur einen 1-spaltigen kontentpart erhalten...

http://www.bleibfit.at/phpwcms/index.php

danke im voraus!

lgM

brans · Post by **brans** » Sat 23. Apr 2005, 18:19

also du könntest folgendes machen:

erstelle dir folgendes Artikel-Template:

Code: Select all

<div style="float:left; width:250px;">DEIN TEMPLATE CODE</div>

Du kannst jetzt einfach einen Artikel nach dem anderen hinzufügen, berechne dabei die Breite des DIV-Containers so, dass er jeweils zweimal in deine Inhaltszeile passt (Faustregel, die jedoch jenachdem, ob du margin, padding und border verwendest Fehler aufwerfen kann: width * 2 = inhaltsbreite; [siehe dazu Google: boxmodelhack])

Ganz wichtig: Du musst in deinem Haupt-Template direkt nach {CONTENT} noch ein

Code: Select all

<div style="clear:both;"></div>

einfügen. Wenn dir float:left und clear:both nichts sagen, schaue bitte bei selfhtml in der Css-Sektion vorbei.

mmm · Post by **mmm** » Sat 23. Apr 2005, 19:04

danke vorweg...

nochmals für die weniger online-affinen... ich habe nun in meinem startseiten-template diesen code eingefügt.

Haupt: (gesamt 740)

Im Bereich Haupt:

Code: Select all

<div style="float:left; width:370px;">{CONTENT}<br /></div>

<div style="clear:both;"></div>

da es (noch) nicht funktioniert, denke ich mir mal, dass ich etwas überhaupt nicht richtig verstanden haben...

float-left bedeutet, dass er mir alles, eben nach links fließend anordnet, richtig?

lgM

brans · Post by **brans** » Sun 24. Apr 2005, 08:15

Also du hast das schon richtig erkannt, du hast noch einen grossen Fehler gemacht.

Lösung 1 (alte Variante):
Schau nochmal genau hin, ich habe einmal vom Artikel-Template und einmal vom Haupt-Template gesprochen. Mit Haupt-Template meinte ich das Template, wo du jetzt den gesamten Code eingefügt hast, mit Artikel-Template meinte ich das Template im Ordner
phpwcms_template/inc_cntpart/articlesummary/list/

Du kannst dort eine Datei mit einem gewünschten Namen und der Endung .tmpl erstellen, sie wird dann automatisch in der Template-Auswahl angezeigt. Der Inhalt dieses Templates sollte dann etwa wie folgt aussehen:

Code: Select all

<div style="float:left; width:250px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="150" valign="top">
[IMAGE]<div><a href="{ARTICLELINK}">{IMAGE}</a></div>[/IMAGE]
[CAPTION]<div align="center">{CAPTION}</div>[/CAPTION]
</td>
<td width="10"><img src="img/leer.gif" border="0" width="10" height="1" alt=""></td>
<td width="98%" valign="top">
[TITLE]<h1 style="margin:0 0 5px 0;">{TITLE}</h1>[/TITLE]
[SUB]<h3 style="margin:0 0 5px 0;">{SUB}</h3>[/SUB]
[SUMMARY]<p style="margin:0"><strong>{DATE:F:DE}</strong> {SUMMARY}</p>[/SUMMARY]
[MORE]<a href="{ARTICLELINK}">{MORE}</a>[/MORE]
</td>
</tr>
</table>
</div>

Damit dieses Template Anwendung findet, musst du bei jeder Kategorie die zweispaltig erscheinen soll noch dein Template für das Articlelisting im Artikel wählen.

Es befindet sich ein Dropdown-Feld bei der Aritkel bearbeiten Ansicht, in der du das entsprechende Template auswählen kannst.

__________________________________
Lösung 2 (komplett neu)

Eine andere, vermutlich technisch etwas einfachere Lösung, wäre folgende:

Erstelle dir dein Haupt-Template, in dem du irgendwo, wo die zwei Spalten erscheinen sollen folgendes einfügst:

Code: Select all

{TOP}
<div id="leftcolumn">{LEFT}</div><div id="rightcolumn">{RIGHT}</div><div id="clearer"></div>{BOTTOM}

Dazu ist dann noch folgender CSS-Code nötig (im Admin: Default Css einfügen):

Code: Select all

#leftcolumn, #rightcolumn {
float:left;
width:250px;
}
#clearer { clear:both; }

Einschub:
Einen Zwischenabstand von 10 Pixeln könntest du dann erzeugen, indem du beispielsweise in dein Stylesheet zusätzlich folgenden Code einfügst:

Code: Select all

#leftcolumn {
margin-right:10px;
}

Für alle weiteren Style-Technischen Fragen, verweise ich wieder auf die Css-Sektion von selfhtml.org

Nun kannst du einfach bei der Artikel-Verwaltung wie folgt vorgehen:

Allen Inhalt, der ÜBER den zwei Spalten stehen soll, erstellst du im Backend "Oben", aller Inhalt, der darunter angezeigt werden soll, erstellst du "Unten". Wenn du möchtest, dass ein Artikel in der linken Spalte erscheint, erstellst du in "Links" und dasselbe für die rechte Spalte ("rechts").

Du kannst einen Artikel links, rechts, oben oder unten erstellen, indem du aus dem entsprechenden Dropdown-Feld bei der Artikel-Erstellung die entsprechende Position auswählst.

Merke: Bei dieser Variante wird aller Inhalt, den du in der Hauptspalte (Content) erstellst nicht angezeigt, da im template nirgends der Replacement-Tag {CONTENT} verwendet wird.
__________________________________________

Solltest du all die oben genannten Funktionen nicht finden, benutzt die nicht die DEV-Version, ich würde dir ein Update dringend empfehlen.

pepe · Post by **pepe** » Sun 24. Apr 2005, 11:47

Hallo brans,

bei den vorgeschlagenen Lösungen wird aber, bei klick auf more... , der Artikel ebenfalls in dem jeweiligen 250px breiten DIV dargestellt, oder???

Hast du eine Idee, den Artikel dann in einem "vollen" Haupt-Bereich darzustellen??? Ohne Layertechnik???

Darüber knoble ich schon lange nach ......

brans · Post by **brans** » Sun 24. Apr 2005, 12:39

nein eben der Vorteil der ersten Variante sollte ja eigentlich sein, dass das Template nur beim Listing Anwendung findet und daher auch nur dort das ganze zweispaltig geladen wird.

Bei der zweiten Variante entsteht genau das problem, von dem du gerade gesprochen hast, hatte ich mir vorher nicht überlegt.

pepe · Post by **pepe** » Sun 24. Apr 2005, 14:58

Aber...

steht bei der Variante 1 dann nicht das komplette Listing in dem linken, 250px breiten Bereich des Contentfeldes... und rechts ist "Luft"

brans · Post by **brans** » Sun 24. Apr 2005, 15:00

nein dürfte eigentlich nicht. Es sei denn ich würde einen schweren Denkfehler machen. Habe das ganze nicht ausprobiert!

durch float:left und die entsprechende Breite, sollten eigentlich die Artikel der Reihe nach etwa so angeordnet werden:

Artikel 1 Artikel 2
Artikel 3 Artikel 4
Artikel 5 Artikel 6

und so weiter.

mmm · Post by **mmm** » Tue 26. Apr 2005, 00:47

@pepe

nein, wie brands schon gesagt hat, das gilt nur für das artikel-listing...

klick mal auf den link, dann kommst du auf die startseite mit der listing-variante1, dann auf einen artikel - wieder alles fein...
http://www.bleibfit.at/phpwcms/index.php

habe das artikel-tamplate noch nicht angerührt...

@ brands

also das funkt mal so, wie du gesagt hast, danke!

habe momentan nur noch das problem, dass ich überhaupt nicht weiß, wie ich das neue artikel-listing-tamplate so formatiere, dass es halbwegs was gleich schaut.

zwei sachen stören nämlich gewaltig, 1) der strich und 2) möchte ich das bild zwischen der überschrift und dem schlagtext stehen haben. da ich das aritkel-listing-tamplate schon komplett auf den kopf gestellt habe und sich diesbezüglich nichts geändert hat, nehme ich mal an, dass dies hier nicht einzustellen ist... wo?

lgM

brans · Post by **brans** » Tue 26. Apr 2005, 08:23

Dieser Strich ist ein <hr> tag, den ich aus dem Template entfernt hatte, den du aber wohl übersehen hast. Schau mal in deinem Listing-Template direkt unter dem HTML-Kommentar

Code: Select all

....
DATE        = show article date ORPMCEST

//-->
<hr>
.....

Dann würde ich mal noch die Breite der Divs erhöhen und ausserdem vielleicht

style="float:left .... durch id="listing" ersetzen und dann in deinem CSS-Stylesheet folgenden code einfügen:

Code: Select all

#listing {
float:left; // flussrichtung: links 
width:270px; // Breite: 270 Pixel 
margin-left:10px; //Abstand links: 10 Pixel
margin-right:10px; // Abstand rechts: 10 Pixel
}

pico · Post by **pico** » Tue 26. Apr 2005, 08:25

Hallo

also im FireFox siehts 'grausam' aus

brans · Post by **brans** » Tue 26. Apr 2005, 08:26

im IE sieht es ganz ähnlich aus

, das ganze ist momentan noch total fehlformattiert.

mmm ich würde dir echt nahelegen mal folgende Seiten zu überfliegen und später als Referenz einzusetzen:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm
http://de.selfhtml.org/css/eigenschafte ... bstand.htm (später für die Bilder im Artikel)
http://de.selfhtml.org/css/eigenschafte ... bstand.htm (dazu würde ich mal im google nach "css boxmodelhack" suchen)
http://de.selfhtml.org/css/eigenschafte ... chtung.htm
http://de.selfhtml.org/css/eigenschaften/rahmen.htm

pico · Post by **pico** » Tue 26. Apr 2005, 08:35

Hi Brans

I know that

hatte es nicht weiter 'untersucht' sollte nur ein Hinweis sein.

mmm · Post by **mmm** » Tue 26. Apr 2005, 13:32

so, habe nun im listing-tamplate folgenden code:

Code: Select all

<div id="listing">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>

<td width="100%" valign="top">
[IMAGE]<div><a href="{ARTICLELINK}">{IMAGE}</a></div>[/IMAGE]
[CAPTION]<div align="center">{CAPTION}</div>[/CAPTION]
</td>


[TITLE]<h1 style="margin:0 0 5px 0;">{TITLE}</h1>[/TITLE]
[SUB]<h3 style="margin:0 0 5px 0;">{SUB}</h3>[/SUB]
[SUMMARY]<p style="margin:0"><strong>{DATE:F:DE}</strong> {SUMMARY}</p>[/SUMMARY]
[MORE]<a href="{ARTICLELINK}">{MORE}</a>[/MORE]
</td>
</tr>
</table>
</div>

habe es dann so im css definiert, bei margin noch oben und unten dazugefügt, so schauts einfach besser aus...:

Code: Select all

#listing {
float:left;
width:230px;
margin: 10px 10px 10px 10px;
}

wie man an meiner seite erkennt, funktioniert das schon ganz gut. an dieser stelle mal vielen dank für die bisherigen infos!! habe die links mal alle überflogen, da steht halt niergendwo was spezifisches übers wcms...

ich bräuchte nämlich noch die info, wo man die anordnung des artikels ändert. sprich wenn man auf meiner startseite ist, dass das artikel-bild unter der überschrift steht und dann unterm bild der schlagtext - die überschrift kleiner macht usw. da muss es doch auch irgendwo ein tamplate geben??

lgM

brans · Post by **brans** » Tue 26. Apr 2005, 14:33

dort steht ganz genau drin, wie du was machst!

Code: Select all

<h1 style="margin:0 0 5px 0;">

ist beispielsweise dein Format für die Titel, diese kannst du ganz einfach per css gestalten!

Code: Select all

h1 style="..." durch <h1 class="listingheader"> ersetzen.

und dann im css stylesheet

Code: Select all

.listingheader {
font-size:12px;
font-weight:bold;
font-family:Verdana, Tahoma, Arial;
text-decoration:underline;
color:red;
}

siehe und staune, was sich so alles tut, wenn du die einzelnen Werte veränderst. Alles das würdest du aber auf den ersten Blick sehen, wenn du mal die Tutorials, die ich dir oben rausgesucht habe, lesen würdest.