Known Participant

Answered

Bulleted List

Forum|Forum|17 years ago
May 19, 2008
11 replies
1935 views

WebHelp Pro
RH 7

I'm re-working a project originally done in RH5. The bulleted lists used throughout the document have an icon for the bullets. These bullets are jammed up against the sentence itself. How do I add space between the bullets and the sentences?

HTML

This topic has been closed for replies.

Correct answer

I would try changing "inside" to "outside" in the list-style property and see if that makes a difference. If that doesn't work, you could also play with the values in the text-indent and margin-left properties and see if that will change the amount of space between the image and the text.

--Ben

A

Anonymous

Someone recently used photobucket.com to post an image. You can't post images here, so you have to use a 3rd party site to upload an image, then post the URL here. (Or if you have your own Web space, you could upload the image to your server and give us the URL.)

Captiv8r

Legend

Hi all

Here is a link that may help.

Click here

Cheers... Rick

A

Anonymous

Is the image itself just the bullet, or is it a square image with some white space around the bullet?

Can you provide a screenshot of the problem?

K

KC_in_Colorado

Inspiring

The image is from RoboHelp's gallery. It's a closely cropped circle but there are white corners. Could you tell me how to post a screenshot because I HAVE one but can't figure out how to post it here. It's a GIF file. -- kc

K

KC_in_Colorado

Inspiring

Darn. I did that and recompiled and it didn't fix the bullet alignment. I checked the output folder to make sure it had the updated CSS and it does. Any other ideas? -- kc

A

Anonymous

Yes, that's correct.

K

KC_in_Colorado

Inspiring

Thanks Ben, I'll try that. Does it go on its own line in the CSS? i.e.,

LI.P-BulletsBlueGlass {
list-style: url(blue_glass.jpg);
vertical-align: middle;

???? Not familiar with this syntax.

Thanks!
kc

A

Anonymous

If I'm understanding your problem correctly, I'd suggest manually adding the following to LI.P-BulletsBlueGlass:

vertical-align: middle;

I think that will affect the alignment of the bullet itself, if memory of previous personal follies serves. See if that helps at all.

--Ben

K

KC_in_Colorado

Inspiring

I'm also having issues with the use of a custom bullet (blue_glass.jpg) in my FlashHelp project and I confess: I'm CSS-illiterate and rely on the RH7 GUI to create/modify styles. The problem I'm having is the vertical alignment of the custom bullet in paragraphs that contain a small graphic.

I created a style for the custom bullet list called BulletsBlueGlass and the style shows up in the project CSS file as simply:

}

P.BulletsBlueGlass {
list-style: url(blue_glass.jpg);
}
LI.P-BulletsBlueGlass {
list-style: url(blue_glass.jpg);
}

In bulletted paragraphs that include a small graphic (of the book icon in a FlashHelp skin, for example), the custom bullet seems to want to align itself with the top of the small graphic. So the text for that bulletted paragraph uses a lower baseline (?) than it should. It's pretty ugly and does not happen if I use the standard bullet style (i.e., just click the Bulletted List icon in the Robo editor).

Can this be fixed wth a manual modification to the CSS? If so, how?

Thanks and sorry for the CSS ignorance! ;*)

kc

A

Anonymous

You don't need the quotes for (bgbaby.jpg), but it doesn't hurt to have them. Leon's other suggestions are worth a shot.

--Ben

R

rjmerr

Participant

Thanks for the suggestions, but I think I found a solution. I added "padding-left: 6px;" to the above parameters, and now the spacing looks good both in both WebHelp and Printed Doc output.

As to the paragraph vs. LI/UL question, I created a paragraph style just for these bulleted lists (BulletText) and that's what I was editing in the RoboHelp-generated .css file. Not sure whether it was the best approach, but I'm happy with what I have now.

Thanks...

A

Anonymous

Correct answer

I would try changing "inside" to "outside" in the list-style property and see if that makes a difference. If that doesn't work, you could also play with the values in the text-indent and margin-left properties and see if that will change the amount of space between the image and the text.

--Ben

R

rjmerr

Participant

I'm having the same issue as harooki2. Using a bulleted paragraph style with a custom bullet image (bgbaby.jpg), when I generate WebHelp there is no space between the bullet points and the text. The spacing looks fine both in RoboHelp's WYSIWYG editor and when I output to Printed Documentation (Word doc).

Here are the style sheet parameters I'm using:

p.BulletText {
margin-top: 0pt;
font-family: "Myriad Web Pro", sans-serif;
margin-bottom: 6pt;
list-style: url(bgbaby.jpg);
font-size: 11pt;
margin-left: 0pt;

I've experimented with "margin-left" and "text-indent" values, and in both cases they move the entire line (bullet included) rightward rather than inserting space between the bullet and text. (Margin-left shifts the entire block of text, and text-indent moves only the top line over).

I see no discernable difference whether "Bullet positioned inside text" is checked or not in the style's bullets and numbering options (I have it unchecked at present).

Normal bullets look fine; it's only when using a custom bullet image that I see this problem. I could use regular bullets, but I'd prefer to use the custom image as they look nicer.

Any other ideas for inserting some space between the bullet image and text? (I considered altering the .jpg itself to "widen" it, adding some blank space on the right side, but I wonder whether there isn't a better way.)

Thanks..

MergeThis

Inspiring

I believe that list-style: url(bgbaby.jpg); should be list-style-image: url('bgbaby.jpg');

That is, add -image and enclose the image file name in single quotes.

But, shouldn't you be adding this list styling to the UL or LI tag, instead of this paragraph style?

Good luck,
Leon

H

harooki2Author

Known Participant

I guess my question was even more basic. These are the parameters for bullets in the style sheet:

Normal + list-style: inside url(blue_glass.jpg); text-indent: -0.25in; margin-left: 18pt; margin-top: 5pt;

What can I add to this to increase that space? In Word, I would do this with the Tab property. I don't see a means to do that in RH.

Show more replies

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded