article-listing in columns

macangelo · Post by **macangelo** » Mon 6. Jun 2005, 17:38

Hi all

I put this question some time ago and - I still have it. Is there somebody who can help me:

I need a little help with a template for an article listing. I want to present the summary plus a picture of my article listing in 3 (or 4, let's see) columns. I know php can do these loops where content is put in table rows of 3 table fields. But I don't know how.

Can anybody help?

thanks a lot

macangelo

brans · Post by **brans** » Mon 6. Jun 2005, 19:52

if you understand German, then I developed a solution some time ago and there are also some more people that have contributed to the discussion where you won't have to change any php code...

solution for your problem

with the div solution it will be possible to place as many columns as you like next to each other...

edit:
sorry for not reading where you're coming from

you're supposed to understand German... I'd really appreciate if you could translate my post into english as an answer to this thread you are currently reading.

macangelo · Post by **macangelo** » Mon 6. Jun 2005, 20:03

Hi brans,

danke für den Link. Mein Deutsch ist ganz ok, also habe ich das mal durchgelesen

Was ich brauche ist ein Artikel-Listing (mit Bildern), das aber nicht alle Schlagtexte mit Bild untereinander setzt, sondern in einer Tabelle, z.B. 4 in einer Reihe, und bei dem 5. Artikel soll das Template kapieren, daß es eine neue Zeile anfangen soll.

Daher bin ich mit den absoluten Positionierungen der div-tags etwas verunsichert. Verstehe ich das richtig, das das Listing-Template nur ein Zelleninhalt ist, das phpwcms dann zu einer ganzen Seite zusammenbaut? Dann bin ich gar nicht sicher, ob ich das hier steuern kann.

Herzlichen Dank!
macangelo

brans · Post by **brans** » Tue 7. Jun 2005, 15:22

naja die div-positionierung ist nicht absolut, alleine die Breite ist absolut:

Das Geheimnis:

Deine ContentBreite/DeineAnzahlSpalten = Breite jedes einzelnen Divs, bitte beachte den boxmodelhack, der in dem von mir verlinkten thread immer wieder erwähnt wird, damit die Darstellung wirklich in FF und IE gleich ist.

Beispiel: Dein Content ist 500PX breit du willst 5 Spalten haben:

500/5 = 100px Breite des Divs.

Dein Div, dass du im Template einrichtest muss also 100px breit sein, dann werden einfach immer 5 artikel nebeneinander gesetzt und die Zeile ist mit diesen 5 gefüllt, darum erfolgt ein zeilenumbruch und es wird eine neue Zeile begonnen.

Falls du dir überhaupt noch nicht vorstellen kannst, von was ich hier sprech, solltest du zusätzlich mal die Artikel, die ich von selfhtml im anderen thread verlinkt habe überfliegen.

Jetzt verstanden?

macangelo · Post by **macangelo** » Wed 8. Jun 2005, 09:12

Hi brans,

Herzlichen Dank. Ich bin ein gutes Stück weiter - mit der 1. Methode.
http://www.eyelikeit.com/index.php?getiled
Keine Sorge, die Ränder sind nur zum Verständnis
Jetzt habe ich natürlich die nächsten Fragen: Geht es, dass die Beiträge der neuen Zeile alle in gleicher Höhe sind (Artikel 4 ist das ja nicht)? Und ein wenig Abstand zwischen den Zeilen? ansonsten das was ich brauche.

Hier der Code für das Artikellisting, den ich aus Deinem abgewandelt habe:

Code: Select all

<!-- 

sample template for article summary listing

===========================================



TITLE       = article title

SUB         = article subtitle

SUMMARY     = article summary text

IMAGE       = summary image (only the <img src="..."> tag)

ZOOMIMAGE   = if the image is click-zoomable (<a href...><img...></a>)

CAPTION     = summary image caption

ARTICLELINK = url to full article

MORE        = the "more..." text/image like defined in template_defaults

BEFORE      = show before listing entry

AFTER       = show after listing entry

SPACE       = show this between listings

DATE        = show article date {DATE:FORMAT:LANG} or {DATE:FORMAT}


[SPACE]<hr>[/SPACE]
//-->




<div style="float:left; width:184px;">
    <table cellspacing="1" cellpadding="10" border="0" width="174" align="center" bgcolor="#444444">
      <tr>
        <td valign="top" bgcolor="#EEEEEE"">
           [TITLE]<h1 style="margin:0 0 5px 0;">{TITLE}</h1>[/TITLE]
           [SUB]<h3 style="margin:0 0 5px 0;">{SUB}</h3>[/SUB]
        </td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"">
            [IMAGE]<div><a href="{ARTICLELINK}">{IMAGE}</a></div>[/IMAGE]
            [CAPTION]<div align="center">{CAPTION}</div>[/CAPTION]
        </td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#FFFFFF"">
           [SUMMARY]<p style="margin:0"><strong>{DATE:F:DE}</strong> {SUMMARY}</p>[/SUMMARY]
           [MORE]<div align="right"><a href="{ARTICLELINK}">{MORE}</a></div>[/MORE]
        </td>
      </tr>
    </table>
</div>

macangelo

pepe · Post by **pepe** » Wed 8. Jun 2005, 10:39

Hallo macangelö,

kanst du nicht in deinen div-Container ein margin-left:4px; zusätzlich einbauen ??

Das sollte doch gehen... und die Breite um den Wert verringern!

cyrano · Post by **cyrano** » Wed 8. Jun 2005, 10:45

yeah, lecker :-)

