• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bulleted List

Explorer ,
May 19, 2008 May 19, 2008

Copy link to clipboard

Copied

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?

Views

1.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Deleted User
May 19, 2008 May 19, 2008
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

Votes

Translate

Translate
LEGEND ,
May 19, 2008 May 19, 2008

Copy link to clipboard

Copied

I am assuming that the bullets were applied via a style? If so, you'll have to amend the style to add some additional space.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 19, 2008 May 19, 2008

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 19, 2008 May 19, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 25, 2008 Jun 25, 2008

Copy link to clipboard

Copied

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..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Jun 25, 2008 Jun 25, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 25, 2008 Jun 25, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 25, 2008 Jun 25, 2008

Copy link to clipboard

Copied

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 06, 2008 Aug 06, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 11, 2008 Aug 11, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

Yes, that's correct.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2008 Aug 12, 2008

Copy link to clipboard

Copied

LATEST
Hi all

Here is a link that may help.

Click here

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp