Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-08-18 12:55:19
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
How do you put some separation between "prev" and "next" links?
<a href=“http://www.kentuckygolfing.com/article/15/this-is-another-test”>http://www.kentuckygolfing.com/article/15/this-is-another-test</a>
As you can see, right below that test article the two links, one “prev” article and the other “next” article. How would you go about putting some separation in between those so they are not so close together? I’m trying to think, but my CSS skills don’t seem to be coming up with any kind of an answer. I just want to try to keep the code nice and clean and not use any or very little non breaking spaces and stuff like that in the design.
What do you do for this?
Offline
Re: How do you put some separation between "prev" and "next" links?
could you not wrap each one in a seperate div such as “article_next” and “article_previous” then float them left and right? Not sure if it would work, there’s probably an easier way
Offline
#3 2006-08-18 16:26:43
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: How do you put some separation between "prev" and "next" links?
hmmm…I’ll try that. I think it will work. :o)
Offline
#4 2006-08-18 16:38:51
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: How do you put some separation between "prev" and "next" links?
Okay, I’ll show you the code that I have, and maybe someone can explain why the link on the right or to the “next” article is displaying below the “prev” article.
<br />
<code>
<div id=“prev_next”>
<span id=“prev”><txp:link_to_prev><span class=“right_left_arrows”>«</span> <txp:prev_title /></txp:link_to_prev></span>
<span id=“next”><txp:link_to_next><txp:next_title /> <span class=“right_left_arrows”>»</span></txp:link_to_next></span>
</div>
</code>
<br />
<code>
#prev_next {
margin: 10px 0 0 0;
width: 300px;
}
#prev {
float: left:
}
#next {
float: right;
}
</code>
<br />
I’m not an expert with floats, so I’m sure that’s where my problem lies. Can someone explain it, or show me a link where I can read about what is going on? I’d search, but really don’t know what to search for.
<br />
Again, here is the link: <a href=“http://www.kentuckygolfing.com/article/15/this-is-another-test”>http://www.kentuckygolfing.com/article/15/this-is-another-test</a>
Last edited by deronsizemore (2006-08-18 16:39:30)
Offline
Re: How do you put some separation between "prev" and "next" links?
Try removing the colon in:
<code>
#prev {
float: left:
}
</code>
and replace it with a semicolon, like so
<code>
#prev {
float: left;
}
</code>
Offline
#6 2006-08-18 18:52:12
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: How do you put some separation between "prev" and "next" links?
Christopher,
Well, that worked for what my question was the first time, but there seems to be another issue. Okay, if you look at the page now, you’ll see that the “prev” and “next” links display like they should. I’ve added a margin-top: 10px to the “prev_next” div so that the “prev” and “next” article links have some spacing above them from the actual body of the article. Now, as you can see there is no spacing below the “prev” and “next” article links although there should be as I have added a margin-top: 20px to my h3 tags in the site, and they all are accepting that 20 margin-top specification except for the one immediately following the “prev” and “next” article links. I also, tried to add a margin bottom to the “prev” and “next” article links with no luck either. I can’t figure out why it’s ignoring the margin that I’m specifying?
Any ideas on that?
Here is the code I’m using:
<br />
<code>
h3 {
font-size: 11px;
margin: 20px 0 20px 0;
border-bottom: 1px solid #999;
clear: both;
}
#prev_next {
margin-top: 10px;
width: 300px;
}
</code>
Offline
Re: How do you put some separation between "prev" and "next" links?
Looks like it could be margin collapsing with the #prev_next div. Maybe, er, add some padding to #prev_next ?
Offline
#8 2006-08-18 19:39:23
- wolfcry911
- Member
- From: MA, USA
- Registered: 2006-06-30
- Posts: 51
Re: How do you put some separation between "prev" and "next" links?
The #prev_next element has no height because all it’s children are floats. You need to contain the floats. One method is add overflow:hidden; to the parent (#prev_next).
Offline
Re: How do you put some separation between "prev" and "next" links?
Ooooooh! Containing floats, of course!
Offline
#10 2006-08-18 20:06:47
- deronsizemore
- Member
- From: Kentucky
- Registered: 2005-11-02
- Posts: 324
Re: How do you put some separation between "prev" and "next" links?
Thanks for the quick replies guys! I went a head and used wolfcry’s method and all is in order. :o)
Offline