now i goes to that what i want to have too :-)

will still follow this thread.

macangelo · Post by **macangelo** » Wed 8. Jun 2005, 10:48

Hi pepe

Ich bin etwas verunsichert - natürlich geht das mit margin-left:4px - war das als Antwort auf mein Problem mit der Position des 4. Artikels oder des vertikalen Abstandes der Artikel gemeint? Ich habe glaube ich den Faden verloren... Sorry

macangelo

pepe · Post by **pepe** » Wed 8. Jun 2005, 10:57

Ich hatte den horizontalen Abstand gemeint...

Aber du hast mit deiner Frage recht... Da hatte ich wohl nicht richtig aufgepasst... der Abstand horizontal ist ja vorhanden

Aber ein margin-bottom im Template ganz unten, sollte doch den vertikalen Abstand erzeugen!

Aber dir gehts ja besonders um die "selbe" Höhe...
Und wenn du einfach eine fixe Höhe einstellst, nach dem Bedarf der Box mit dem längsten Inhalt.

Nicht schön - dynamisch kann man das ja grade nicht bezeichnen - aber erst mal eine provisorische Lösung...

Kosse · Post by **Kosse** » Wed 8. Jun 2005, 11:55

Hi all,
Like this solution, I know you guys are aware of it über it gets difficult to read the post for a non-de

U know what I mean

(Notice I really don't want to seem rude if I could understand german better I would translate)
Vielen danke!

brans · Post by **brans** » Wed 8. Jun 2005, 15:54

hi macangelo:

change your code from

Code: Select all

<div style="float:left; width:184px;">

to

Code: Select all

<div class="articlelistingbox">

then add to your frontend.css:

Code: Select all

.articlelistingbox {
float:left; 
width:184px;
height:auto !important;
height /**/:200px;
min-height:200px;
}

should do for Mozilla on Mac and Windows and IE...

haven`t actually tested it!

my thoughts behind it where:
give mozilla the command to auto specify the height, but take 200px at minimum, so that the content won`t overlap if there once will be one article at a bigger size than your height. IE just automatically extends the box if the height of your content will be greater than 200px

if you are sure that your content won`t be bigger than a certain height, then simply use the following css code instead of the above:

Code: Select all

.articlelistingbox {
float:left; 
width:184px;
height:200px;
}

pepe · Post by **pepe** » Thu 9. Jun 2005, 09:43

Das ist DEUTSCH:

Hier habe ich eine Lösung... besser gesagt ein Workaround, da die Variante nur bei manueller Sortierung der Artikel funktioniert. Aber vielleicht besser als Nichts, oder?

Das vorhandene Template nenne ich z.B.: spalte_2-3.tmpl

Kopiere dieses vorhandene Template und speichere es z.B unter: spalte_1.tmpl

Füge diesem Template jetzt - als 1. Zeile - folgende Zeile zu: <div style="clear:left";></div>

Da du beim Erstellen deiner Artikel sowieso ein Template zuordnen mußt,
wähle jetzt für den 1. - 4. - 7. .... Artikel jeweils das Template "spalte_1.tmpl"
für alle anderen das Template "spalte_2-3.tmpl".

Das ist alles! Und funktioniert unabhängig von der Länge deiner Zusammenfassungen.

OK, nicht perfekt, da du bei zeitsortierten Artikeln Probleme hast, aber...

That's ENGLISH ( I hope ):

I have a solution here... better to say a workaround since the solution works only at a manual sorting of the articles. But perhaps better than nothing, is n't it?

I call the available template: "spalte_2-3.tmpl"

Copy this available template and store it under: "spalte_1.tmpl"

Put into this template - as 1st line - the following:
<div style="clear:left";></div>

Because you must select a template during writing each article,

for the 1st - 4th - 7th select now the template "spalte_1.tmpl",
for all other articles the template "spalte_2-3.tmpl".

That's all. And works with each height of your summaries.

OK, not perfect because you will have problems with "timesorted" articles, but ...

mfG to Düsseldorf

macangelo · Post by **macangelo** » Thu 9. Jun 2005, 11:09

Hi and thanks - allways good to have a second choice

brans above also works, did you try?

best regards
macangelo

macangelo · Post by **macangelo** » Fri 10. Jun 2005, 17:34

Hi brans,

I have to bring it up again: I wrote it works because it did - I forgot I forced each block to a min-height by a {SPACER}. After I took it out it didn't anymore.

What it does is: Each new line is on the same height. But it has no problem to lay over the box above in case it's to long.

Your css was:

Code: Select all

.articlelistingbox {
float:left;
width:184px;
height:auto !important;
height /**/:200px;
min-height:200px;
}

Is there any way to tell the second line to look for the bottom line of all boxes of the line above and then place itself 20px lower?

Thanks a lot
macangelo

brans · Post by **brans** » Sun 12. Jun 2005, 20:47

hmm... ok I actually didn't think about this problem

for the moment I don't know no solution for this. You'll have to specify the min-height to the value that is the longest summary's height.