Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2005-12-06 05:02:54
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Layout of article form.
In this thread I asked how to seperate the article, title etc. into a two column setup. Something like this:
TITLE: date,time————————Article body
comments(#)—————————-Comment
Retained for reference. Continue scrolling for optimum setup example
I’ve placed the following into an article form:
<code>
<div id=“box”>
<div class=“title”>
<h1><txp:permlink><txp:title /></txp:permlink></h1>
<div class=“article”>
<txp:body />
<p><txp:comments_invite wraptag=“p” /></p>
</div>
</div>
</div>
</code>
And then used the following CSS:
<code>
#box {
width: 500px;
}
.title {
float: left;
height: 200px;
width: 200px;
}
.article {
float: right;
width: 300px;
}
</code>
The Title and article are not seperating into columns like I want them too. I’m wondering if I’m using the proper CSS, should div id be used rather then class? Any help in achieving this layout would be much appreciated. I’m just learning CSS and still getting the hang of it, so please be patient with me.
Thanks.
Last edited by Nichod (2005-12-06 11:00:18)
Please try Textpattern for Aptana
Offline
#2 2005-12-06 06:29:32
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
OK. Figured out a basic setup. Works “ok”. Its workable. I’ll experiment more. But thought I’d put up what I discovered since there doesn’t appear to be any info on doing this anywhere. Once I get it fully setup on my site I’ll make it up into a template. If anyone has suggestions. Please let me know.
Retained for reference. Continue scrolling for optimum setup example
This is the article form:
<code>
<div id=“title”>
<h1><txp:permlink><txp:title /></txp:permlink></h1>
</div>
<div id=“article”>
<txp:body />
<p><txp:comments_invite wraptag=“p” /></p>
</div>
</code>
And this is the corresponding CSS:
<code>
#title {
float: left;
padding: 10px;
margin: 20px;
background: #FFFFFF;
border: 5px solid #FFFFFF;
width: 300px;
}
#article {
float: left;
padding: 10px;
margin: 20px;
background: #FFFFFF;
border: 5px solid #FFFFFF;
width: 300px;
}
</code>
The layout result is the following:
TITLE———————ARTICLE
——————————COMMENT
Cheers.
Last edited by Nichod (2005-12-06 10:59:07)
Please try Textpattern for Aptana
Offline
Re: Layout of article form.
I’m not sure you should be using “ids” for this. If this is used on an article_list page it will be invalid as you can only use an “id” once on a page. I would use “class” instead. It should all still work.
I also wouldn’t use “h1” for an article title but that’s another argument and people have different ideas about that.
Last edited by thebombsite (2005-12-06 09:11:51)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#4 2005-12-06 10:48:47
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
I thought “class” was more appropriate. Can you explain exactly why “id” wouldn’t work? Just curious. I believe I’ve seen strict compliant sites with more than one “id” on a page. (I could be wrong of course) Or is this a txp restriction?
As to the article format itself. Beyond the simple layout. The “h1” was only temporary and was taken from a default article form. I was planning on using h3. Is there info you could share explaining the ins and outs of why the h1 shouldn’t be used, etc? And perhaps a better alternative?
Thank you for your help. I hope to have a nice template for the wonderful textgarden when this is said and done. So I can repay the helpful txp community.
Please try Textpattern for Aptana
Offline
#5 2005-12-06 10:57:37
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
Current example
<code>
<div id=“title”>
<h1><txp:permlink><txp:title /></txp:permlink></h1>
</div>
<div class=“article”>
<txp:body />
<p><txp:comments_invite wraptag=“p” /></p>
</div>
</code>
And this is the corresponding CSS:
<code>
#title {
float: left;
padding: 10px;
margin: 20px;
background: #FFFFFF;
border: 5px solid #FFFFFF;
width: 300px;
}
.article {
float: left;
padding: 10px;
margin: 20px;
background: #FFFFFF;
border: 5px solid #FFFFFF;
width: 300px;
}
</code>
Current setup. With the updated class change. Just to show the progress. Updated the other posts with recommendations to see below.
Last edited by Nichod (2005-12-06 10:59:54)
Please try Textpattern for Aptana
Offline
Re: Layout of article form.
It’s not that using an “id” won’t work. It’s the fact that an “id” can only appear on a page once if you want it to validate properly. If you have a block element that gets repeated on a page you should use a “class” instead. It shouldn’t make any difference to whether or not it works.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#7 2005-12-06 18:14:42
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
OK. I came up with yet ANOTHER method. I like this one better.
Another method
This is the article form code:
<br>
<code>
<div id=“container”>
<div class=“title”>
<h1><txp:permlink><txp:title /></txp:permlink></h1>
</div>
<div class=“article”>
<txp:body />
<p><txp:comments_invite wraptag=“p” /></p>
</div>
</div>
</code><br>
And here is the CSS code:<br>
<code>
#container {
background-color: #FFFFFF;
width: 500px;
}
.title { width: 220px; float: left; margin-left: -1px; padding: 10px;
}
.article {
padding: 10px;
margin-left: 230px;
}
</code>
This one validated as strict with my website. Not sure why the other method did. Perhaps it was something else I had changed. Anyway, its nice. If anyone sees a problem. Let me know please.
Last edited by Nichod (2005-12-06 18:19:08)
Please try Textpattern for Aptana
Offline
#8 2005-12-06 18:15:50
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
By the way. Can the wrap tag be used with the title?
Please try Textpattern for Aptana
Offline
Re: Layout of article form.
It will validate if you only have one article on a page because the “id” only appears once, but if you ever use that form for an article list it will not validate.
If you need to know what attributes can be used with a tag or how the tag can be used check out this list. Just select the tag you need to know about. The <code><txp:title /></code> tag has no attributes.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#10 2005-12-06 23:35:31
- Nichod
- Member
- Registered: 2005-06-06
- Posts: 119
Re: Layout of article form.
So it should be:
<br>
<code>
<div class=“container”>
<div class=“title”>
<h1><txp:permlink><txp:title /></txp:permlink></h1>
</div>
<div class=“article”>
<txp:body />
<p><txp:comments_invite wraptag=“p” /></p>
</div>
</div>
</code>
<br>
With the appropriate CSS changes.
Please try Textpattern for Aptana
Offline
Pages: 1