Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#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
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
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
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