Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2007-10-01 16:24:34

progre55
Member
Registered: 2006-05-02
Posts: 668

Article Formatting - Two Columns

I saw an old post of Els http://forum.textpattern.com/viewtopic.php?pid=113654#p113654 on this subject. I was wondering if someone could give me some additional guidance.

I have two columns and I want the articles to sort alphabetically. This is straight foward. The trick I have is rather than having 1-10 in column A and 11 – 20 in column be alphabetically, I want them to alternate between columns (backa nd forth) so you see a’s then b’s then c’s ….

Any suggestions would be appreciated.

progre55

Offline

#2 2007-10-01 18:57:16

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,729
Website

Re: Article Formatting - Two Columns

I would make a single column to contain all the articles, then surround each article in a containing div in your article form (other markup that contains your article such as dl-lists would also be possible). Make these half the width minus padding (e.g. if main column is 800px, make each article div 360px wide with 30px margin-right) and use display:block; float:left; to float these divs next to each other. It will automatically float the second article to the right of the first, then reach the end of the line, begin on the next line afresh with article 3, then float article 4 to the right, begin at the left again with article 5, float article 6 right … and so on.

Last edited by jakob (2007-10-01 18:58:16)


TXP Builders – finely-crafted code, design and txp

Offline

#3 2007-10-02 12:14:53

progre55
Member
Registered: 2006-05-02
Posts: 668

Re: Article Formatting - Two Columns

jakob:

Thanks!

I tried it, but it is listing out in one column.

I am referencing it like this:

<div id=“list”>
<txp:article_custom pgonly=“0” section=“names” sort=“Title asc” form=“article_no_title” />
</div>

and my css is this:

#list
{
WIDTH: 340px;
FLOAT: left;
TEXT-ALIGN: left;
MARGIN-RIGHT: 30px;
MARGIN-LEFT: 30px;
DISPLAY: block;
FONT: 12px Verdana,sans-serif;
COLOR: #000000;
TEXT-DECORATION: none;
}

FYI: The total width of the area is 807.

Am I missing something?

progre55

Last edited by progre55 (2007-10-02 20:15:16)

Offline

#4 2007-10-15 15:44:53

progre55
Member
Registered: 2006-05-02
Posts: 668

Re: Article Formatting - Two Columns

Jakob or Anyone Else …

Am I misisng something (better stated I know I am) but any suggestions ….

progre55

Offline

#5 2007-10-15 16:23:33

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,091
Website GitHub Mastodon Twitter

Re: Article Formatting - Two Columns

It’s hard for me when I do not see the website but it seems that your css only floats the container div #list

I assume that your "article_no_title" form contains the <body /> tag.

Within that form I would have the floating div. Something like <div class="floatdiv"><body /></div>

For the .flatdiv class, I would use the same css as yours.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#6 2007-10-15 16:33:02

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: Article Formatting - Two Columns

progre55, yes, you’re missing something big time

It should look something like this:

<div id="list">
	<txp:article_custom pgonly="0" section="names" sort="Title asc" form="article_no_title" />
</div>

And in “article_no_title” form:

<div class="list-item">
	<!-- Your article-tags here -->
</div>

CSS should look:

#list .list-item {
	color: #000;
	text-decoration: none;
	font: 12px Verdana, sans-serif;
	margin: 0 30px 0 30px;
	width: 340px;
	float: left;
	display: inline; /* For IE6 */
	}

PS. You can not have float and display: block; in the same element.

Cheers!

Last edited by Gocom (2007-10-15 16:34:19)

Offline

Board footer

Powered by FluxBB