WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I've decided to add a page or two to my blog. My question is as follows. I've added my first page, but other than a date-time-stamp, I can't figure out how to get a "break" between the posts. I've tried the <HR> tag (horizontal line) but that does not seem to work.
Any ideas/suggestions on how I can create a "break-line" between posts?
Hey there, could you provide us with a link to your blog, please?
The hr tag generally works, but strangely not with the theme you're using - if your blog is http://obliteratedserenity.wordpress.com/ .
Assuming you do indeed refer to a line between sections in a page (and not "between posts", as you write afterwards), you can upload an IMAGE of a line.
Another way to separate sections would be to give them the appearance successive posts have in your theme, by highlighting the titles of the sections (in the visual post editor) and choosing Heading 2 or 3 from the "Format" dropdown.
Or perhaps you simply mean you cannot add extra blank lines between sections (a common complain); in that case use one of these (in the html post editor):
<p></p>
<p> </p>
<p align="none"></p>
(I'm giving all three because which one works keeps changing all the time.)
"The hr tag generally works, but strangely not with the theme you're using "
The funny thing about that, is that it is visible in the editor, but not on the page once is it saved and published.
Thanks for the suggestions.
That's because the visual editor is generic: displays things the "standard" way, not necessarily exactly the way they will show up in the blog with a particular theme. For instance, links in the visual editor are always underlined while in some themes they turn up in a different color instead of underlined. Or images will appear stuck together if you don't do something to separate them, but some themes are designed to create proper space around them automatically.
obliteratedserenity
carocat
<p align="none"></p>Just to clarify, the "align" property doesn't have a "none" value. It only has 3: left (default), center and right.
HTH
devblog, actually it has FOUR: left, center, right and justify.
But this is beside the point here. The point is I had found that combination to be a working one for extra blank lines at a time when a simple opening and closing p tag wouldn't work anymore. And when I first suggested it in the forum, I mentioned that it worked the same with ANY of the values - which are absolutely immaterial in this no-content case. But ok, to satisfy our sense of "correctness", if I happen to suggest it again I'll have it with left instead!
panaghiotisadam,
You are right, "justify" is its fourth value. Since it's deprecated, and since I haven't used it for a long time, I forgot about it.
Well, It's great that you found a solution to this little "problem", and I believe my previous post wasn't to say otherwise, but to correct the use of the "none" value because people who may be starting to learn HTML might improperly use it. So to me, it's more than just satisfying "our sense of correctness".
Having said that, may I suggest a different approach?
Instead of using "p" tags, what if we start suggesting the use of this code
<div style="height:[20]px;"></div>where 20 is a suggested value and the user can change it to fit their needs. I tested this on one of my blogs that don't have the CSS upgrade and it works.
Like one of my professors at college used to tell us: "this is just one way to do it." And since you already provided a solution, then I'd say "this is _another_ way to do it."
oh, and to not confuse others, the value of "height" doesn't have brackets; in this case, they mean that 20 is the suggested value.
OH YES! Most immediately adopted!
As I noted in my initial post in this thread, my suggestions were unstable. Once the simple p-p one used to work. Then it stopped working, so I experimented trying to find something additional inside it that would make it register, and came up with the +align version. Now this isn't working and the simple one does again. Once, in an exchange with thesacredpath, I told him that one of the two didn't work and he said for him it did (while he's a Mac user, I think, like me)... So we're talking about imperfect solutions: yours is a lot better.
Note that it also works with p instead of div. And I might add a variant, in case someone would rather measure blank space in terms of number of lines:
<p style="height:1.4px;"></p>
(as many times for as many blank lines)
Nice.
Just a couple of recommendations:
a) Pixel values are absolute, so I would recommend to not use decimal values. For your example, it'd be better to use a value of 2px; or better yet, for the type of usage, I'd recommend using "em" units instead (i.e. height: 0.5em).
b) Semantically, using "p" tags wouldn't be correct in this case, that's why my recommendation on using "divs" instead. Also, one of the reasons of using this kind of approach, the use of extra elements would be unnecessary. So, if a user wants to add two "extra" lines, instead of writing two "div" or "p" tags with a height of 0.5em each, they can just double that value: 1em, and the results would be as expected. Additionally, "p" tags have a default margin that may double the intended height. So, in pixesl, instead of having a 1.4px height, in reality you'd have a height of 21.4 pixels (approximately 10px for each margin, top and bottom).
At home, I'm a mac user too. But as a web developer, I'm used to trying me websites look the same in as many browsers as possible, so we need to add one more attribute to this solution to make it look good in IE6.
You see, even if you set a height to an element, IE6 will keep a space/padding inside, as if something invisible is preventing it from making the height smaller than 15 or so pixels. Imagine having as many elements for as many blank lines, in Safari, Firefox, Camino, etc. the page would look as intended, but in IE6, the page would look really weird. So, to make it "behave" the same way Firefox or Safari would, I'd recommend using this revised code:
<div style="height:0.5em; overflow:hidden;"></div>This should work well in all major browsers.
Hope this helps.
Ah, great!
Of course I had no idea what happens with IE, as I'm not using it (used to, back at the old days of OS 9, but obviously not now); judging from various forum complains, I only knew IE is a strange creature...
As for the "1.4", the idea came from another code I happened to use recently. I needed to have a block of text highlighted in a different background color, and with a plain div style...background-color...hex the leading (sorry for the DTP parlance!) got disrupted; so I added the "line-height" attribute and found that 1.4 would give me the standard wp blog line-spacing. But I guess I mis-applied it to this different situation.
Anyway - I've tried all these and we're all settled now: your first code for blank space in general (with the number adjusted as one sees fit), your 0.5em variant for a single blank line (with the number possibly doubled or tripled). Duly copied and saved, sir!
Many thanks for your time and advice.
Sure thing. Happy to be of assistance.
This topic has been closed to new replies.
