CSS Issues

[JGaf]

Hi,

First - I'm having a problem with the search feature of this forum.  I tried to search for an answer to my question to avoid a double-post, but I received zero results regardless of the search term!  And yes, I even searched for css...and received no matches.

Now my question,

How can I get RoboHelp to, by default, apply a defined css style as a <div> tag?  Each time I apply a style, it becomes a <p class> and therefore I cannot add other elements inside this tag.

For example, I want to apply <div class="note"> then create a <ul> list inside the div tag. I'm able to hand-code this in my document, but I don't want to keep switching back and forth between design and html mode multiple times if I don't have to.

What am I missing? Did I fail to set something up correctly?

thanks in advance!

[Peter Grainge]

I don't know which search option you used but I just entered CSS and got a couple of pages of results.

To the best of my knowledge the DIV tag can only be applied in the code. Curious as to why you need to enter lists within a DIV tag.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[MergeThis]

You can do this in your .css file through the use of descendant child selectors or direct child selectors, in addition to configuring the main div.note separately. The difference between the two selectors is:

A descendant child selector applies a style based on whether one element is a descendant (at any level) of another.

div.note ul {
color: darkolivegreen;
}

In this example, the style for the UL would apply even if the list were inside a TABLE inside the DIV.

<div class="note">
<table><tr>
<ul><li></li><li></li></ul>
</tr></table>
</div>

A direct child selector applies only to immediate children of the element.

div.note > ul {
color: darkolivegreen;
}

In this example, the style for the UL would apply only if the list directly followed the DIV (no other elements between them).

<div class="note">
<ul><li></li><li></li></ul>
</div>

There is no limit to how many selectors are referenced in the element hierarchy.

div.note > ul > ol {
color: yellow;
}

In this example, the style for the OL would apply only if the list directly followed the DIV and the UL (in exact order).

<div class="note">
<ul><li></li><li></li></ul>
<ol><li></li><li></li></ol>
</div>

You could even have another style with the children reversed (div.note > ol > ul), if needed.

For more information on CSS, with working tutorials, see the w3schools.com site. I also use, as a solid reference tome, Beginning CSS: Cascading Style Sheets for Web Design, by Richard York. It's five years old, but still very helpful.

Good luck,

Leon

[JGaf]

Thank you........

I have no idea what I did to search incorrectly.  I tried three times (at least) and it returned no matches each time.  I've searched the forum many times without issue........last night, it just wasn't working for me.  It's okay now.

Yes, MergeThis, this is exactly what I need to use the div tag for, but I forgot to mention that I previously changed the "note" css entry to div.note and this caused the "note" entry to disappear from the styles pod...so the only way to use was to manually add it in the .html editor.

There has to be an easy solution to this.....I just can't figure it out.

btw - thanks for the book recommendation!

[MergeThis]

Oh, yeah, the "dedicated" default styles thingie...

Well, then, call it div.tips or div.btw or div.xyz or anything unrelated to the default styles (Heading, etc.). Hey, as long as you know what it means, you're the only one who'll see it, anyway!

Good luck,

Leon

[JGaf]

Right, I can create a new div.note css entry, but it doesn't show up anywhere in the styles pod.  When I want to add to the document, I'll have to hand-code it.

Someone please correct me if I'm wrong.

please.

 

[Peter Grainge]

That's what I said.

Still curious as to why you need this.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[JGaf]

Peter,

I'm converting existing documents, created with Homesite, into a RH project.  The note css style has already been created and has been used extensively throughout the Homesite document as <div class="note">  (I don't think <p class="note" was ever used).  When placed in RH, this css "note" style became a <p class> so I lost some formatting ability, i;e., the <ul> now  displays OUTSIDE the "note" tag.

For my document, the css style "note" is used for important notes, tips, etc. It always displays a "lightbulb" image with colored background behind and enclosing the text.  Sometimes, the number of tips require them to be displayed in bullets.  I can't add bullets <ul> within  the <p class>.

An alternative, I suppose, is to create several "note" styles in RH, one as a bulleted list, one as a numbered list, etc and anything else I would need. Then just apply the particular style based on what I need at that particular place on the page.

Any thoughts???

[perttime]

Just an opinion...

If you have so many notes and tips that they need to be displayed as a list, you have have too many notes and tips.

The best way would be a complete rewrite, to give more information in the body text. That might not be feasible, though.

[Peter Grainge]

Certainly for any new lists you create I would create list styles with the required definitions. You haven't said which version of RoboHelp you are using but there is information on my site under Using RoboHelp 8. It explains what needs to be in a list style and why you might want to override that with a paragraph style. There is also a page on including images as the bullet.

For existing lists you will have to decide whether or not to convert them.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[MergeThis]

You're not wrong.

RH is certainly not going to add Note Div with Yellow Bullet List under Green Numbered List to the Style dropdown.

However, only the <div class="xyz"></div> has to be manually coded to wrap around the lists you've added in Design mode, in the proper order.

Good luck,

Leon