enter unbreakable vertical space
-
I am trying to enter blank lines. I have tried &nsbp;
; <p><p>. All disappear. None are permanent.
The blog I need help with is: (visible only to logged in users)
-
The code I mentioned above was of course entered in the text/code version of the post, not the WYSIWYG visual version.
-
I haven’t published the post.
This is what I want:
image with a line of text to the right, 2 line breaks below top of image
then another image 1 line break below the text
then a third image below the second image with space between them and 2 lines of text to the left of the third image
and so on. -
The nbsp is used to create a non-breaking space between two words, not to create blank lines. Empty paragraphs are also wrong.
To do what you’re looking for you’d need coding to add extra top or bottom margins or padding, plus coding to cancel the wrap-around effect of left-aligned images where appropriate.
But you’re probably not aware that the theme you’re using has a ‘responsive’ layout. It shrinks to adapt to different screen resolutions and mobile devices, so you’re not supposed to aim for combinations like the one you’re describing: the narrower the theme becomes, the more they’ll get dislocated. So you probably need to reconsider first. -
Thank you. I found a work-around that helps:
<div style=”margin-bottom: 8em;”><span style=”display: none;”>.
</span></div>By varying the size (ems) and the placement of the code I was able to do what I wanted, more or less.
-
You’re welcome. But
a) The span part of this code is unnecessary. The div part of it is a bit perverse: it says create a section that has no height and add X margin, instead of saying create a section that has X height. Images have fixed pixel dimensions, so vertical positioning in relation to an image should be expressed in px, not em. And anyway this way of adding space in general produces very crude results.
b) You ignored the second paragraph of my previous reply. Drag the browser window to make it narrower and see what different visitors will see. -
Thank you again.
The display on my phone was messed up as you said, though the iPad display was fine, even when I narrowed the width.
I took away some of the spans, and that made no difference, as you said.
Do I replace
<div style=”margin-bottom:1em;”></div>
with
<div style=”margin-bottom:1px;”></div> ?I’ll experiment later.
-
No, that method won’t work well no matter what values you use. If you use the post you published as an example and describe exactly what you want where, I can show you better ways to do it.
-
The post is
http://dianevacca.wordpress.com/2013/11/10/saturdays-2/.Would you like the code?
What you see is approximately what I was aiming for. The spacing is a little uneven. I’d like the lines of text centered vertically in the space next to the picture. Or at least all the text in the same relative position to the pictures.
Not knowing the code to achieve my goal, I spent hours with trial and error, just because I’m like that, wasting time that I need for other things. It wasn’t a great post any way.
BUT knowing the right way to do it would be terrific– and will I’m sure save many hours in the future. If you can tell me how, I’d be very grateful. Just let me know what you need.
-
Thanks. I don’t need anything: I can see your sourcecode. I’ll copy it to replicate the post in my test blog and work things out (later).
-
So:
a) Delete all those divs you have added.
b) The first image has no text next to it, so turn its alignment from alignleft to alignnone.
c) For the rest, use this model:IMAGE CODE HERE <p style="padding-top:44px;">ACCOMPANYING TEXT HERE</p> <div style="clear:both;"></div>Explanations after you apply this!
Of course this won’t solve the problem on very narrow devices. To solve that, and/or to make each text vertically centered in relation to the image, you’d need table coding. Are you interested in this too? In my opinion it would be too far-fetched: if you like to play with text & image combinations, better switch to a fixed-width theme.
-
Thank you again.
I assume the size of the padding will vary with the size of the image.1. There’s a nice separation between the first image and the second, Need the same between the second and third.
2. Only two of the texts are actually centered with respect to their images. I assume that’s because you can’t use 44px for every image, when they have different sizes.
3. I can’t figure out why “Saturday Night Live” has a line break after “Saturday.”
4. I’d like to make the space between the images consistent. The extra space really matters only when two pictures overlap, especially the last two.
-
Sorry– forgot to say that the changes are incorporated in a version of the post, still in draft, called “test new code.”
-
First, about the div I suggested:
When you set the alignment of an image to left or right, the rest of the content is supposed to wrap around the image. This is what messes things up. The clear:both command cancels the wrap-around effect, so that each text can be placed in relation to its companion image, unaffected by what precedes it (except of course if the preceding text is longer than its own companion image).Now:
2. The 44 was an arbitrary example, just to show you the coding. But I didn’t aim for vertically centering the texts: as I said, in a flexible-width theme that’s impossible without table coding.
Once the clear:both divs are in place, the top padding adjusts the top of the text in relation to the top of the image. If you use the same padding for all the texts, they’ll all start at the same distance below the top of their companion images (not good in this case).1&4. I don’t know which “nice” separation you’re seeing: depends on whether you’ve entered a paragraph break (blank line in the Text editor) between the first image code and the second, or only a line break. In the first case the space is around 25px, in the second case only a few pixels. In either case you need to add a bottom margin to all the images except the first. Turn these:
<img ETC ETC
to:
<img style="margin-bottom:25px;" ETC ETC
Note: this is required because images don’t have enough default bottom margin on this theme; on other themes you wouldn’t need this adjustment.3. You have entered that line break yourself. But you don’t need to delete the break, you need to delete the whole phrase and re-do it, because you’ve turned “Saturday” into a link and “Night Live” into a separate link (to the same video).
-
Hallelujah! Mission accomplished! Thank you!
I admire your patience. Yes, I had removed the extra link but couldn’t find the break between “Saturday” and “Night Live.” Maybe it was the after “Saturday” instead of following “Night Live.” It doesn’t matter now.
Can you try out themes before deciding to change? What happens to the appearance of the old posts? Most of them shouldn’t be a problem, but I have struggled with this problem on some older posts. I suppose they would be scrambled on a different type of theme.
I thought Pilcrow had a fixed width. The page is always split between the posts and the sidebar in the same dimensions. Apparently “fixed width” means something else.
-
You’re welcome!
You can go to Appearance > Themes, locate the theme you’re interested in and click Live Preview.
Before doing that, you could visit the Theme Showcase site and see demos of all the themes, to see which ones you like.
http://theme.wordpress.com/Fixed width means the total pixel width of the theme (the white area in your case) doesn’t change (so, the higher your screen resolution the more of the blue bg you’ll see). Flexible width means the theme changes its pixel width to adapt to different screen resolutions and devices. Pilcrow doesn’t have a fixed width, it has a fixed maximum width, and the main content column and the sidebar(s) have fixed proportions. You don’t easily realize this because Pilcrow is rather narrow when you use the one-sidebar layout.
- The topic ‘enter unbreakable vertical space’ is closed to new replies.
WordPress.com Forums 