Posted 2 years ago #
Hi
This is probably pretty simple, but I cannot find anything on the web to do what I want.
On my homepage you will see under Breadcrumb Trail Travel Blog, "Latest Post:"
Below that you'll see the automatically generated Post Title. "Topsy Turvy"
How do I get these two inline?
Thanks
James
My site: http://www.thebreadcrumbtrail.org/
Posted 2 years ago #
Hey James - This is your code currently:
<p class="latestpost">Latest Post:</p>
<p> </p>
<p class="excerpttitle"><a href="http://www.thebreadcrumbtrail.org/archives/533" rel="bookmark" title="Permanent Link to Topsy Turvy">Topsy Turvy</a></p>Paragraph tags are, by default, block elements. That means they won't display inline. In order to do so, you'd need to modify your CSS, such as:
.latestpost{display:inline;}
.excerpttitle{display:inline;}Or, the other option is to just modify your PHP. Instead of outputting two paragraph tags, just output something like:
<p class="latestpost">Latest Post:<span class="excerpttitle"><a href="http://www.thebreadcrumbtrail.org/archives/533" rel="bookmark" title="Permanent Link to Topsy Turvy">Topsy Turvy</a></span></p>
Hope that helps.
BTW: From an SEO (and semantic) perspective, your post titles would be better suited inside of a heading tag (h2, h3, etc.). ;)
Posted 2 years ago #
Thanks so much Katendarcy!
That did the trick. However, I want to indent the post title. In my css file I have text-indent: 2ex;
But it has no effect. Also, I changed the alignment to right, which did nothing. I have highlighted the background, and it seems the words cannot move outside of the set area. I'm assuming I need to make the area bigger.
Do you know how can do this?
Also, the other alternative would be to add some space into the text. But I have yet to find out how to do this. If I can get an answer to this also, this will also help me with my "more" tag at the bottom of the excerpt. I put .......More Crumbs >>. When infact I want a space instead of the ......
Thanks
James
Posted 2 years ago #
Hey James - Glad it worked. :) I'm going to be heading out in a few, so I can't look at the site right now. But, to get you in the right direction, that declaration isn't correct:
text-indent: 2ex
Should be:
text-indent: 2px
Or, you could you "em", etc. Not sure if that was just a typo, but I figured I'd point it out just in case.
I'll try to remember to check back in later. Let me know if that did or didn't work.
Kate
Posted 2 years ago #
I've tried em and px. Makes no difference.
As I say, if you look on the homepage, I've highlighted the background. The area of the text is tight. In other words, it looks to me like the text has no where to move.
Posted 2 years ago #
A padding-left of 2px on .excerpttitle will do the trick:
padding-left:2px;
Keep in mind that inline elements can't be styled exactly the same as block elements. Your other alternative is to have .latestpost and .excerpttitle floated, with appropriate widths set. For example:
.excerpttitle{float:left;width:200px;padding-left:2px;}
.latestpost{float:left;width:200px;}/*Or widths could be a percentage...*/But, depending on what the rest of your CSS looks like, and where else you use floats, floats can be kind of tricky. So, the padding-left should be a safe bet. Hope that helps.
Posted 2 years ago #
Aha. That did the trick. I just added some padding. THanks!
Ok, I'm going to go off topic here, although it is to do with my excerpt, so I'll start a new post.
Any chance you could look at it? I'll title it "How to add space to Read more text in a php file"
It's regarding the "more crumbs" link at the end of the excerpt. I want to replace the ...... before the more crumbs with some space, but I can't do it.
THanks again Katendarcy, you've made my day :)
This topic has been closed to new replies.
