Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Split article into two columns
Not really sure how to approach this – I have one article (biographies) that displays author’s details:
-short biography, image, email link
Because there are quite a few authors, I would like to display the images, biographies and email links in 2 columns. The main div is 450px wide, so I would need 200px per column.
Anyone know how I could do this?
Offline
#2 2005-11-12 10:02:44
- nardo
- Member
- From: tuvalahiti
- Registered: 2004-04-22
- Posts: 743
Re: Split article into two columns
maybe something like this in your article form:
<div class="author-box">
<div class="author-left"><txp:article_image /><br />author's email</div>
<div class="author-right"><txp:body /></div>
</div>
with styles like
.author-left {float:left;}
and this article might prove helpful if you’re having probs clearing floats
Offline
#3 2005-11-13 05:18:13
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Split article into two columns
Plugin: jcb_columnize
Offline
Re: Split article into two columns
Thanks for the tips. I saw jcb_columnize but not sure if its what I want – an image, name and email. About 30 of them split into 2 columns. I haven’t got around to working on it yet so any other ideas would be welcome before starting.
Offline
#5 2005-11-25 04:18:23
- makenosound
- Member
- Registered: 2005-08-05
- Posts: 12
Re: Split article into two columns
Did you mean display all the information in each column, or just the bio in one column and the rest of the information in another?
If you’re looking to display all the info in each column you could just wrap all the info in a div, set it to half the width of the container and float:left … though you’ll likely have to set an exact height to get a consistent layout. This should only be a problem if the bios differ dramatically in length.
Offline
Re: Split article into two columns
It would be:
Image, short bio, email
Image, short bio, email
The above would be repeated about 40 times, so lets say 20 in each column.
The image goes to the left, the bio/job title goes to the right of the image with the email under the bio/job title.
I would not know how many authors either, depends on the client, so a flexible length is best. In my previous version (non-TXP site) I had a script that sorted the authors according to the wishes of the client. Don’t think I can do that with TXP.
Last edited by jstubbs (2005-11-25 13:31:50)
Offline
#7 2005-11-28 06:53:40
- makenosound
- Member
- Registered: 2005-08-05
- Posts: 12
Re: Split article into two columns
I think the method of floating the entire bio would probably suit, though I’m still not exactly sure I understand what you want.
I thinking something like this for your html:
<code>
<div id=“content”>
<div class=“bio”>
<img src=“bioimage” />
<div class=“biocontent”>
<h3>Name</h3>
<p>Short bio paragraph</p>
<p><a href=“mailto:emaillink”>Email link</a>
</div>
</div>
</div>
</code>
Then just something like this for you CSS
<code>
#content {
width: 450px;
}
.bio {
float: left;
height: 200px;
width: 200px;
}
.bio div {
float: right;
width: 100px;
}
</code>
That should create two columns that order like so:
1 2
3 4
5 6
7 8
Is that what you were after, or something else?
Last edited by makenosound (2005-11-30 11:28:50)
Offline
Re: Split article into two columns
Hello, yes that is pretty much what I am after:
1 2
3 4
5 6
I appreciate the help. I just have not got around to working on this yet, hence no feedback from my side. If and when I get it working I will post the code.
Offline
Pages: 1